@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-dimmers .drawer-dimmer {
        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;
    }
}
.ui.drawer:not(.deprecated) {
    // ####
    // Header Items
    // ####
    // Only One Header Item Showing
    &.drawer-has_action_bar:not(.drawer-has_navigation):not(.drawer-has_title_bar) .drawer-container-inner {
        padding-top: $drawer-action-bar-height-mobile;
        .drawer {
            &--action_bar {
                background-color: color(backgroundColorLight);
                border-top: 1px solid color(borderColor);
                top: 0;
            }
            &--filters_rail {
                min-height: calc(100% + $drawer-action-bar-height-mobile - 22px);
            }
        }
    }
    &:not(.drawer-has_action_bar).drawer-has_navigation:not(.drawer-has_title_bar) .drawer-container-inner {
        padding-top: $drawer-navigation-height;
        .drawer {
            &--navigation {
                top: 0;
            }
            &--filters_rail {
                min-height: calc(100% + $drawer-navigation-height - 22px);
            }
        }
    }
    &:not(.drawer-has_action_bar):not(.drawer-has_navigation).drawer-has_title_bar .drawer-container-inner {
        padding-top: $drawer-title-bar-height-mobile;
        .drawer {
            &--title_bar {
                top: 0;
            }
            &--filters_rail {
                min-height: calc(100% + $drawer-title-bar-height-mobile - 22px);
            }
        }
    }
    // Two Header Items Showing
    &.drawer-has_action_bar.drawer-has_navigation:not(.drawer-has_title_bar) .drawer-container-inner {
        padding-top: $drawer-action-bar-height-mobile + $drawer-navigation-height;
        .drawer {
            &--action_bar {
                top: $drawer-navigation-height;
            }
            &--navigation {
                top: 0;
            }
            &--filters_rail {
                min-height: calc(100% + $drawer-action-bar-height-mobile + $drawer-navigation-height - 22px);
            }
        }
    }
    &.drawer-has_action_bar:not(.drawer-has_navigation).drawer-has_title_bar .drawer-container-inner {
        padding-top: $drawer-action-bar-height-mobile + $drawer-title-bar-height-mobile;
        .drawer {
            &--action_bar {
                background-color: color(backgroundColorLight);
                border-top: 1px solid color(borderColor);
                top: $drawer-title-bar-height-mobile;
            }
            &--title_bar {
                top: 0;
            }
            &--filters_rail {
                min-height: calc(100% + $drawer-action-bar-height-mobile + $drawer-title-bar-height-mobile - 22px);
            }
        }
    }
    &:not(.drawer-has_action_bar).drawer-has_navigation.drawer-has_title_bar .drawer-container-inner {
        padding-top: $drawer-navigation-height + $drawer-title-bar-height-mobile;
        .drawer {
            &--navigation {
                border-bottom: 0;
                top: $drawer-title-bar-height-mobile;
            }
            &--title_bar {
                top: 0;
            }
            &--filters_rail {
                min-height: calc(100% + $drawer-navigation-height + $drawer-title-bar-height-mobile - 22px);
            }
        }
    }
    // Three Header Items Showing
    &.drawer-has_action_bar.drawer-has_navigation.drawer-has_title_bar .drawer-container-inner {
        padding-top: $drawer-action-bar-height-mobile + $drawer-navigation-height + $drawer-title-bar-height-mobile;
        .drawer {
            &--action_bar {
                top: $drawer-navigation-height + $drawer-title-bar-height-mobile;
            }
            &--navigation {
                top: $drawer-title-bar-height-mobile;
            }
            &--title_bar {
                top: 0;
            }
            &--filters_rail {
                min-height: calc(100% + $drawer-action-bar-height-mobile + $drawer-navigation-height + $drawer-title-bar-height-mobile - 22px);
            }
        }
    }
    // #####
    // End of Header Items
    // #####
    &.bottom-position .drawer-container {
        border-top-left-radius: 5px;
        bottom: 0;
        box-shadow: -9px 0 17px 0 rgba(0, 0, 0, 0.1) !important; // sass-lint:disable-line no-important
        overflow: hidden;
        top: initial;
        .shadow_container {
            visibility: hidden;
        }
    }
    &.top-position .drawer-container {
        border-bottom-left-radius: 5px;
        box-shadow: -9px 0 17px 0 rgba(0, 0, 0, 0.1) !important; // sass-lint:disable-line no-important
        overflow: hidden;
        .shadow_container {
            visibility: hidden;
        }
    }
    .drawer-container {
        backface-visibility: hidden;
        background-color: color(backgroundColor);
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        transform: translate3d(100%, 0, 0);
        transition: max-width 200ms ease-in-out, transform 333ms ease-in-out;
        width: 100%;
        .shadow_container {
            bottom: 0;
            height: 100%;
            left: 0;
            overflow: hidden;
            position: absolute;
            right: 0;
            top: 0;
            width: calc(100% + 30px);
            z-index: -1;
            > div {
                background-color: color(backgroundColor);
                height: 100%;
                width: calc(100% - 30px);
            }
        }
        > div:first-child {
            background-color: color(backgroundColor);
            > div:last-child { z-index: $zindex; }
        }
    }
    &.left-position .drawer-container {
        left: 0;
        right: inherit;
        transform: translate3d(-100%, 0, 0);
    }
    > div > div:last-child { z-index: $zindex; } // Vertical scrollbar
    .drawer-container-inner {
        position: relative;
    }
    &.drawer-animate-out .drawer-dimmer {
        animation: fadeOutDimmer 100ms forwards;
        animation-delay: 200ms;
    }
}

