@use "../functions" as *;
@use "../mixins/focus-ring" as *;
@use "../mixins/tokens" as *;

$form-adorn-tokens: () !default;

// scss-docs-start form-adorn-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$form-adorn-tokens: defaults(
  (
    --form-adorn-gap: .375rem,
    --form-adorn-icon-size: 1rem,
    --form-adorn-icon-color: var(--fg-2),
  ),
  $form-adorn-tokens
);
// scss-docs-end form-adorn-tokens

@layer forms {
  .form-adorn {
    @include tokens($form-adorn-tokens);

    gap: var(--form-adorn-gap);
    align-items: center;

    // Prevent default `.form-control` focus
    &:focus-visible {
      outline: 0;
    }

    &:focus-within {
      --focus-ring-offset: -1px;
      border-color: var(--focus-ring-color);
      @include focus-ring(true);
    }

    // Ghost input fills remaining space
    > .form-ghost {
      flex: 1;
      min-width: 0; // Prevent text overflow
    }

    &.form-adorn-end > .form-ghost {
      order: -1;
    }
  }

  .form-adorn-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--form-adorn-icon-color);
    pointer-events: none;

    > svg {
      width: var(--form-adorn-icon-size);
      height: var(--form-adorn-icon-size);
    }
  }

  .form-adorn-text {
    flex-shrink: 0;
    color: var(--form-adorn-icon-color);
    pointer-events: none;
    user-select: none;
  }
}