form, #form {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  --xmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016.2734%2015.928%27%3E%3Cpath%20d%3D%27M13.7728%200.373534L0.349341%2013.8001C-0.113117%2014.2595-0.122883%2015.0898%200.358657%2015.5678C0.843303%2016.0427%201.67988%2016.0334%202.13613%2015.5771L15.5596%202.15366C16.0314%201.68188%2016.0349%200.867046%2015.5472%200.385955C15.0594-0.101795%2014.2544-0.111561%2013.7728%200.373534ZM15.5596%2013.7939L2.13613%200.370428C1.67677-0.0924792%200.839748-0.111561%200.358657%200.38285C-0.119328%200.870601-0.110012%201.6912%200.349341%202.15055L13.7728%2015.574C14.2446%2016.0458%2015.0661%2016.0494%2015.5472%2015.5647C16.0283%2015.077%2016.0314%2014.2688%2015.5596%2013.7939Z%27/%3E%3C/svg%3E");
  --checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.9514 17.5407'%3E%3Cpath d='M6.78642 17.5407C7.36161 17.5407 7.81475 17.3085 8.12676 16.8354L17.2683 2.69544C17.4969 2.34392 17.5901 2.0328 17.5901 1.73677C17.5901 0.960546 17.0243 0.410237 16.2356 0.410237C15.6835 0.410237 15.3538 0.599298 15.0169 1.12566L6.74735 14.2308L2.51022 8.86375C2.19465 8.45985 1.85425 8.28587 1.37847 8.28587C0.573394 8.28587 0 8.85615 0 9.63549C0 9.97499 0.116289 10.2972 0.404314 10.6403L5.45715 16.8749C5.82775 17.3272 6.23917 17.5407 6.78642 17.5407Z'/%3E%3C/svg%3E");
  --chevron-down-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.9142 10.9221'%3E%3Cpath d='M8.78134 10.9221C9.18075 10.919 9.52427 10.7685 9.83313 10.4526L17.1743 2.93202C17.4242 2.68216 17.5529 2.38036 17.5529 2.02132C17.5529 1.28371 16.9702 0.694339 16.2419 0.694339C15.8829 0.694339 15.5465 0.838577 15.2842 1.10352L8.34095 8.24382L9.2275 8.24382L2.27184 1.10352C2.01311 0.844787 1.67981 0.694339 1.31101 0.694339C0.579605 0.694339 0 1.28371 0 2.02132C0 2.37726 0.131816 2.67905 0.375466 2.93868L7.72289 10.4526C8.04508 10.7748 8.37838 10.9221 8.78134 10.9221Z' fill='black'/%3E%3C/svg%3E");
  --chevron-down-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.9142 10.9221'%3E%3Cpath d='M8.78134 10.9221C9.18075 10.919 9.52427 10.7685 9.83313 10.4526L17.1743 2.93202C17.4242 2.68216 17.5529 2.38036 17.5529 2.02132C17.5529 1.28371 16.9702 0.694339 16.2419 0.694339C15.8829 0.694339 15.5465 0.838577 15.2842 1.10352L8.34095 8.24382L9.2275 8.24382L2.27184 1.10352C2.01311 0.844787 1.67981 0.694339 1.31101 0.694339C0.579605 0.694339 0 1.28371 0 2.02132C0 2.37726 0.131816 2.67905 0.375466 2.93868L7.72289 10.4526C8.04508 10.7748 8.37838 10.9221 8.78134 10.9221Z' fill='white'/%3E%3C/svg%3E");
}

label,
input,
textarea,
select,
button {
  font: var(--subheadline);
  border-radius: var(--border-radius)
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="time"],
input[type="search"],
input[type="number"],
textarea {
  appearance: none;
  padding: 3px 3px 3px 12px;
  box-sizing: border-box;
  border: none;
  background-color: var(--ctrl-idle);
  /* :focus, not :focus-visible: text fields indicate focus however they got it */
  &:focus {
    position: relative;
    z-index: 1;
    outline: 2px solid light-dark(var(--black), var(--white));
    outline-offset: 2px;
  }
}

input[type="search"]::-webkit-search-cancel-button {
  opacity: 0;
}

input[type="search"]:focus {
  background-image: var(--xmark) ;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
}

label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
}

label:has(input[type="radio"]:disabled),
label:has(input[type="checkbox"]:disabled) {
  color: var(--ctrl-3-disabled);
}

input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  cursor: pointer;
  border-radius: var(--border-radius);
  background-color: var(--ctrl-idle);
  
  &:hover {
    background-color: var(--ctrl-hover);
  }
  
  &:disabled {
    background-color: var(--ctrl-disabled);
  }
}

input[type="checkbox"]:checked {
  background: var(--ctrl-tint);
  border: none;
  &:before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    mask: var(--checkmark) no-repeat center / contain;
    background-color: var(--white);
  }
}

input[type="checkbox"][switch] {
  border: none;
  width: 1.8rem;
  padding: 2px;
  justify-content: start;
  &:before {
    content: "";
    display: flex;
    mask: none;
    width: 0.65rem;
    height: 0.65rem;
    background-color: var(--white);
    border-radius: var(--border-radius);
  }
  
  &:checked {
    justify-content: end;
    background-color: var(--green);
  }
}


input[type="radio"] {
  border-radius: 50%;
  
  &:checked {
    background: var(--white);
    border: 5px solid var(--ctrl-tint);
  }
}

select {
  appearance: none;
  padding: 3px 18px 3px 12px;
  box-sizing: border-box;
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--ctrl-idle);
  background-image: var(--chevron-down-black) ;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
}

@media (prefers-color-scheme: dark) {
  select {
    background-image: var(--chevron-down-white);
  }
}

fieldset {
  border: none;
}

legend {
  padding: 0;
  margin-bottom: 1rem;
}

textarea {
  display: flex;
  min-height: 8em;
  resize: vertical;
}