/**
 * @file
 * Style form elements to mimic GCDS styles.
 */

:root {
  --ge-checkbox-input-height-and-width: var(--gcds-checkbox-input-height-and-width);
}

@media screen and (min-width: 48em) {
  form:not(:has(gcds-checkbox, gcds-radio)) {
    --ge-checkbox-input-height-and-width: 1.375em;
  }
}

/**
 * Copied from GCDS.
 * Use ge-form-reset to ignore gcds styling on a form element.
 */

form:not(.ge-form-reset) fieldset {
  padding: 0;
  border: 0;
  min-inline-size: auto;
}

form:not(.ge-form-reset) fieldset legend {
  margin: var(--gcds-fieldset-legend-margin) !important;
  padding: 0;
}

/* Set font size if legend is top level. */
form:not(.ge-form-reset) > fieldset > legend {
  font: var(--gcds-fieldset-legend-size-h3-desktop);
}

form:not(.ge-form-reset) label {
  display: block;
  max-width: 100%;
  margin: var(--gcds-label-margin) !important;
  cursor: pointer;
  color: var(--gcds-label-text);
  font: var(--gcds-label-font-desktop);
}

form:not(.ge-form-reset) input,
form:not(.ge-form-reset) textarea {
  display: block;
  width: 100%;
  min-width: var(--gcds-input-min-width-and-height);
  max-width: 100%;
  height: auto;
  min-height: var(--gcds-input-min-width-and-height);
  margin: var(--gcds-input-margin) !important;
  padding: var(--gcds-input-padding) !important;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    outline 0.15s ease-in-out;
  color: var(--gcds-input-default-text);
  border: var(--gcds-input-border-width) solid;
  border-radius: var(--gcds-input-border-radius);
  background-color: var(--gcds-input-default-background);
  background-image: none;
  font: inherit !important;
}

form:not(.ge-form-reset) input:focus-within,
form:not(.ge-form-reset) input:focus,
form:not(.ge-form-reset) select:focus-within,
form:not(.ge-form-reset) select:focus,
form:not(.ge-form-reset) textarea:focus-within,
form:not(.ge-form-reset) textarea:focus {
  border-color: var(--gcds-input-focus-border);
  outline: var(--gcds-input-outline-width) solid var(--gcds-input-focus-border);
  outline-offset: var(--gcds-input-border-width);
  box-shadow: var(--gcds-input-focus-box-shadow);
}

