/* Sidebar Menu */
@import '../../styles/sizes.media';
@import '../../styles/variables';

$collapsible-side-bar-width: 240px;
$collapsible-side-bar-collapsed-width: 68px;
$collapsible-side-bar-h-padding: $bdl-grid-unit * 3;
$collapsible-side-bar-v-padding: $bdl-grid-unit * 3;
$collaspsible-side-bar-logo-v-margin: $collapsible-side-bar-v-padding + $bdl-grid-unit;
$left-sidebar-z-index: 40 !default;

.bdl-CollapsibleSidebar-wrapper {
    position: relative;
    flex-shrink: 0;
    width: $collapsible-side-bar-width;
    min-height: 400px;
}

.bdl-CollapsibleSidebar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: $left-sidebar-z-index;
    display: flex;
    flex-direction: column;
    width: $collapsible-side-bar-collapsed-width;
    height: 100%;
    max-height: 100%;
    padding: 0;
    color: $white;
    font-size: $bdl-fontSize--dejaBlue;
    letter-spacing: .3px;
    background: $bdl-box-blue;
    backface-visibility: hidden;
    transition: width .3s ease;
    will-change: width;
    -webkit-overflow-scrolling: touch;
}

/* GPU Layers for Child Elements */
.bdl-CollapsibleSidebar > * {
    backface-visibility: hidden;
}

/* Sidebar Logo */
.bdl-CollapsibleSidebar-logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    // TODO: is there a grid-based value for this sizing?
    // fixed height is to keep the menu in the same spot vertically when Box logo is hidden
    height: 32px + $collapsible-side-bar-v-padding + 4 * 1px; // logo height + padding + border
    margin: $collaspsible-side-bar-logo-v-margin -1px $collaspsible-side-bar-logo-v-margin $collapsible-side-bar-h-padding - 1px;
    overflow-x: hidden;

    .bdl-CollapsibleSidebar-toggleButton {
        // Only show toggle button if page is below medium threshold
        display: none;
    }

    a {
        display: flex;
        flex: 1 0 auto;
        max-width: 200px;
        margin-top: -4px;

        &:focus {
            outline: none; // we have a focus ring on the inner logo
        }
    }
}

.bdl-CollapsibleSidebar.is-expanded {
    width: $collapsible-side-bar-width;
}

.bdl-CollapsibleSidebar.is-expanded .bdl-CollapsibleSidebar-logo {
    opacity: 1;
}

.bdl-CollapsibleSidebar-logo .fill-color {
    fill: $white;
}

.bdl-CollapsibleSidebar-nav {
    flex: 1;
    padding: 0 $collapsible-side-bar-h-padding;
    overflow-x: hidden;

    ul {
        // explicitly set the width so that the container's scrollbar will render on top of content.
        width: $collapsible-side-bar-width - (2 * $collapsible-side-bar-h-padding);
        margin: 0;

        a:focus {
            text-decoration: none;
        }
    }
}

.bdl-CollapsibleSidebar-footer {
    flex-shrink: 0;
    margin: auto $collapsible-side-bar-h-padding $collapsible-side-bar-v-padding;

    ul {
        margin: 0;
    }

    .bdl-CollapsibleSidebar-menuItem {
        margin-top: 12px;
    }
}

@include medium-minus-size {
    .bdl-CollapsibleSidebar-logo {
        .bdl-CollapsibleSidebar-toggleButton {
            display: block;
        }
    }

    .bdl-CollapsibleSidebar-wrapper {
        width: $collapsible-side-bar-collapsed-width;
    }

    .bdl-CollapsibleSidebar-nav ul {
        width: $collapsible-side-bar-collapsed-width - (2 * $collapsible-side-bar-h-padding);
    }
    //if the hamburger icon is clicked and expands the left nav, need to update ul width
    .bdl-CollapsibleSidebar.is-expanded {
        .bdl-CollapsibleSidebar-nav ul {
            width: $collapsible-side-bar-width - (2 * $collapsible-side-bar-h-padding);
        }
    }
}

@include large-size {
    .bdl-CollapsibleSidebar-logo {
        margin-left: $collapsible-side-bar-h-padding + $bdl-grid-unit * 2 - 1px /* border */;
    }
}