/** ===== Offcanvas Sidebar ===== **/
/** ===== OffCanvas Panel ===== **/
.offcanvas-panel-wrapper {
    .offcanvas-panel-overly {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: 998;
        background-color: $color-heading;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
        cursor: pointer;
    }

    .offcanvas-panel-inner {
        position: fixed;
        z-index: 999;
        background-color: $color-heading;
        overflow: hidden;
        width: 350px;
        height: 100vh;
        top: 0;
        right: 0;
        transform: translateX(100%);
        transition: transform 0.45s ease-in-out;
        user-select: none;
        overflow-y: scroll;
        overflow-x: hidden;
        padding: 80px 40px 40px;

        &::-webkit-scrollbar {
            width: 0;
        }

        .widget {
            padding: 0;
            margin: 0;
            font-size: 15px;

            &,
            a,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                color: $color-white;
            }

            &:not(:last-child) {
                margin-bottom: 40px;
            }

            .widget-title {
                color: $color-white;
                font-size: 24px;
                margin: 0 0 35px;
                padding: 0;

                &::before,
                &::after {
                    display: none;
                }
            }

            .tagcloud a {
                color: $color-body;

                &:hover {
                    color: $color-white;
                }
            }

            input,
            select,
            textarea {
                background-color: transparent;
                color: $color-white;
                border-color: rgba(255, 255, 255, 0.1);
                border-radius: 0;
                height: 45px;
                font: {
                    size: 15px;
                    weight: 400;
                }
                padding: 0 20px;
            }

            textarea {
                padding-top: 25px;
                height: 135px;
            }

            select option {
                color: $color-body;
            }

            input[type="submit"],
            button[type="submit"] {
                color: $color-white;
                background-color: $color-primary;
                padding: 0 30px;
                &:hover {
                    color: $color-white;
                    background-color: $color-secondary;
                }
            }

            &.widget_search input {
                border: 1px solid rgba(255, 255, 255, 0.1);
                height: 45px;
            }
        }
    }

    &.show-panel {
        .offcanvas-panel-overly {
            opacity: 0.6;
            visibility: visible;
        }

        .offcanvas-panel-inner {
            transform: translateX(0);
        }
    }

    .panel-close {
        position: absolute;
        top: 30px;
        right: 30px;
        z-index: 2;
        font-size: 28px;
        line-height: 1;
        color: $color-white;
    }
}

body.admin-bar {
    .offcanvas-panel-wrapper {
        .offcanvas-panel-overly,
        .offcanvas-panel-inner {
            top: 32px;
            height: calc(100vh - 32px);

            @media screen and (max-width: 782px) {
                top: 46px;
                height: calc(100vh - 46px);
            }
        }
    }
}