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

:host {
  display: inline-flex;
  vertical-align: middle;

  .nx-signal-button__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: v(signal-button-width);
    height: v(signal-button-height);
    font-size: v(signal-button-font-size);
    border-radius: v(signal-button-border-radius);
    padding: 0;
    outline: 0;
    border: none;
    background: none;

    &.cdk-keyboard-focused,
    &:focus-visible {
      box-shadow: v(signal-button-focus-box-shadow);
    }
    &[disabled] {
      opacity: v(signal-button-disabled-opacity);
    }
  }
}
:host(.context-error) {
  .nx-signal-button__icon {
    color: v(signal-button-error-icon-color);
  }
  &:hover:not(:active):not([disabled]) {
    .nx-signal-button__icon {
      color: v(signal-button-error-hover-icon-color);
    }
  }
  &:active:not([disabled]),
  .is-active:not([disabled]) {
    .nx-signal-button__icon {
      color: v(signal-button-error-active-icon-color);
    }
  }
}

:host(.context-success) {
  .nx-signal-button__icon {
    color: v(signal-button-success-icon-color);
  }
  &:hover:not(:active):not([disabled]) {
    .nx-signal-button__icon {
      color: v(signal-button-success-hover-icon-color);
    }
  }
  &:active:not([disabled]),
  .is-active:not([disabled]) {
    .nx-signal-button__icon {
      color: v(signal-button-success-active-icon-color);
    }
  }
}

:host(.context-warning) {
  .nx-signal-button__icon {
    color: v(signal-button-warning-icon-color);
    background: v(signal-button-warning-icon-background-color);
    border-radius: 50%;
    width: 80%;
    height: 80%;
  }

  &:hover:not(:active):not([disabled]) {
    .nx-signal-button__icon {
      color: v(signal-button-warning-hover-icon-color);
    }
  }

  &:active:not([disabled]),
  .is-active:not([disabled]) {
    .nx-signal-button__icon {
      color: v(signal-button-warning-active-icon-color);
    }
  }
}
