[data-component-id="saturn:siren-input"] {

  .siren-input__display {
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    &:focus,
    &:focus-visible {
      @apply focus-ring;
    }

    &[aria-invalid="true"] {
      border-color: oklch(0.577 0.245 27.325);

      &:focus,
      &:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.577 0.245 27.325) 40%, transparent);
      }
    }

  }

  .siren-input__status {
    opacity: 0;
    transition: opacity 0.2s ease;

    &.is-visible {
      opacity: 1;
    }
  }

  .siren-input__error {
    min-height: 1.25rem;
  }
}