@import '../shared-styles/index';

$icon-size: nx-spacer(m);

:host {
    position: relative;
    display: inline-block;
    height: $icon-size;
    width: $icon-size;
    cursor: pointer;

    @media screen and (forced-colors: active) {
        color: buttonText !important;
    }
}

:host:focus {
    outline: none;
}

:host:hover {
    color: v(hover-primary);
}

:host.cdk-keyboard-focused {
    ::ng-deep nx-icon {
        @include focus-style;
        border-radius: nx-border-radius(s);
    }
}

:host-context(.is-disabled) {
    pointer-events: none;

    @media screen and (forced-colors: active) {
        color: GrayText !important;
    }
}
