@use '@constants/colors' as *;
@use '@constants/mixins' as *;

.wrapper {
    background-color: $gray_dark;
    box-shadow: 0 0 0 rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    @include buildTransition(box-shadow transform);
    transform: translateX(-100%);
    width: calc(100vw - 100px);
    &[data-opened="true"] {
        box-shadow: 5px 0 20px rgba(0, 0, 0, .5);
        transform: translateX(0);
    }
    @include media(small) {
        width: 300px;
    }
}

.header {
    border-bottom: 1px solid $gray_darkest;
    box-sizing: border-box;
    color: $gray_light;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    height: 50px;
    line-height: 50px;
    opacity: 0;
    padding: 0 20px 0 50px;
    @include buildTransition(opacity);
    [data-opened="true"] & {
        opacity: 1;
    }
    @include media(small) {
        font-size: 16px;
    }
}

.container {
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: auto;
    padding: 20px;
    scroll-behavior: smooth;
}

.panel {
    margin-bottom: 20px;
}