@media only screen and (min-width: 768px) {
    .ui.drawer:not(.deprecated) {
        // ####
        // Header Items
        // ####
        // Only One Header Item Showing
        &.drawer-has_action_bar:not(.drawer-has_navigation):not(.drawer-has_title_bar) .drawer-container-inner {
            padding-top: $drawer-action-bar-height;
            .drawer {
                &--filters_rail {
                    min-height: calc(100% + $drawer-action-bar-height - 22px);
                }
            }
        }
        &:not(.drawer-has_action_bar).drawer-has_navigation:not(.drawer-has_title_bar) .drawer-container-inner {
            padding-top: $drawer-navigation-height;
            .drawer {
                &--filters_rail {
                    min-height: calc(100% + $drawer-navigation-height - 22px);
                }
            }
        }
        &:not(.drawer-has_action_bar):not(.drawer-has_navigation).drawer-has_title_bar .drawer-container-inner {
            padding-top: $drawer-title-bar-height;
            .drawer {
                &--filters_rail {
                    min-height: calc(100% + $drawer-title-bar-height - 22px);
                }
            }
        }
        // Two Header Items Showing
        &.drawer-has_action_bar.drawer-has_navigation:not(.drawer-has_title_bar) .drawer-container-inner {
            padding-top: $drawer-action-bar-height + $drawer-navigation-height;
            .drawer {
                &--action_bar {
                    top: $drawer-navigation-height;
                }
                &--filters_rail {
                    min-height: calc(100% + $drawer-action-bar-height + $drawer-navigation-height - 22px);
                }
            }
        }
        &.drawer-has_action_bar:not(.drawer-has_navigation).drawer-has_title_bar .drawer-container-inner {
            padding-top: $drawer-action-bar-height + $drawer-title-bar-height;
            .drawer {
                &--action_bar {
                    top: $drawer-title-bar-height;
                }
                &--filters_rail {
                    min-height: calc(100% + $drawer-action-bar-height + $drawer-title-bar-height - 22px);
                }
            }
        }
        &:not(.drawer-has_action_bar).drawer-has_navigation.drawer-has_title_bar .drawer-container-inner {
            padding-top: $drawer-navigation-height + $drawer-title-bar-height;
            .drawer {
                &--navigation {
                    top: $drawer-title-bar-height;
                }
                &--filters_rail {
                    min-height: calc(100% + $drawer-title-bar-height + $drawer-navigation-height - 22px);
                }
            }
        }
        // Three Header Items Showing
        &.drawer-has_action_bar.drawer-has_navigation.drawer-has_title_bar .drawer-container-inner {
            padding-top: $drawer-action-bar-height + $drawer-navigation-height + $drawer-title-bar-height;
            .drawer {
                &--action_bar {
                    top: $drawer-navigation-height + $drawer-title-bar-height;
                }
                &--navigation {
                    top: $drawer-title-bar-height;
                }
                &--filters_rail {
                    min-height: calc(100% + $drawer-action-bar-height + $drawer-navigation-height + $drawer-title-bar-height - 22px);
                }
            }
        }
    }
}

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

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