@use "@s360-base-theme/ui-core/site-config";
@use "@s360-base-theme/ui-core/colors";
@use "@s360-base-theme/ui-core/cta-primary";
@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(0) });

  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);
    width: var(--form-input--width, 100%);
    outline: 0;

    &:invalid {
      box-shadow: none;
    }

    &:focus-visible {
      --form-input--outline--width: 5px;
    }

    &::placeholder {
      color: colors.$black;
    }
  }

  textarea {
    resize: vertical;
  }

  select {
    appearance: none;
  }

  button[type="submit"]:first-child {
    @extend %cta-primary;
  }

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

  label {
    color: var(--form-label-color);
    cursor: pointer;
    font-family: var(--form-label-font-family);
    font-size: var(--form-label-font-size);

    &:has(+ *[required]) {
      &::after {
        content: "\002A";
        color: currentColor;
        margin-left: 0.25em;
      }
    }
  }
}
