/* =====================================================
   Etch Studio form + ACSS
   Based on the ACSS WS Form variables (--wsf-*), with
   fallbacks to core ACSS tokens. Works whether or not
   the --wsf-* variables are present in Studio.

   Markup: <form class="form"> with .field wrappers,
   .field-error, .field-help, .form-status, .honeypot
   ===================================================== */


/* =====================================================
   FORM WRAPPER
   ===================================================== */

.form {
  display: grid;
  gap: var(--wsf-form-grid-gap, var(--space-m));
  max-inline-size: var(--width-s, 40rem);
  background-color: var(--wsf-form-color-background, transparent);
  color: var(--wsf-form-color-base, var(--text-dark));
  font-size: var(--wsf-form-font-size, var(--text-m));
  line-height: var(--wsf-form-line-height, inherit);
  border-radius: var(--wsf-form-border-radius, 0);
  padding: var(--wsf-form-padding-vertical, 0) var(--wsf-form-padding-horizontal, 0);
}


/* =====================================================
   FIELD GROUP
   ===================================================== */

.form .field {
  display: grid;
  gap: var(--wsf-field-label-gap, var(--space-3xs, 0.375rem));
}

/* Two fields side by side from tablet up: <div class="field-row"> */
.form .field-row {
  display: grid;
  gap: var(--wsf-form-grid-gap, var(--space-m));
}

@media (min-width: 768px) {
  .form .field-row {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}


/* =====================================================
   LABELS
   ===================================================== */

.form label {
  color: var(--wsf-field-label-color, inherit);
  font-size: var(--wsf-field-label-font-size, inherit);
  font-weight: var(--wsf-field-label-font-weight, 600);
}

.form .optional {
  color: var(--wsf-field-help-color, var(--text-dark-muted));
  font-weight: 400;
}

/* Required marker: <span class="required" aria-hidden="true">*</span> */
.form .required {
  color: var(--wsf-form-color-danger, var(--danger));
  margin-inline-start: 0.2em;
}


/* =====================================================
   FIELDSET + LEGEND (checkbox / radio groups)
   ===================================================== */

.form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wsf-field-checkbox-gap-vertical, var(--space-2xs, 0.5rem));
}

.form legend {
  color: var(--wsf-field-fieldset-legend-color, inherit);
  font-size: var(--wsf-field-fieldset-legend-font-size, inherit);
  font-weight: var(--wsf-field-fieldset-legend-font-weight, 600);
  margin-block-end: var(--wsf-field-fieldset-legend-gap, var(--space-3xs, 0.375rem));
  padding: 0;
}


/* =====================================================
   HELP TEXT: <p class="field-help">
   ===================================================== */

.form .field-help {
  color: var(--wsf-field-help-color, var(--text-dark-muted));
  font-size: var(--wsf-field-help-font-size, var(--text-s));
  margin: 0;
}


/* =====================================================
   ERROR MESSAGES
   ===================================================== */

.form .field-error {
  color: var(--wsf-field-invalid-feedback-color, var(--danger));
  font-size: var(--wsf-field-invalid-feedback-font-size, var(--text-s));
}

.form .field-error:empty {
  display: none;
}


/* =====================================================
   CONTROLS: input, textarea, select
   ===================================================== */

