@import '../../styles/colors', '../../styles/fonts', '../../styles/fontSizeCalculator', '../../styles/variables';

.ui.drawer--wing.drawer--wing-has_title_bar .drawer--wing-container-inner {
    padding-top: $drawer-title-bar-height;
}

.ui.drawer--wing {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1 !important;
    > div {
        background-color: color(backgroundColor);
        border-left: 1px solid color(borderColor);
        height: 100%;
        position: relative;
        transform: translate3d(100%, 0, 0);
        width: 100%;
    }
    .drawer--wing-container {
        background-color: color(backgroundColor);
        color: color(color);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transition: background-color 200ms ease-in;
        width: 100%;
    }
    &.color-blue {
        .drawer--wing-container {
            background-color: color(backgroundColorBlue);
            color: color(colorInverse);
        }
    }
    &.color-grey {
        .drawer--wing-container {
            background-color: color(backgroundColorNest);
        }
    }
    &.left-position {
        > div {
            border-left: none;
            border-right: 1px solid color(borderColor);
            transform: translate3d(-100%, 0, 0);
        }
        .drawer--wing-container {
            left: inherit;
            right: 0;
        }
    }
}

@media only screen and (max-width: 767px) {
    .ui.drawer.drawer-has_wing {
        .drawer-container {
            transform: translate3d(-100%, 0, 0) !important;
        }
        .ui.drawer--wing {
            > div {
                border-left: 0 !important;
            }
            .drawer--wing-container {
                width: 100% !important;
            }
        }
        &.drawer--wing-animate-out .drawer-container {
            transform: translate3d(0, 0, 0) !important;
        }
        &.left-position {
            .drawer-container {
                transform: translate3d(100%, 0, 0) !important;
            }
            .ui.drawer--wing {
                > div {
                    border-right: 0 !important;
                }
            }
        }
    }
}