@use "s360-toolkit";
@use "core/colors";

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"],
  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, 0.5em 1em);
    width: var(--form-input-width, 100%);

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

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

    resize: none;
  }

  select {
    appearance: none;
  }

  input[type="submit"] {
  }

  label {
    color: var(--form-label-color);
  }
}
