@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/colors';
@import '../../../styles/definitions/placeholders';
@import '../../../constants/modifiers';
@import '../../../styles/mixins';
@import '../../../styles/fills';


.slidingPanel {
    &_wrapper {
        display: none;
        
        @include media-md-down {
            position: fixed;
            height: 100vh;
            width: 100vw;
            // make sure z-index is high enough to be over menu
            z-index:99;
            top: 0;
            left:0;
            transition: transform var(--animTime, 400ms);
            transform: translateX(110vw);
            background: $white;
        }

        &--visible {
            transform: none;
            display: block;
        }
    }

    &_closeButton {
        display: none;
        position: absolute;
        top: 22px;
        left: 18px;

        @include media-md-down {
            display: block;
        }
        
        .button_item {
            &:hover {
                background: none;
            }
            &:focus {
                outline:0;
            }
        }

        &Text {
            @extend %sr-only;
        }

        &Icon {
            width: 14px;
            path {
                @include fill-darkGray;
            }
        }
    }
}
