@import '../../css/variables';
@import '../../css/mixins';
@import 'css/variables';
@import 'css/colors';
@import 'css/sizes';

@mixin sidebar-wrapper-collapse {
    &.-collapse-fixed {
        position: fixed;
        top: 0;
    }

    &.-collapse-absolute {
        position: absolute;
    }

    &.-collapse-fixed,
    &.-collapse-absolute {
        width: 100%;
        height: 100%;
    }
}

.sidebar-wrapper {
    position: relative;
    min-height: 100%;
    min-width: 0;
    overflow: hidden;
    z-index: var(----z-index);
    flex-grow: 0;
    flex-shrink: 0;
    width: var(----width);

    .sidebar {
        position: absolute;
        height: 100%;
        z-index: 1;
        color: var(----color);
        background: var(----background);
        width: var(----width);
        box-shadow: var(----box-shadow);
        border-width: var(----border-width);
        border-style: var(----border-style);
        border-color: var(----border-color);
        border-radius: var(----border-radius);
        padding: var(----padding);

        .sidebar-content {
            height: 100%;
            width: 100%;
            overflow: auto;
            display: flex;
            flex-direction: column;

            // Hack for fixing margin collapse bug
            // https://github.com/ant-design/ant-design/issues/7967
            // solution from https://stackoverflow.com/a/33132624/3040605
            padding-top: 0.1px;
            margin-top: -0.1px;

            .nav {
                .nav-item {
                    border-radius: var(----item--border-radius);
                    padding: var(----item--padding);

                    &.-active {
                        cursor: pointer;
                    }
                }

                &.-vertical {
                    .nav-item {
                        width: 100%;
                    }
                }
            }

            .collapsible {
                width: 100%;
                border: 0;

                .collapsible-item {
                    box-shadow: none;
                }

                .collapsible-header {
                    border-width: 0;
                    transition-property: background, color;
                    transition-duration: var(--transition-duration);
                    transition-timing-function: var(--transition-easing);
                    border-radius: var(----item--border-radius);
                    padding: var(----item--padding);
                }

                .collapsible-body {
                    border-width: 0;
                    background: transparent;

                    .content {
                        padding: 0;
                    }
                }
            }

            .nav-item,
            .collapsible-header {
                color: var(----item--color);
                background-color: var(----item--background);

                &.-focused,
                &.-hovered,
                &:focus,
                &:hover {
                    ----item--color: var(----item--color--hover);
                    ----item--background: var(----item--background--hover);
                }
            }
        }
    }

    &.-collapse-relative {
        &.-placement-left .sidebar {
            right: 0;
        }

        &.-placement-right .sidebar {
            left: 0;
        }
    }

    &.-collapse-absolute,
    &.-collapse-fixed {
        &.-placement-left .sidebar {
            left: 0;
        }

        &.-placement-right .sidebar {
            right: 0;
        }
    }

    .sidebar-overlay {
        width: 100%;
        height: 100%;
        z-index: 0;
        background: var(----overlay--background);
        border-top-left-radius: var(----border-top-left-radius);
        border-bottom-left-radius: var(----border-bottom-left-radius);
    }

    @each $breakpoint in $breakpoint-keys {
        &.-collapse-#{$breakpoint} {
            @include breakpoint-down($breakpoint) {
                @include sidebar-wrapper-collapse;
            }
        }
    }

    &.-collapse-true {
        @include sidebar-wrapper-collapse;
    }

    &.sidebar-wrapper-transition-enter-to,
    &.sidebar-wrapper-transition-leave {
        width: var(----width);
    }
}

/**
 * Sidebar animation
 */

//
// Sidebar Wrapper
//
.sidebar-wrapper-transition-enter-active,
.sidebar-wrapper-transition-leave-active {
    transition: width var(--transition-duration) var(--transition-easing);
}

.sidebar-wrapper-none-transition-enter-active,
.sidebar-wrapper-none-transition-leave-active {
    transition: none var(--transition-duration) var(--transition-easing);
}

.sidebar-wrapper-transition-enter-from,
.sidebar-wrapper-transition-leave-to {
    width: 0;
}

//
// Sidebar
//
.sidebar-transition-enter-active,
.sidebar-transition-leave-active {
    transition: transform var(--transition-duration) var(--transition-easing);
    transform-origin: left;
}

.sidebar-transition-enter-from,
.sidebar-transition-leave-to {
    transform: translateX(-100%);
}

.sidebar-transition-enter-to,
.sidebar-transition-leave-from {
    transform: translateX(0);
}

.sidebar-wrapper.-placement-right {
    .sidebar-transition-enter-active,
    .sidebar-transition-leave-active {
        transform-origin: right;
    }

    .sidebar-transition-enter-from,
    .sidebar-transition-leave-to {
        transform: translateX(100%);
    }
}

//
// Sidebar Overlay
//
.sidebar-overlay-transition-enter-active,
.sidebar-overlay-transition-leave-active {
    transition: opacity var(--transition-duration) var(--transition-easing);
}

.sidebar-overlay-transition-enter-from,
.sidebar-overlay-transition-leave-to,
.sidebar-overlay-transition-leave-active {
    opacity: 0;
}