@import '../common/variables';
@import './mixins';

.bcs {
    .bcs-SidebarNav {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-left: 1px solid $bdl-gray-10;
    }

    .bcs-SidebarNav-tabs {
        display: flex;
        flex: 1 1 100%;
        flex-direction: column;
    }

    .bcs-SidebarNav-main,
    .bcs-SidebarNav-secondary {
        flex: 0 1 auto;
    }

    .bcs-SidebarNav-icon {
        width: 20px;
        height: 20px;

        path {
            fill: $bdl-gray-65;
        }
    }

    .bcs-SidebarNav-overflow {
        display: flex;
        flex: 1 1 1px; // IE11 doesn't support flex-basis of 0
        flex-direction: column;
        overflow: hidden;

        &::after,
        &::before {
            display: block;
            flex: 0 0 1px;
            width: 44px;
            height: 1px;
            margin: 8px auto 0;
            background: $bdl-gray-10;
            content: '';
        }

        .bdl-AdditionalTab {
            flex-shrink: 0;
        }

        .bdl-AdditionalTabs {
            flex: 1 1 100%;
            padding-top: 8px;
            padding-bottom: 8px;
            overflow: hidden auto;
        }
    }

    .bcs-SidebarNav-overflow--modernized {
        position: relative;

        // Gradient overlay at bottom to indicate scrollable content
        &::after {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background: linear-gradient(to top, $white, transparent);
            content: '';
            pointer-events: none;
        }
    }

    .bcs-SidebarNav-footer {
        display: flex;
        flex: 0 0 60px;
        align-items: center;
        justify-content: center;

        // Need to add these overriding styles because there is a specificity issue with .btn-plain
        .btn-plain.bdl-SidebarToggleButton {
            height: 24px;
            margin: 0 3px;
            padding: 4px;
        }
    }
}

@include breakpoint($medium-screen) {
    .bcs {
        .bcs-SidebarNav,
        .bcs-SidebarNav-tabs,
        .bcs-SidebarNav-main {
            display: flex;
            flex-direction: row;
        }

        .bcs-SidebarNav-secondary .btn-plain,
        .bdl-AdditionalTab {
            width: $sidebarTabResponsiveSize;
            height: $sidebarTabResponsiveSize;
            margin-right: 12px;
        }

        .bcs-SidebarNav-secondary > :last-child,
        .bdl-AdditionalTabs > :last-child {
            margin-right: 0;
        }

        .bdl-AdditionalTab:not(.bdl-is-overflow),
        .bdl-AdditionalTabPlaceholder {
            display: none;
        }

        .bcs-SidebarNav-overflow {
            &::after,
            &::before {
                display: none;
            }

            .bdl-AdditionalTabs {
                padding: 0;
            }
        }

        .bcs-SidebarNav-footer {
            .btn-plain.bdl-SidebarToggleButton {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                background-color: $bdl-gray-10;
                transform: rotate(90deg);
            }

            .btn-plain.bdl-SidebarToggleButton.bdl-is-collapsed {
                background-color: $bdl-box-blue;
            }
        }
    }
}

@include breakpoint($small-screen) {
    .bcs {
        .bcs-NavButton,
        .bcs-SidebarNav-secondary .btn-plain,
        .bdl-AdditionalTab {
            width: $sidebarTabResponsiveSize - 2; // Reducing by 2px allows all the icons to fit on the smallest supported screen size (320px)
            margin-right: 0;
        }
    }
}