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

.bcs .bcs-NavButton {
    @include bdl-SidebarNavButton;

    &::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1px;
        display: block;
        width: 3px;
        content: '';
        pointer-events: none;
    }

    &:hover {
        svg .fill-color {
            fill: $bdl-gray-80;
        }
    }

    &.bcs-is-selected {
        &::before {
            background-color: $blue;
        }

        svg .fill-color {
            fill: $blue;
        }
    }
}

.is-responsive-web {
    @include breakpoint($medium-screen) {
        .bcs-NavButton {
            width: $sidebarTabResponsiveSize;
            height: $sidebarTabResponsiveSize;
            margin-right: $bdl-grid-unit * 3;

            &::before {
                top: $sidebarTabResponsiveSize;
                right: 0;
                bottom: 0;
                left: 0;
                width: auto;
                height: 2px;
            }
        }
    }
}