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

// The drawers z-index's starts at 10000
$zindex: $drawer-zindex;

html:not(.ua-ie-edge):not(.ua-ie-11) body {
    &.drawer-deprecated-open {
        overflow-y: scroll;
        position: fixed;
        width: 100%;
    }
}
.ui.drawer.deprecated {
    .drawer-container {
        backface-visibility: hidden;
        background-color: color(backgroundColor);
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(100%, 0);
        &.left-position {
            right: inherit;
            left: 0;
            transform: translate(-100%, 0);
        }
        transition: max-width 200ms ease-in-out, transform 333ms ease-in-out;
        width: 100%;
        &.drawer-container-inverse {
            background: color(backgroundColorInverseAlternate);
            color: color(colorInverse);
            .drawer-container-inner .drawer-header {
                background: color(backgroundColorInverseAlternate);
                color: color(colorInverse);
            }
        }
        &.color {
            &-dark-blue {
                background: color(backgroundColorBlue);
                color: color(colorInverse);
                .drawer-container-inner .drawer-header {
                    background: color(backgroundColorBlue);
                    color: color(colorInverse);
                }
            }
        }
        &.drawer-container-no-header {
            .drawer-close-button {
                position: fixed;
                right: 11px;
                top: 11px;
                z-index: 1;
            }
        }
        > div > div:last-child { z-index: $zindex; }
    }
        .drawer-container-inner {
            position: relative;
            .drawer-header {
                align-items: flex-start;
                background-color: color(backgroundColor);
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                left: 0;
                padding: 70px 0 0;
                position: fixed;
                top: 0;
                transition: box-shadow 150ms linear;
                width: 100%;
                z-index: $zindex;
                .avatar-container {
                    top: -6px;
                }
                .title {
                    left: 0;
                    padding: 0 88px 0 22px;
                    position: absolute;
                    top: 21px;
                    width: 100%;
                    &.drawer-title-truncate {
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .drawer-close-button-container {
                    position: absolute;
                    right: 22px;
                    top: 14px;
                    width: 44px;
                }
                .ui.divider, .drawer-header-children { margin: 0; width: 100%; }
            }
            .drawer-children > :first-child { margin-top: 0; } // TODO: Before commiting find out a new way of either having the container or doing first-child somewhere else.
            .drawer-pushdown { margin-top: 66px; }
        }
        .drawer-container-inverse .drawer-header .drawer-close-button-container { margin: -8px 8px 0 11px; }
        .drawer-container-is-scrolled .drawer-header { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .20); }
    &.drawer-animate-out .drawer-dimmer { animation: fadeOutDimmer 100ms forwards; animation-delay: 200ms; }
    .drawer-container {
        .drawer-wing-container {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: -1;
            > div {
                background-color: color(backgroundColor);
                border-left: 1px solid color(borderColor);
                height: 100%;
                position: relative;
                transform: translate(100%, 0);
                width: 100%;
            }
            &.left-position > div {
                transform: translate(-100%, 0);
            }
        }
        .drawer-wing {
            background-color: color(backgroundColor);
            color: color(color);
            height: 100%;
            left: 0;
            padding: 22px;
            position: absolute;
            top: 0;
            width: 100%;
            &.color-dark-blue {
                background-color: color(backgroundColorBlue);
                color: color(colorInverse);
            }
            &.color-grey { background-color: color(backgroundColorNest); }
        }

        .drawer-wing-container.left-position .drawer-wing {
            left: inherit;
            right: 0;
        }
    }
}
.drawer-dimmers .drawer-dimmer-deprecated {
    animation: fadeInDimmer 200ms forwards;
    backface-visibility: hidden;
    background-color: rgba(255, 255, 255, .7);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: $zindex + 2;
}

@media only screen and (min-width: 768px) {
    .ui.drawer.deprecated {
        .drawer-container-inner .drawer-header .title { padding-right: 77px; }
        .drawer-container-inner .drawer-header .drawer-close-button-container { top: 18px; width: 33px; }
        .drawer-container-inverse .drawer-header .drawer-close-button-container { margin: -5px 11px 0 11px; }
    }
}

@keyframes fadeInDimmer {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOutDimmer {
    0% { opacity: 1; }
    100% { opacity: 0; }
}