@import './variables';
@import '../../../styles/sizes.media';

.left-sidebar {
    z-index: $lsb-z-index;
    display: flex;
    flex-direction: column;
    width: $lsb-width;
    height: 100vh;
    padding: 0;
    transition: left .4s cubic-bezier(.215, .61, .355, 1), width .4s cubic-bezier(.215, .61, .355, 1);

    &.is-forced-open {
        left: 0;
    }

    h2 {
        // override for nav-list
        text-transform: none;
    }

    @include small-size {
        left: -$lsb-width;
        box-shadow: 1px 5px 5px 1px $lsb-menu-shadow-fill;
    }

    @include medium-size {
        width: $lsb-width-medium;
        overflow-y: hidden;

        &.is-forced-open {
            width: $lsb-width;
            overflow-y: auto;
        }
    }
}

.left-sidebar-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;

    /* modify the spacing for the left sidebar */
    .left-sidebar-drop-veil {
        width: calc(100% - #{$lsb-drop-zone-margin * 2});
        margin: $lsb-drop-zone-margin;
        margin-top: 0;

        @include medium-size {
            top: $lsb-drop-zone-margin;
            width: calc(100% - #{$lsb-drop-zone-margin * 2});
            height: 50 - ($lsb-drop-zone-margin * 2);

            .left-sidebar-drop-wrapper-text {
                display: none;
            }

            .is-forced-open & {
                top: 0;
                height: 100%;
            }
        }
    }
}

.favorites-loading-wrapper {
    @include medium-size {
        // Override default veil display
        .loading-indicator-veil {
            display: none;
        }
    }

    display: flex;
    flex-grow: 1;

    .loading-indicator-veil.is-with-top-crawler .crawler {
        margin-top: 40px;
    }
}

.left-sidebar-list {
    position: relative;
    margin-bottom: $lsb-item-separator-margin;

    @include medium-size {
        margin-bottom: 0;
    }

    &.is-loading {
        margin-bottom: 0;
    }

    &.is-loading-empty {
        margin-bottom: 40px;
    }

    // Override nav-list default color for link
    .left-sidebar-link:not(.is-selected) {
        color: $light-charcoal;

        &:hover {
            color: $bdl-gray;
        }
    }

    &:first-child {
        .is-forced-open & {
            margin-bottom: $lsb-item-separator-margin;
        }
    }

    &:last-child {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        max-width: 100%;
        // If the window is squished, this shows the header + 5 items in scrollable list
        min-height: calc(6 * #{$lsb-item-height});
        margin-bottom: 0;

        ul {
            flex-grow: 1;
            height: 0;
            overflow-x: hidden;
            overflow-y: auto;

            &::before {
                position: absolute;
                top: #{$lsb-item-height - $lsb-scroll-shadow-height};
                left: 7.5%;
                z-index: 2;
                display: block;
                width: 85%;
                height: $lsb-scroll-shadow-height;
                box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .35);
                opacity: 0;
                transition: opacity .1s ease-in-out;
                content: '';
            }

            &::after {
                position: absolute;
                bottom: 0;
                left: 7.5%;
                z-index: 3;
                width: 85%;
                height: $lsb-scroll-shadow-height;
                margin-bottom: -$lsb-scroll-shadow-height;
                box-shadow: 0 -4px 6px -4px rgba(0, 0, 0, .35);
                opacity: 0;
                transition: opacity .1s ease-in-out;
                content: '';
            }
        }

        &.lsb-scrollable-shadow-top {
            ul::before {
                opacity: 1;
            }
        }

        &.lsb-scrollable-shadow-bottom {
            ul::after {
                opacity: 1;
            }
        }

        @include medium-size {
            margin-top: 0;

            li {
                display: none;
            }
        }

        .is-forced-open & {
            margin-bottom: 0;

            li {
                display: block;
            }
        }
    }

    > .placeholder,
    .loading-indicator-veil {
        .loading-indicator-crawler {
            margin-top: $lsb-item-separator-margin;
        }

        @include medium-size {
            display: none;
        }
    }

    > ul > li {
        // override for nav-list
        margin: 0;
    }

    // override: hide collapse button on responsive breakpoint
    .nav-list-collapse {
        top: 0;

        .fill-color {
            fill: $lsb-menu-icon-fill;
        }

        @include medium-size {
            display: none;

            .is-forced-open & {
                display: block;
            }
        }
    }
}

.left-sidebar-list:last-child {
    ul::before,
    ul::after {
        @include medium-size {
            display: none;

            .is-forced-open & {
                display: block;
            }
        }
    }
}

.left-sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    width: $lsb-width;
    height: 28px;
    padding: 0 $lsb-padding-x;
    color: $light-charcoal;
    font-size: $lsb-font-size;
    line-height: 28px;
    letter-spacing: .3px;

    .scaled-icon svg {
        transform: scale(1.4, 1.4);
    }

    &:active,
    &:focus,
    &:hover,
    &.nav-link-callout-enabled {
        color: $bdl-gray;
        text-decoration: none;
        background-color: $lsb-menu-hover-link-bg;

        & + .lsb-remove-button {
            padding: 0 8px 0 7px;
            opacity: 1;

            .lsb-remove-button-icon {
                transform: scale(1, 1);
            }
        }

        .left-sidebar-icon-wrapper .fill-color {
            fill: $light-charcoal;
        }

        .left-sidebar-link-text {
            color: $bdl-gray;
            text-decoration: none;
        }

        .new-items-indicator {
            border: 2px solid $lsb-menu-hover-link-bg;
        }
    }

    &.is-selected,
    &.nav-link-callout-enabled {
        color: $charcoal;
        font-weight: bold;

        .left-sidebar-icon-wrapper .fill-color {
            fill: $lsb-menu-selected-bg-highlight;
        }

        .is-selected .fill-color {
            fill: currentColor;
        }
    }

    &.is-selected:not(.nav-link-callout-enabled) {
        box-shadow: inset 2px 0 0 $lsb-menu-selected-bg-highlight;

        @include medium-size {
            // Default AND custom themes should not apply to this property
            box-shadow: 0 0 0 transparent !important;
        }
    }

    @include medium-size {
        width: $lsb-width-medium;
        height: 50px;
        padding: 15px $lsb-padding-x;

        .is-forced-open & {
            width: $lsb-width;
            height: 28px;
            padding: 0 $lsb-padding-x;
        }
    }
}