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

.bcs-SidebarNavSignButton {
    @include bdl-SidebarNavButton;
}

.bcs-SidebarNavSignButton-icon {
    @include bdl-SidebarNavIcon;
}

.bcs-SidebarNavSignButton-icon--grayscale {
    display: none;
    margin-top: 2px; // for visual alignment;
}

.bcs-SidebarNav--modernized {
    .bcs-SidebarNavSignButton:not(.bdl-is-disabled):hover svg,
    .bcs-SidebarNavSignButton:not(.bdl-is-disabled):focus svg {
        transform: scale(1.09);
        transition: transform 150ms;
    }
}

@include breakpoint($medium-screen) {
    .bcs-SidebarNavSignButton-icon {
        display: none;
    }

    .bcs-SidebarNavSignButton-icon--grayscale {
        display: inline;
    }
}