@use '../../../styles/variables' as *;

.nsi-mini-button {
  @include title-xs();

  align-items: center;
  background-color: $color-neutral-lightest;
  border: none;
  border-radius: rhythm(0.5);
  display: flex;
  gap: rhythm(1);
  height: rhythm(4);
  padding: rhythm(0.25) rhythm(1);
  transition: background-color $transition-hint;

  pa-icon {
    display: flex;
    transition: color $transition-hint;
  }

  &:not(:disabled) {
    cursor: pointer;

    pa-icon {
      color: $color-neutral-regular;
      &.destructive {
        color: $color-secondary-stronger;
      }
    }

    &:hover {
      background-color: $color-neutral-lighter;

      pa-icon:not(.destructive) {
        color: $color-dark-stronger;
      }
    }
    &:active {
      background-color: $color-neutral-light;
    }
  }

  &:disabled {
    color: $color-neutral-light;
  }
}
