@layer base {
  /* Default border colour is gray-200, so existing borders stay the same colour. */
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }

  html,
  body {
    overscroll-behavior: none;
  }

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    cursor: pointer;
  }

  button:disabled,
  [type="button"]:disabled,
  [type="reset"]:disabled,
  [type="submit"]:disabled {
    cursor: not-allowed;
  }

  :is(a, button, input, textarea, select, .btn) {
    transition: 100ms ease-out;
    transition-property: background-color, border-color, box-shadow, outline, outline-offset;
    touch-action: manipulation;

    &:where(:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  /*
    Mobile Safari zoom fix: Safari zooms when an input's font-size is under
    16px. max() keeps inputs at least 16px while allowing larger sizes.
  */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }

  [type="text"],
  input:where(:not([type])),
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  [multiple],
  textarea,
  select {
    appearance: none;
    background-color: #fff;
    border-width: 1px;
    border-color: var(--color-gray-500);
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  :is([type="text"],
  input:where(:not([type])),
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  [multiple],
  textarea,
  select):focus {
    --focus-ring-offset: -1px;
    border-color: var(--focus-ring-color);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-gray-500);
    opacity: 1;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
    padding-top: 0;
    padding-bottom: 0;
  }

  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
  }

  select {
    print-color-adjust: exact;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

  [multiple],
  [size]:where(select:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    print-color-adjust: unset;
    padding-right: 0.75rem;
  }

  [type="checkbox"],
  [type="radio"] {
    appearance: none;
    print-color-adjust: exact;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    color: var(--color-blue-600);
    background-color: #fff;
    background-origin: border-box;
    border-width: 1px;
    border-color: var(--color-gray-500);
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    padding: 0;
    display: inline-block;
  }

  [type="checkbox"] {
    border-radius: 0;
  }

  [type="radio"] {
    border-radius: 100%;
  }

  [type="checkbox"]:focus,
  [type="radio"]:focus {
    --focus-ring-offset: 2px;
  }

  [type="checkbox"]:checked,
  [type="radio"]:checked {
    background-color: currentColor;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-color: transparent;
  }

  [type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  [type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  @media (forced-colors: active) {
    [type="checkbox"]:checked,
    [type="radio"]:checked,
    [type="checkbox"]:indeterminate {
      appearance: auto;
    }
  }

  [type="checkbox"]:checked:hover,
  [type="checkbox"]:checked:focus,
  [type="radio"]:checked:hover,
  [type="radio"]:checked:focus {
    background-color: currentColor;
    border-color: transparent;
  }

  [type="checkbox"]:indeterminate {
    background-color: currentColor;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-color: transparent;
  }

  [type="checkbox"]:indeterminate:hover,
  [type="checkbox"]:indeterminate:focus {
    background-color: currentColor;
    border-color: transparent;
  }

  [type="file"] {
    background: unset;
    border-color: inherit;
    font-size: unset;
    line-height: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
  }

  [type="file"]:focus {
    outline: 1px solid buttontext;
    outline: 1px auto -webkit-focus-ring-color;
  }
}