.form :is(input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea, select) {
  inline-size: 100%;
  background-color: var(--wsf-field-color-background, var(--white, #fff));
  border:
    var(--wsf-field-border-width, 1px)
    var(--wsf-field-border-style, solid)
    var(--wsf-field-border-color, var(--neutral-light));
  border-radius: var(--wsf-field-border-radius, var(--radius));
  color: var(--wsf-field-color, inherit);
  font: inherit;
  font-size: var(--wsf-field-font-size, inherit);
  padding:
    var(--wsf-field-padding-vertical, 0.75em)
    var(--wsf-field-padding-horizontal, 1em);
  transition:
    background-color var(--wsf-form-transition, 0.15s),
    border-color var(--wsf-form-transition, 0.15s),
    box-shadow var(--wsf-form-transition, 0.15s);
}

/* Hover */
.form :is(input, textarea, select):hover:enabled:not(:focus) {
  background-color: var(--wsf-field-color-background-hover, var(--white, #fff));
  border-color: var(--wsf-field-border-color-hover, var(--neutral));
}

/* Focus */
.form :is(input, textarea, select):focus-visible {
  background-color: var(--wsf-field-color-background-focus, var(--white, #fff));
  border-color: var(--wsf-field-border-color-focus, var(--primary));
  box-shadow: var(
    --wsf-field-box-shadow,
    0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent)
  );
  outline: 0;
}

/* Placeholder */
.form :is(input, textarea)::placeholder {
  color: var(--wsf-field-color-placeholder, var(--text-dark-muted));
  opacity: 1;
}

/* Disabled / readonly */
.form :is(input, textarea, select):is(:disabled, [readonly]) {
  background-color: var(--wsf-field-color-background-disabled, var(--neutral-ultra-light));
  border-color: var(--wsf-field-border-color-disabled, var(--neutral-light));
  color: var(--wsf-field-color-disabled, var(--text-dark-muted));
  cursor: not-allowed;
}

/* Invalid: driven by a filled .field-error or aria-invalid */
.form .field:has(.field-error:not(:empty)) :is(input, textarea, select),
.form [aria-invalid="true"] {
  background-color: var(--wsf-field-color-background-invalid, var(--white, #fff));
  border-color: var(--wsf-field-border-color-invalid, var(--danger));
  color: var(--wsf-field-color-invalid, inherit);
}

/* Textarea */
.form textarea {
  min-block-size: 8rem;
  resize: vertical;
}


/* =====================================================
   SELECT ARROW
   ===================================================== */

.form select {
  appearance: none;
  padding-inline-end: 2.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 0.6em;
}


/* =====================================================
   CHECKBOXES + RADIOS
   Markup: <label class="check"><input type="checkbox"> Text</label>
   ===================================================== */

.form .check {
  display: flex;
  align-items: center;
  gap: var(--wsf-field-checkbox-gap-horizontal, var(--space-2xs, 0.5rem));
  font-weight: 400;
  cursor: pointer;
}

.form :is(input[type="checkbox"], input[type="radio"]) {
  appearance: none;
  flex-shrink: 0;
  display: grid;
  place-content: center;
  inline-size: var(--wsf-field-checkbox-size, 1.25em);
  block-size: var(--wsf-field-checkbox-size, 1.25em);
  margin: 0;
  background-color: var(--wsf-field-checkbox-color-background, var(--white, #fff));
  border:
    var(--wsf-field-border-width, 1px)
    var(--wsf-field-border-style, solid)
    var(--wsf-field-border-color, var(--neutral-light));
  cursor: pointer;
  transition:
    background-color var(--wsf-form-transition, 0.15s),
    border-color var(--wsf-form-transition, 0.15s);
}

.form input[type="checkbox"] {
  border-radius: var(--wsf-field-checkbox-border-radius, calc(var(--radius) / 2));
}

.form input[type="radio"] {
  border-radius: 50%;
}

.form input[type="checkbox"]:checked {
  background-color: var(--wsf-field-checkbox-checked-color-background, var(--primary));
  border-color: var(--wsf-field-checkbox-checked-color-background, var(--primary));
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 3.5L6 11 2.5 7.5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
}

.form input[type="radio"]:checked {
  border-color: var(--wsf-field-radio-checked-color, var(--primary));
  box-shadow:
    inset 0 0 0 3px var(--wsf-field-radio-color-background, var(--white, #fff)),
    inset 0 0 0 10px var(--wsf-field-radio-checked-color, var(--primary));
}


/* =====================================================
   SUBMIT BUTTON
   Use the ACSS class: <button class="btn--primary">
   Only states that ACSS does not cover are styled here.
   ===================================================== */

.form button[type="submit"] {
  justify-self: start;
}

.form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: wait;
}


/* =====================================================
   STATUS MESSAGE
   Set data-state="success" or "error" from the JS
   ===================================================== */

.form .form-status {
  margin: 0;
}

.form .form-status:empty {
  display: none;
}

.form .form-status[data-state="success"] {
  color: var(--wsf-form-color-success, var(--success));
}

.form .form-status[data-state="error"] {
  color: var(--wsf-form-color-danger, var(--danger));
}


/* =====================================================
   HONEYPOT
   ===================================================== */

.form .honeypot {
  position: absolute;
  left: -9999px;
}