.support {
  display: grid;
  position: relative;
}

.support__form {
  display: grid;
  gap: 4em;
  margin-inline: auto;
  width: min(100%, 40em);
}

.support__form fieldset {
  display: grid;
  gap: var(--space-neutral);
}

.support__form fieldset label {
  display: grid;
  gap: var(--space-medium);
  justify-items: start;
  position: relative;
}

.support__form fieldset label h2 {
  font-size: var(--font-size-large);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3625em;
  margin-top: -0.6em;
}

.support__form fieldset label p {
  margin-bottom: -0.375em;
  margin-top: -0.5375em;
}

.support__form fieldset label strong {
  background: oklch(var(--oklch-ink) / 0.4);
  border-radius: calc(var(--border-radius) / 2);
  color: var(--color-white);
  display: flex;
  font-size: var(--font-size-x-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-loose);
  line-height: 1em;
  padding: 0.5em;
  text-transform: uppercase;
  transition:
    background var(--transition),
    color var(--transition)
  ;
}

.support__form fieldset label strong span {
  margin-bottom: -0.075em;
  margin-top: -0.125em;
}

.support__form fieldset select,
.support__form fieldset input[type=email],
.support__form fieldset input[type=text],
.support__form fieldset textarea {
  appearance: none;
  border: none;
  background-color: var(--color-white);
  border-radius: calc(var(--border-radius) / 2);
  box-shadow: var(--box-shadow-strong);
  color: var(--color-ink);
  display: flex;
  font-size: var(--font-size-medium);
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  padding: 0.625em 1.1em;
  transition:
    background-color var(--transition),
    box-shadow var(--transition)
  ;
  vertical-align: middle;
}

.support__form fieldset select:focus,
.support__form fieldset input[type=email]:focus,
.support__form fieldset input[type=text]:focus,
.support__form fieldset textarea:focus {
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-strong);
}

.support__form fieldset select {
  background-image: url('/assets/images/general/icon-select.svg');
  background-position: right 1em center;
  background-repeat: no-repeat;
  background-size: 0.7em auto;
}

.support__form fieldset textarea {
  min-height: calc(8lh + 1.65em);
  resize: vertical;
}

.support__form fieldset select:has(option[value=""]:checked) {
  color: oklch(var(--oklch-ink) / 0.4);
}

.support__form fieldset input[type=email]::placeholder,
.support__form fieldset input[type=text]::placeholder,
.support__form fieldset textarea::placeholder {
  color: oklch(var(--oklch-ink) / 0.4);
}

.support__form fieldset input[type=email]:focus::placeholder,
.support__form fieldset input[type=text]:focus::placeholder,
.support__form fieldset textarea:focus::placeholder {
  color: transparent;
}

.support__form fieldset:not(.error) select:has(option[value=""]:checked),
.support__form fieldset:not(.error):has(input:placeholder-shown) input:not(:focus),
.support__form fieldset:not(.error):has(textarea:placeholder-shown) textarea:not(:focus) {
  background-color: oklch(var(--oklch-white) / 0.4);
  box-shadow: var(--box-shadow);
}

.support__form fieldset input[type=file] {
  display: flex;
}

.support__form fieldset.error:not(:focus-within) label strong {
  background-color: var(--color-red);
  color: var(--color-white);
}

.support__form fieldset.error:not(:focus-within) select,
.support__form fieldset.error:not(:focus-within) input[type=email],
.support__form fieldset.error:not(:focus-within) input[type=text],
.support__form fieldset.error:not(:focus-within) textarea {
  box-shadow: 0 0 0 max(1px, 0.05em) var(--color-red);
  color: var(--color-red);
}

.support__form fieldset.error:not(:focus-within) select:has(option[value=""]:checked),
.support__form fieldset.error:not(:focus-within) input[type=email]::placeholder,
.support__form fieldset.error:not(:focus-within) input[type=text]::placeholder,
.support__form fieldset.error:not(:focus-within) textarea::placeholder {
  color: var(--color-red);
}

.support__form fieldset.error .error {
  color: var(--color-red);
  font-weight: 600;
  margin-bottom: -0.375em;
  margin-top: -0.5375em;
}



@media(min-width: 48em) {

  .support__form fieldset label strong {
    bottom: 0;
    position: absolute;
    right: 0;
  }

  .support__form fieldset select,
  .support__form fieldset input[type=email],
  .support__form fieldset input[type=text],
  .support__form fieldset textarea {
    margin-inline: calc(-1 * var(--space-medium));
  }

}



@media(prefers-color-scheme: dark) {

  .support__form fieldset label strong {
    color: var(--color-slate-3);
  }

  .support__form fieldset select,
  .support__form fieldset input[type=email],
  .support__form fieldset input[type=text],
  .support__form fieldset textarea {
    background-color: var(--color-slate-3);
  }

  .support__form fieldset select:focus,
  .support__form fieldset input[type=email]:focus,
  .support__form fieldset input[type=text]:focus,
  .support__form fieldset textarea:focus {
    background-color: var(--color-slate-3);
  }

  .support__form fieldset select {
    background-image: url('/assets/images/general/icon-select-dark.svg');
  }

  .support__form fieldset:not(.error) select:has(option[value=""]:checked),
  .support__form fieldset:not(.error):has(input:placeholder-shown) input:not(:focus),
  .support__form fieldset:not(.error):has(textarea:placeholder-shown) textarea:not(:focus) {
    background-color: oklch(var(--oklch-slate-3) / 0.4);
  }

  .support__form fieldset.error:not(:focus-within) label strong {
    color: var(--color-slate-3);
  }

}