@import (reference) "./../styles/less/ring.less";

.np-action-btn {
  display: inline-flex;
  height: var(--size-32);
  padding: var(--size-8) var(--size-12);
  transition: color, background-color 0.15s ease-in-out;
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-14);
  line-height: var(--line-height-control);
  border-radius: var(--radius-small);
  align-items: center;
  color: var(--color-interactive-control);
  background-color: var(--color-interactive-accent);
  border-radius: var(--radius-large);
  border: none;

  @media (--screen-400-zoom) {
    height: var(--size-40);
  }

  &.btn-priority-2 {
    background-color: var(--color-background-neutral);
    color: var(--color-interactive-primary);
  }

  &.btn-priority-3 {
    background-color: transparent !important;
    color: var(--color-interactive-primary);
  }

  &:not(:disabled) {
    &:hover {
      background-color: var(--color-interactive-accent-hover);

      &.btn-priority-2 {
        background-color: var(--color-background-neutral-hover);
      }

      &.btn-priority-3 {
        color: var(--color-interactive-primary-hover);
      }
    }

    &:active {
      box-shadow: none;
      border-color: transparent;
      background-color: var(--color-interactive-accent-active);
      
      &.btn-priority-2 {
        background-color: var(--color-background-neutral-active);
      }

      &.btn-priority-3 {
        color: var(--color-interactive-primary-active);
        background-color: var(--color-background-screen-active) !important;
      }
    }

    &:focus {
      box-shadow: none;
    }
  }
}