@import '../common/variables';

.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-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-x: hidden;
            overflow-y: auto;
        }
    }

    .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;
        }
    }
}

.is-responsive-web {
    @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;
        }
    }

    @include breakpoint($medium-screen) {
        .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;
        }

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

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

        .bcs-SidebarNav-overflow {
            .bdl-AdditionalTabs {
                padding: 0;
            }

            &::after,
            &::before {
                display: none;
            }
        }

        .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;
            }
        }
    }
}