@import (reference) "./../styles/variables/neptune-tokens.less";
@import (reference) "./../styles/less/mixins/_logical-properties.less";
@import (reference) "./../styles/less/ring.less";

.np-chip {
  background-color: transparent;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--size-16);
  color: var(--color-content-secondary);
  height: var(--size-32);
  margin-right: var(--size-8);
  padding: 0 var(--size-12);
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;

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

  &:hover {
    cursor: pointer;
  }

  .np-chip-label {
    padding-top: 2px;
  }

  .np-close-button {
    pointer-events: auto;
  }

  &:last-child {
    .margin(right, 0);
  }

  &:active {
    background-color: var(--color-interactive-accent-active);
    border-color: var(--color-interactive-accent-active);
    color: #fff;
  }

  &--selected {
    color: #fff;
    background-color: var(--color-interactive-accent);
    border-color: var(--color-interactive-accent);
    pointer-events: none;

    &:hover,
    &:active {
      color: #fff;
      background-color: var(--color-interactive-accent-hover);
      border-color: var(--color-interactive-accent-hover);
    }

    .np-close-button {
      color: white;
    }
  }

  &.has-error {
    background: var(--color-interactive-negative);
    color: #fff;

    .np-close-button {
      color: white;
    }

    .np-theme-personal & {
      background: var(--color-sentiment-negative);

      &,
      &:not(.disabled, :disabled):hover,
      &:not(.disabled, :disabled):active {
        color: var(--color-contrast);
      }

      &:not(.disabled, :disabled) {
        &:hover {
          background: var(--color-sentiment-negative-hover);
          border-color: var(--color-sentiment-negative-hover) !important;
        }

        &:active {
          background: var(--color-sentiment-negative-active);
          border-color: var(--color-sentiment-negative-active) !important;
        }
      }
    }
  }

  .np-theme-personal & {
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-interactive-primary);
    padding: 0 var(--size-16);
    border-color: var(--color-interactive-secondary);

    &:not(.disabled, :disabled):hover {
      color: var(--color-interactive-primary-hover);
      background-color: var(--color-background-screen-hover);
      border-color: var(--color-interactive-secondary-hover);
    }

    &:not(.disabled, :disabled):active {
      color: var(--color-interactive-primary-active);
      background-color: var(--color-background-screen-active);
      border-color: var(--color-interactive-secondary-active);
    }

    .np-close-button {
      margin-right: calc(var(--size-8) * -1);
      border-radius: inherit;

      &,
      &:hover,
      &:not(.disabled, :disabled):hover,
      &:not(.disabled, :disabled):active {
        color: inherit !important;
        background-color: transparent !important;
      }
    }

    &:not(.disabled, :disabled):focus-visible,
    &:not(.disabled, :disabled):has(:focus-visible) {
      .ring();

      .np-close-button {
        background: transparent;
        outline: none;

        &:hover {
          color: inherit !important;
        }
      }
    }

    &.np-chip--removable {
      position: relative;

      .np-text-body-default-bold {
        padding-right: var(--size-24);

        @media (--screen-400-zoom) {
          padding-right: var(--size-48);
        }
      }

      .np-close-button {
        justify-content: flex-end;
        top: 0;
        left: 0;
        position: absolute;
        padding-right: var(--size-8);
        height: 100%;
        width: 100%;
      }
    }

    &:has(.disabled, :disabled):focus-visible {
      outline: none;
    }

    &--selected,
    &--valid {
      color: var(--color-interactive-contrast);
      background-color: var(--color-interactive-primary);
      border-color: var(--color-interactive-primary);

      &:not(.disabled, :disabled):hover {
        color: var(--color-interactive-contrast-hover);
        background-color: var(--color-interactive-primary-hover);
        border-color: var(--color-interactive-primary-hover);
      }

      &:not(.disabled, :disabled):active {
        color: var(--color-interactive-contrast-active);
        background-color: var(--color-interactive-primary-active);
        border-color: var(--color-interactive-primary-active);
      }

      .np-close-button {
        color: inherit;

        &:focus,
        &:focus-within {
          outline: none;
        }
      }
    }
  }
}