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

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

    border-radius: 0;

    &::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;
        }
    }

    // Style disabled buttons with proper visual feedback
    &[aria-disabled='true'] {
        cursor: default;
    }

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

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

    // Blueprint button focus override
    &:not(:disabled)[data-focus-visible] {
        border-radius: var(--radius-1);
        box-shadow: 0 0 0 var(--border-2) var(--outline-focus-on-light);
    }
}

.bcs-SidebarNav--modernized {
    .bcs-NavButton {
        &:not([aria-disabled='true']):hover svg,
        &:not([aria-disabled='true']):focus svg,
        &.bcs-is-selected svg {
            transform: scale(1.09);
            transition: transform 150ms;
        }
    }
}

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

        &::before {
            inset: $sidebarTabResponsiveSize 0 0 0;
            width: auto;
            height: 2px;
        }
    }
}