:is(
  button,
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  select
) {
  cursor: pointer;
}

:is(
  input,
  label,
  select
) {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

form {
  display: flex;
  flex-direction: column;
  gap: var(--space--large);
}

fieldset > *:not(:last-child) {
 margin-bottom: var(--space--base);
}

:is(
  input,
  textarea,
  select
) {
  accent-color: var(--color--primary-base);
  border: var(--border--light);
  
  &:focus {
    outline: var(--border-width--base) solid var(--color--primary-base);
  }

  &[readonly] {
    border-color: transparent;
    padding-left: 0;
    padding-top: 0;

    &:focus {
      padding-left: var(--space--small);
      padding-top: var(--space--small);
    }
  }
}

:where(
  input:not([type]),
  select,
  textarea,
  [type="color"],
  [type="date"],
  [type="datetime"],
  [type="datetime-local"],
  [type="email"],
  [type="month"],
  [type="month"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="time"],
  [type="url"],
  [type="week"]
) {
  background-color: var(--color--background-base);
  border-radius: var(--border-radius--base);
  color: var(--color--text);
  padding: var(--space--small);
}

label:has(
    input:not([type]),
    select,
    textarea,
    [type="color"],
    [type="date"],
    [type="datetime"],
    [type="datetime-local"],
    [type="email"],
    [type="month"],
    [type="number"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="text"],
    [type="time"],
    [type="url"],
    [type="week"]
  ) {
  display: flex;
  flex-direction: column;
  gap: var(--space--x-small);
}

label:has([type="radio"], [type="checkbox"]) {
  align-items: center;
  display: flex;
  gap: var(--space--x-small);
  justify-self: start;
}

label:has(
  input[required],
  select[required],
  textarea[required]
) > span::after,
.fieldset-required > legend::after {
  content: "*";
  margin-left: var(--space--xx-small);
}

textarea {
  resize: vertical;
}

:where(select) {
  appearance: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" fill="none"><path fill="%2332314C" fill-rule="evenodd" d="M.65.63A.875.875 0 0 1 1.885.602L4.828 3.42 7.77.603a.875.875 0 1 1 1.21 1.264l-3.374 3.23a1.125 1.125 0 0 1-1.556 0L.676 1.868A.875.875 0 0 1 .649.629Z" clip-rule="evenodd"/></svg>');
  background-position: calc(100% - var(--space--small)) center;
  background-repeat: no-repeat;
  background-size: var(--space--small);
}

:where([type="search"])::-webkit-search-cancel-button {
  appearance: none;
  background-image: url('data:image/svg+xml,<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.01629 5.99568L9.79098 2.22099C9.86057 2.15553 9.9163 2.07677 9.95487 1.98937C9.99345 1.90197 10.0141 1.80772 10.0155 1.71219C10.017 1.61667 9.99927 1.52183 9.96338 1.43329C9.9275 1.34475 9.8742 1.26432 9.80665 1.19677C9.7391 1.12922 9.65867 1.07592 9.57013 1.04003C9.48159 1.00415 9.38675 0.986415 9.29122 0.987876C9.1957 0.989338 9.10144 1.00997 9.01405 1.04854C8.92665 1.08712 8.84788 1.14285 8.78243 1.21244L5.00774 4.98713L1.23305 1.21244C1.09931 1.0787 0.917915 1.00356 0.728776 1.00356C0.539636 1.00356 0.358244 1.0787 0.224502 1.21244C0.0907603 1.34618 0.015625 1.52758 0.015625 1.71671C0.015625 1.90585 0.0907603 2.08725 0.224502 2.22099L3.99919 5.99568L0.224502 9.77037C0.0907603 9.90411 0.015625 10.0855 0.015625 10.2746C0.015625 10.4638 0.0907603 10.6452 0.224502 10.7789C0.358244 10.9127 0.539636 10.9878 0.728776 10.9878C0.917915 10.9878 1.09931 10.9127 1.23305 10.7789L5.00774 7.00423L8.78243 10.7789C8.91617 10.9127 9.09756 10.9878 9.2867 10.9878C9.47584 10.9878 9.65724 10.9127 9.79098 10.7789C9.92472 10.6452 9.99985 10.4638 9.99985 10.2746C9.99985 10.0855 9.92472 9.90411 9.79098 9.77037L6.01629 5.99568Z" fill="%2332314C"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: var(--space--small);
  width: var(--space--small);
}

:where(input[type="range"]) {
  appearance: none;
  background-color: var(--color--background-base);
  border: 0;
  border-radius: var(--border-radius--base);
  height: var(--border-width--thick);
  width: 100%;

  &:focus {
    background-color: var(--color--primary-base);
    outline: none;
  }
}

label:has(input[type="range"]) {
  gap: var(--space--base);
}

[type="range"]::-webkit-slider-thumb {
  --size: var(--space--large);
  
  appearance: none;
  background-color: var(--color--background-base);
  background-image: url('data:image/svg+xml,<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.65812 9C4.43757 8.99995 4.22607 8.90521 4.07014 8.73662L0.743499 5.14104C0.587587 4.97247 0.5 4.74388 0.5 4.50552C0.5 4.26717 0.587587 4.03857 0.743499 3.87L4.07014 0.274422C4.14686 0.188569 4.23862 0.120089 4.34009 0.0729785C4.44156 0.0258683 4.55069 0.0010711 4.66111 3.39396e-05C4.77154 -0.00100322 4.88105 0.0217402 4.98326 0.0669374C5.08547 0.112135 5.17833 0.17888 5.25641 0.26328C5.3345 0.34768 5.39625 0.448043 5.43807 0.558514C5.47988 0.668985 5.50093 0.787352 5.49997 0.906706C5.49901 1.02606 5.47607 1.14401 5.43248 1.25368C5.38889 1.36335 5.32554 1.46254 5.2461 1.54546L2.50745 4.50552L5.2461 7.46559C5.36238 7.5913 5.44156 7.75145 5.47363 7.92579C5.50571 8.10014 5.48924 8.28084 5.42631 8.44507C5.36337 8.6093 5.25681 8.74967 5.12007 8.84845C4.98334 8.94722 4.82258 8.99996 4.65812 9Z" fill="%2332314C"/><path d="M11.3419 9C11.1774 8.99996 11.0167 8.94722 10.8799 8.84845C10.7432 8.74967 10.6366 8.6093 10.5737 8.44507C10.5108 8.28084 10.4943 8.10014 10.5264 7.92579C10.5584 7.75145 10.6376 7.5913 10.7539 7.46559L13.4926 4.50552L10.7539 1.54546C10.6745 1.46254 10.6111 1.36335 10.5675 1.25368C10.5239 1.14401 10.501 1.02606 10.5 0.906706C10.4991 0.787352 10.5201 0.668985 10.5619 0.558514C10.6037 0.448043 10.6655 0.34768 10.7436 0.26328C10.8217 0.17888 10.9145 0.112135 11.0167 0.0669374C11.1189 0.0217402 11.2285 -0.00100322 11.3389 3.39396e-05C11.4493 0.0010711 11.5584 0.0258683 11.6599 0.0729785C11.7614 0.120089 11.8531 0.188569 11.9299 0.274422L15.2565 3.87C15.4124 4.03857 15.5 4.26717 15.5 4.50552C15.5 4.74388 15.4124 4.97247 15.2565 5.14104L11.9299 8.73662C11.7739 8.90521 11.5624 8.99995 11.3419 9Z" fill="%2332314C"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  border: var(--border--base);
  border-radius: var(--border-radius--circle);
  height: var(--size);
  width: var(--size);
}

[type="range"]::-moz-range-thumb {
  --size: var(--space--large);

  background-color: var(--color--background-base);
  background-image: url('data:image/svg+xml,<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.65812 9C4.43757 8.99995 4.22607 8.90521 4.07014 8.73662L0.743499 5.14104C0.587587 4.97247 0.5 4.74388 0.5 4.50552C0.5 4.26717 0.587587 4.03857 0.743499 3.87L4.07014 0.274422C4.14686 0.188569 4.23862 0.120089 4.34009 0.0729785C4.44156 0.0258683 4.55069 0.0010711 4.66111 3.39396e-05C4.77154 -0.00100322 4.88105 0.0217402 4.98326 0.0669374C5.08547 0.112135 5.17833 0.17888 5.25641 0.26328C5.3345 0.34768 5.39625 0.448043 5.43807 0.558514C5.47988 0.668985 5.50093 0.787352 5.49997 0.906706C5.49901 1.02606 5.47607 1.14401 5.43248 1.25368C5.38889 1.36335 5.32554 1.46254 5.2461 1.54546L2.50745 4.50552L5.2461 7.46559C5.36238 7.5913 5.44156 7.75145 5.47363 7.92579C5.50571 8.10014 5.48924 8.28084 5.42631 8.44507C5.36337 8.6093 5.25681 8.74967 5.12007 8.84845C4.98334 8.94722 4.82258 8.99996 4.65812 9Z" fill="%2332314C"/><path d="M11.3419 9C11.1774 8.99996 11.0167 8.94722 10.8799 8.84845C10.7432 8.74967 10.6366 8.6093 10.5737 8.44507C10.5108 8.28084 10.4943 8.10014 10.5264 7.92579C10.5584 7.75145 10.6376 7.5913 10.7539 7.46559L13.4926 4.50552L10.7539 1.54546C10.6745 1.46254 10.6111 1.36335 10.5675 1.25368C10.5239 1.14401 10.501 1.02606 10.5 0.906706C10.4991 0.787352 10.5201 0.668985 10.5619 0.558514C10.6037 0.448043 10.6655 0.34768 10.7436 0.26328C10.8217 0.17888 10.9145 0.112135 11.0167 0.0669374C11.1189 0.0217402 11.2285 -0.00100322 11.3389 3.39396e-05C11.4493 0.0010711 11.5584 0.0258683 11.6599 0.0729785C11.7614 0.120089 11.8531 0.188569 11.9299 0.274422L15.2565 3.87C15.4124 4.03857 15.5 4.26717 15.5 4.50552C15.5 4.74388 15.4124 4.97247 15.2565 5.14104L11.9299 8.73662C11.7739 8.90521 11.5624 8.99995 11.3419 9Z" fill="%2332314C"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  border: var(--border--base);
  border-radius: var(--border-radius--circle);
  height: var(--size);
  width: var(--size);
}

[type="range"]:is(:active, :focus)::-webkit-slider-thumb {
  background-color: var(--color--primary-base);
  background-image: url('data:image/svg+xml,<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.65812 9C4.43757 8.99995 4.22607 8.90521 4.07014 8.73662L0.743499 5.14104C0.587587 4.97247 0.5 4.74388 0.5 4.50552C0.5 4.26717 0.587587 4.03857 0.743499 3.87L4.07014 0.274422C4.14686 0.188569 4.23862 0.120089 4.34009 0.0729785C4.44156 0.0258683 4.55069 0.0010711 4.66111 3.39396e-05C4.77154 -0.00100322 4.88105 0.0217402 4.98326 0.0669374C5.08547 0.112135 5.17833 0.17888 5.25641 0.26328C5.3345 0.34768 5.39625 0.448043 5.43807 0.558514C5.47988 0.668985 5.50093 0.787352 5.49997 0.906706C5.49901 1.02606 5.47607 1.14401 5.43248 1.25368C5.38889 1.36335 5.32554 1.46254 5.2461 1.54546L2.50745 4.50552L5.2461 7.46559C5.36238 7.5913 5.44156 7.75145 5.47363 7.92579C5.50571 8.10014 5.48924 8.28084 5.42631 8.44507C5.36337 8.6093 5.25681 8.74967 5.12007 8.84845C4.98334 8.94722 4.82258 8.99996 4.65812 9Z" fill="%23FFFFFF"/><path d="M11.3419 9C11.1774 8.99996 11.0167 8.94722 10.8799 8.84845C10.7432 8.74967 10.6366 8.6093 10.5737 8.44507C10.5108 8.28084 10.4943 8.10014 10.5264 7.92579C10.5584 7.75145 10.6376 7.5913 10.7539 7.46559L13.4926 4.50552L10.7539 1.54546C10.6745 1.46254 10.6111 1.36335 10.5675 1.25368C10.5239 1.14401 10.501 1.02606 10.5 0.906706C10.4991 0.787352 10.5201 0.668985 10.5619 0.558514C10.6037 0.448043 10.6655 0.34768 10.7436 0.26328C10.8217 0.17888 10.9145 0.112135 11.0167 0.0669374C11.1189 0.0217402 11.2285 -0.00100322 11.3389 3.39396e-05C11.4493 0.0010711 11.5584 0.0258683 11.6599 0.0729785C11.7614 0.120089 11.8531 0.188569 11.9299 0.274422L15.2565 3.87C15.4124 4.03857 15.5 4.26717 15.5 4.50552C15.5 4.74388 15.4124 4.97247 15.2565 5.14104L11.9299 8.73662C11.7739 8.90521 11.5624 8.99995 11.3419 9Z" fill="%23FFFFFF"/></svg>');
}

[type="range"]:is(:active, :focus)::-moz-range-thumb {
  background-color: var(--color--primary-base);
  background-image: url('data:image/svg+xml,<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.65812 9C4.43757 8.99995 4.22607 8.90521 4.07014 8.73662L0.743499 5.14104C0.587587 4.97247 0.5 4.74388 0.5 4.50552C0.5 4.26717 0.587587 4.03857 0.743499 3.87L4.07014 0.274422C4.14686 0.188569 4.23862 0.120089 4.34009 0.0729785C4.44156 0.0258683 4.55069 0.0010711 4.66111 3.39396e-05C4.77154 -0.00100322 4.88105 0.0217402 4.98326 0.0669374C5.08547 0.112135 5.17833 0.17888 5.25641 0.26328C5.3345 0.34768 5.39625 0.448043 5.43807 0.558514C5.47988 0.668985 5.50093 0.787352 5.49997 0.906706C5.49901 1.02606 5.47607 1.14401 5.43248 1.25368C5.38889 1.36335 5.32554 1.46254 5.2461 1.54546L2.50745 4.50552L5.2461 7.46559C5.36238 7.5913 5.44156 7.75145 5.47363 7.92579C5.50571 8.10014 5.48924 8.28084 5.42631 8.44507C5.36337 8.6093 5.25681 8.74967 5.12007 8.84845C4.98334 8.94722 4.82258 8.99996 4.65812 9Z" fill="%23FFFFFF"/><path d="M11.3419 9C11.1774 8.99996 11.0167 8.94722 10.8799 8.84845C10.7432 8.74967 10.6366 8.6093 10.5737 8.44507C10.5108 8.28084 10.4943 8.10014 10.5264 7.92579C10.5584 7.75145 10.6376 7.5913 10.7539 7.46559L13.4926 4.50552L10.7539 1.54546C10.6745 1.46254 10.6111 1.36335 10.5675 1.25368C10.5239 1.14401 10.501 1.02606 10.5 0.906706C10.4991 0.787352 10.5201 0.668985 10.5619 0.558514C10.6037 0.448043 10.6655 0.34768 10.7436 0.26328C10.8217 0.17888 10.9145 0.112135 11.0167 0.0669374C11.1189 0.0217402 11.2285 -0.00100322 11.3389 3.39396e-05C11.4493 0.0010711 11.5584 0.0258683 11.6599 0.0729785C11.7614 0.120089 11.8531 0.188569 11.9299 0.274422L15.2565 3.87C15.4124 4.03857 15.5 4.26717 15.5 4.50552C15.5 4.74388 15.4124 4.97247 15.2565 5.14104L11.9299 8.73662C11.7739 8.90521 11.5624 8.99995 11.3419 9Z" fill="%23FFFFFF"/></svg>');
}