@import (reference) './../styles/less/core/_typography.less';

.np-form-control {
  --ring-width: 1px;
  --ring-color: var(--color-interactive-secondary);

  border: none;
  background-color: transparent;
  min-height: 0; /* TODO: Remove this override once `.form-control` isn’t used anymore */
  padding-left: var(--size-16);
  padding-right: var(--size-16);
  color: var(--color-content-primary);
  box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
  transition-property: color, opacity, box-shadow;
  transition-timing-function: ease-in-out;
  transition-duration: 300ms;

  .disabled &,
  :disabled & {
    opacity: unset;
  }

  &:focus-visible {
    outline: none;
  }

  &[aria-invalid="true"] {
    --ring-width: 2px;
    --ring-color: var(--color-sentiment-negative) !important;
  }

  &:hover:enabled {
    --ring-width: 2px;
    --ring-color: var(--color-interactive-secondary-hover);
  }

  &:focus:enabled {
    --ring-width: 3px;
    --ring-color: var(--color-interactive-primary);
  }

  &--size-auto {
    .np-text-body-large;
    padding-top: var(--size-12);
    padding-bottom: var(--size-12);
  }

  /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
  &--size-sm,
  &--size-md,
  &--size-lg {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  &--size-sm {
    .np-text-body-default;
    height: var(--size-32) !important;
    @media (--screen-400-zoom) {
      height: var(--size-64) !important;
    }
  }

  &--size-md {
    .np-text-body-large;
    height: var(--size-48) !important;
    @media (--screen-400-zoom) {
      height: var(--size-72) !important;
    }
  }

  &--size-lg {
    .np-text-title-subsection;
    height: var(--size-72) !important;
  }
}