@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, 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 {
    background-color: var(--form-input-background-color, #{ colors.$white });
    border:
      var(--form-input-border-width, 1px)
      var(--form-input-border-style, solid)
      var(--form-input-border-color, transparent);
    border-radius: var(--form-input-border-radius, 0);
    color: var(--form-input-color);
    display: var(--form-input-display, block);
    font-family: var(--form-input-font-family);
    font-size: var(--form-input-font-size);
    margin: var(--form-input-margin, 0);
    overflow: var(--form-input-overflow, visible);
    padding: var(--form-input-padding);
    width: var(--form-input-width, 100%);
    transition: var(--form-transition, all 200ms ease-in-out);
    outline:
      var(--form-input-outline-width, 0)
      var(--form-input-outline-style, dashed)
      var(--form-input-outline-color, currentColor);

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

  textarea {
    --form-input-overflow: auto;

    resize: vertical;
  }

  select {
    appearance: none;
  }

  input[type="submit"] {
    @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: #ef0909;
        margin-left: 0.25em;
      }
    }
  }
}