form:not(.ge-form-reset) select {
  display: block;
  box-sizing: border-box;
  min-width: var(--gcds-select-min-width-and-height);
  height: auto;
  min-height: var(--gcds-select-min-width-and-height);
  margin: var(--gcds-select-margin) !important;
  padding: var(--gcds-select-padding) !important;
  transition: 0.15s ease-in-out;
  color: var(--gcds-select-default-text);
  border: var(--gcds-select-border-width) solid;
  border-radius: var(--gcds-select-border-radius);
  background-color: var(--gcds-select-default-background);
  background-image: url("data:image/svg+xml;utf8,<svg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0.799988 0.900024L7.79999 7.90003L14.8 0.900024' stroke='currentColor' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position-x: var(--gcds-select-arrow-position-x);
  background-position-y: 50%;
  font: inherit;
  appearance: none;
}

/**
 * GCDS-style checkboxes (order-agnostic, flex-based)
 * Works when a container has an immediate checkbox child.
 */

form:not(.ge-form-reset) *:has(> input[type="checkbox"]),
form:not(.ge-form-reset) *:has(> input[type="radio"]),
form select {
  width: max-content;
}

/* Container with immediate checkbox. */
form:not(.ge-form-reset) *:has(> input[type="checkbox"]),
form:not(.ge-form-reset) *:has(> input[type="radio"]) {
  display: block;
  margin: var(--gcds-checkbox-margin) !important;
  padding: var(--gcds-checkbox-padding) 0 0;
}

form:not(.ge-form-reset) *:has(> input[type="checkbox"]) > *,
form:not(.ge-form-reset) *:has(> input[type="radio"]) > * {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Visually hide native box, keep a11y. */
form:not(.ge-form-reset) *:has(> input[type="checkbox"]) > input[type="checkbox"],
form:not(.ge-form-reset) *:has(> input[type="radio"]) > input[type="radio"] {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  border: 0;
  inline-size: 1px;
  block-size: 1px;
  clip-path: inset(50%);
}

/* Label as layout container. */
form:not(.ge-form-reset) *:has(> input[type="checkbox"]) > label,
form:not(.ge-form-reset) *:has(> input[type="radio"]) > label {
  cursor: pointer;
  color: var(--gcds-checkbox-default-text);
  font: var(--gcds-checkbox-label-font-desktop);
  line-height: var(--gcds-line-height-text);
  gap: var(--gcds-spacing-150);
}

/* Custom check/radio. */
form:not(.ge-form-reset) *:has(> input[type="checkbox"]) > label::before,
form:not(.ge-form-reset) *:has(> input[type="radio"]) > label::before {
  flex: 0 0 var(--ge-checkbox-input-height-and-width);
  content: "";
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    outline 0.15s;
  border: var(--gcds-checkbox-input-border-width) solid var(--gcds-checkbox-border-color, currentColor);
  background: var(--gcds-checkbox-default-background);
  inline-size: var(--ge-checkbox-input-height-and-width);
  block-size: var(--ge-checkbox-input-height-and-width);
}

/* Checkbox only. */
form:not(.ge-form-reset) *:has(> input[type="checkbox"]) > label::before {
  border-radius: var(--gcds-checkbox-input-border-radius);
}

/* Checkbox-only; checked: draw plain checkmark (uses currentColor). */
form:not(.ge-form-reset) *:has(> input[type="checkbox"]:checked) > label::before {
  color: var(--gcds-checkbox-checkmark-color);
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' aria-hidden='true'>\
  <path d='M3 8.5 6.5 12 13 4' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% 70%;
}

/* Radio-only. */
form:not(.ge-form-reset) *:has(> input[type="radio"]) > label::before {
  border-radius: var(--gcds-radio-border-radius);
}

/* Radio-only; checked: draw filled circle (uses currentColor). */
form:not(.ge-form-reset) *:has(> input[type="radio"]:checked) > label::before {
  color: var(--gcds-checkbox-checkmark-color);
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'>\
    <circle cx='12' cy='12' r='6' fill='currentColor'/>\
    </svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% 90%;
}

/* Focus on custom box. */
form:not(.ge-form-reset) *:has(> input[type="checkbox"]:focus-visible) > label::before,
form:not(.ge-form-reset) *:has(> input[type="checkbox"]):focus-within > label::before,
form:not(.ge-form-reset) *:has(> input[type="radio"]:focus-visible) > label::before,
form:not(.ge-form-reset) *:has(> input[type="radio"]):focus-within > label::before {
  border-color: var(--gcds-input-focus-border);
  outline: var(--gcds-input-outline-width) solid var(--gcds-input-focus-border);
  outline-offset: var(--gcds-input-border-width);
  box-shadow: var(--gcds-input-focus-box-shadow);
}

/* Optional: Description spacing (common class names). */
form:not(.ge-form-reset) *:has(> input[type="checkbox"]) > .description,
form:not(.ge-form-reset) *:has(> input[type="checkbox"]) > .hint,
form:not(.ge-form-reset) *:has(> input[type="checkbox"]) > .help-text,
form:not(.ge-form-reset) *:has(> input[type="checkbox"]) > small,
form:not(.ge-form-reset) *:has(> input[type="radio"]) > .description,
form:not(.ge-form-reset) *:has(> input[type="radio"]) > .hint,
form:not(.ge-form-reset) *:has(> input[type="radio"]) > .help-text,
form:not(.ge-form-reset) *:has(> input[type="radio"]) > small {
  margin: 0 calc(var(--ge-checkbox-input-height-and-width) + var(--gcds-spacing-150));
  font-weight: var(--gcds-font-weights-light);
}

/* Add "required" markers. */
form:not(.ge-form-reset) .form-required::after {
  display: initial;
  width: auto;
  height: auto;
  vertical-align: initial;
  background-image: none !important;
}
html form:not(.ge-form-reset) .form-required::after {
  content: "(required)" !important;
}
html[lang="fr"] form:not(.ge-form-reset) .form-required::after {
  content: "(requis)" !important;
}
/* Do not add "required" markers for gcds-fieldset. */
form:not(.ge-form-reset) gcds-fieldset.form-required::after {
  display: none;
}

/* Set a default submit style. */
form:not(.ge-form-reset) input[type="submit"] {
  display: inline-block;
  width: var(--gcds-button-width);
  padding: var(--gcds-button-padding);
  transition: 0.15s ease-in-out;
  text-align: center;
  text-wrap: balance;
  color: var(--gcds-button-primary-default-text);
  border: var(--gcds-button-border-width) solid transparent;
  border-radius: var(--gcds-button-border-radius);
  background-color: var(--gcds-button-primary-default-background);
  font: var(--gcds-button-font-desktop);
}

form:not(.ge-form-reset) input[type="submit"]:hover {
  cursor: pointer;
  background-color: var(--gcds-button-primary-hover-background);
}

/* Set a default reset submit style. */
form:not(.ge-form-reset) input[type="submit"][name="reset" i] {
  color: var(--gcds-button-danger-default-text);
  background-color: var(--gcds-button-danger-default-background);
}
form:not(.ge-form-reset) input[type="submit"][name="reset" i]:hover {
  background-color: var(--gcds-button-danger-hover-background);
}

/* Make error messages match GCDS. */
form:not(.ge-form-reset) .form-item input.error,
form:not(.ge-form-reset) .form-item textarea.error,
form:not(.ge-form-reset) .form-item select.error {
  border-color: var(--gcds-input-danger-border);
}

@media only screen and (max-width: 48em) {
  form:not(.ge-form-reset) > fieldset > legend {
    font: var(--gcds-fieldset-legend-size-h3-mobile) !important;
  }
  form:not(.ge-form-reset) label {
    font: var(--gcds-label-font-mobile) !important;
  }
}
