@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/colors";
@use "@naomi-2025/ui-core/cta-primary";
@use "@naomi-2025/ui-core/text-styles";
@use "s360-scss-toolkit";

form {
  margin: var(--form--margin, 0);
  padding: var(--form--padding, 0);
  display: var(--form--display, grid);
  gap: var(--form--gap, #{ site-config.spacer(1) });

  input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="file"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  select,
  textarea {
    color: var(--form-input--color);
    display: var(--form-input--display, block);
    padding: var(--form-input--padding, 0.4em 0 0.2em 0);
    width: var(--form-input--width, 100%);
    outline: none;
    border-bottom: 1px solid var(--highlight-color);

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

  textarea {
    resize: vertical;
  }

  select {
    appearance: none;
  }

  input[type="date"] {
    --form-input--width: auto;
  }

  legend {
    @extend %text-style-small-copy;

    margin-bottom: 1em;
  }

  label {
    cursor: pointer;

    &:has(+ input, + div) {
      @extend %text-style-label;
    }

    &[class*="required"] {
      &::after {
        content: "\002A";
        color: var(--highlight-color);
        margin-left: 0.25em;
      }
    }
  }
}
