input[type="text"],
input[type="email"],
input[type="password"],
input[type="time"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="datetime-local"],
select,
textarea,
trix-editor {
  width: 100%;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  border: none;
  background-color: white;
  outline: solid 1px var(--border-primary);
  font-size: var(--rem-14);
  line-height: var(--rem-18);
  letter-spacing: 0;
  box-shadow: var(--shadow-neutral-xs);
  resize: none;
  color: var(--text-body);

  &::placeholder,
  &::-webkit-input-placeholder {
    color: var(--text-placeholder);
  }

  &:focus {
    outline: solid 1px var(--border-focus);
    box-shadow: var(--shadow-input);
  }

  &[data-error="true"] {
    outline: solid 1px var(--error-500);
  }

  &[disabled] {
    background-color: var(--surface-subtle);
    cursor: not-allowed;
    pointer-events: none;
    color: var(--text-disabled);
  }

  &[data-resize="true"] {
    resize: vertical;
  }
  
  &[data-size="xs"] {
    padding: .25rem .5rem;
    font-size: var(--rem-12);
    line-height: var(--rem-16);
  }
  
  &[data-size="sm"] {
    padding: .5rem .75rem;
    font-size: var(--rem-13);
    line-height: var(--rem-17);
  }
  
  &[data-size="md"] {
    padding: var(--rem-10) 1rem;
    font-size: var(--rem-14);
    line-height: var(--rem-18);
  }
  
  &[data-size="lg"] {
    padding: .75rem 1rem;
    font-size: var(--rem-15);
    line-height: var(--rem-19);
  }
}

textarea[name="task[action]"] {
  font-size: var(--rem-17);
  font-variation-settings: 'wght' var(--text-medium);
  outline: none;
  box-shadow: none;

  &:focus {
    outline: none;
    box-shadow: none;
  }

  &::placeholder,
  &::-webkit-input-placeholder {
    color: var(--text-placeholder);
  }
}

select > option {
  color: var(--text-bdy);
  &:disabled {
    color: var(--text-disabled);
  }
}

input[type="radio"] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  border: solid 1px var(--border-primary);
  cursor: pointer;
  position: relative;

  &:hover {
    border-color: var(--border-primary-hover);
  }

  &:disabled,
  &[data-disabled="true"] {
    cursor: not-allowed;
    background-color: var(--surface-subtle);
    border-color: var(--surface-disabled);
  }

  &:checked {
    background: var(--surface-action);
    border-color: var(--surface-action);

    /* I'm creating a custom check icon with this as I don't want to have to load in a background-image everytime */
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      background-color: white;
      border-radius: var(--radius-full);
    }
  }

  &:checked:hover {
    background: var(--surface-action-hover);
    border-color: var(--surface-action-hover);
  }

  &:checked:disabled,
  &:checked:disabled:hover {
    background: var(--surface-disabled);
    border-color: var(--surface-disabled);

    &::after {
      border-color: var(--surface-primary);
    }
  }
}

/* Checkbox — Exactly UI, node 1224:30945.
   Nine states across three statuses (unchecked / checked / indeterminate) and three
   interaction states (default / hover / disabled). Every value here is a token; the
   design's raw hexes are only in the comments so a token rename cannot silently drift
   the component away from the design.

   Styled on the native input rather than wrapped in markup, so `check_box_tag`,
   `form.check_box` and a hand-written input all pick it up and stay keyboard- and
   screen-reader-correct for free. The tick and dash are Font Awesome glyphs, matching
   the design's icon, drawn in ::after because an input cannot have children. */
input[type="checkbox"] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  border: solid 1px var(--border-primary); /* #DBE0E4 */
  background-color: var(--surface-primary);
  cursor: pointer;
  position: relative;

  /* The glyph, shared by checked and indeterminate. `content` is set per status below;
     an empty string here keeps the box from reserving space when neither applies.

     Centred by absolutely filling the box rather than by making the input a grid: callers
     hide these with `display: none` (see .order-list--check), and a `display` here would
     outrank that class and force them visible. */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 7 Pro";
    font-weight: 900; /* solid */
    font-size: 11px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  &:hover {
    border-color: var(--border-primary-hover); /* #CAD2D9 */
  }

  /* `indeterminate` is a DOM property with no HTML attribute, so it cannot be set by the
     server. The data attribute is what the server renders and what styles the box on
     first paint; checkbox_controller.js then sets the real property so assistive tech
     reports "mixed". Both selectors are listed so the two can never disagree visually. */
  &:indeterminate,
  &[data-indeterminate="true"] {
    background-color: var(--surface-action);
    border-color: var(--surface-action);

    &::after {
      content: "\f068"; /* fa-minus */
      color: var(--icon-on-action);
    }

    &:hover {
      background-color: var(--surface-action-hover);
      border-color: var(--surface-action-hover);
    }
  }

  &:checked {
    background-color: var(--surface-action); /* #279D8A */
    border-color: var(--surface-action);

    &::after {
      content: "\f00c"; /* fa-check */
      color: var(--icon-on-action);
    }

    &:hover {
      background-color: var(--surface-action-hover); /* #1B7D6F */
      border-color: var(--surface-action-hover);
    }
  }

  /* Disabled wins over every status above, so it comes last. */
  &:disabled,
  &[data-disabled="true"] {
    cursor: not-allowed;
    background-color: var(--surface-subtle); /* #F5F7F8 */
    border-color: var(--surface-disabled); /* #EEF1F3 */

    &:checked,
    &:indeterminate,
    &[data-indeterminate="true"] {
      background-color: var(--surface-disabled);
      border-color: var(--surface-disabled);

      &::after {
        color: var(--icon-disabled); /* #A9B3BC */
      }
    }
  }

  &:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
}

.inputs--search-with-suggestions {
  position: relative;
  width: 100%;
  padding: 1px;
}

.inputs--search-with-suggestions-input {
  &:disabled {
    cursor: not-allowed;
    opacity: 0.3;
  }
}

.inputs--custom-search {
  width: 100%;
  position: relative;
  padding-left: 2.25rem;
  padding-right: 1rem;
  padding-block: .5rem;
  border-radius: var(--input-radius);
  background-color: white;
  border: none;
  outline: solid 1px var(--neutral-200);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;


  &:has(input[type="search"]:focus) {
    outline: solid 1px var(--border-focus);
    box-shadow: 0 0 0 2px #D8F4E6;
  }

  input[type="search"] {
    outline: none;
    padding: 0;
    font-size: var(--rem-14);
    line-height: 1rem;
    box-shadow: none;
    padding-left: 1px;

    &:focus {
      outline: none;
      box-shadow: none
    }
  }

  &[data-size="sm"] > input[type="search"] {
    font-size: var(--rem-13);
    line-height: var(--rem-17);
  }
  
  &[data-size="xs"] {
    padding: .25rem .5rem .25rem var(--rem-28);
    font-size: var(--rem-12);
    line-height: var(--rem-16);
  }
  
  &[data-size="sm"] {
    padding: .5rem .75rem .5rem var(--rem-36);
    font-size: var(--rem-13);
    line-height: var(--rem-17);
  }
  
  &[data-size="md"] {
    min-height: 2.5rem;
    padding: var(--rem-10) 1rem var(--rem-10) var(--rem-44);
    font-size: var(--rem-14);
    line-height: var(--rem-18);
  }
  
  &[data-size="lg"] {
    padding: .75rem 1rem .75rem var(--rem-48);
    font-size: var(--rem-15);
    line-height: var(--rem-19);
  }
}

.inputs--custom-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputs--custom-search-icon[hidden] {
  display: none;
}

.inputs--custom-search-icon-loading .icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.inputs--toggle-label {
  color: var(--neutral-800);
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
}

.inputs--toggle-label-hint {
  color: var(--neutral-400);
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-light);
}

/* The slider toggle like iOS */
.inputs--custom-toggle {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 1.75rem;
  cursor: pointer;
  border-radius: 100vw;
  border: solid 2px transparent;
  background-color: var(--neutral-200);
  transition: background-color 0.2s ease-in-out, left 0.2s ease-in-out;
  outline: none;
  box-shadow: none;
  padding: 0;

  &.inputs--custom-toggle-active {
    background-color: var(--primary-500);
  }

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.2s ease-in-out;
  }

  &.inputs--custom-toggle-active::before {
    left: calc(100% - 1px - 1.25rem);
  }
}

.inputs--required-asterisk {
  color: var(--error-600);
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
}

input.inputs--no-outline,
select.inputs--no-outline,
textarea.inputs--no-outline {
  border: none;
  outline: none;
  box-shadow: none;

  &:focus {
    outline: none;
    box-shadow: none;
  }
}


.inputs--custom-date-input,
.task--form-actions-container > input.inputs--custom-date-input {
  width: 0;
  height: 0;
  opacity: 0;
  padding: unset;
  padding-inline: unset;
  position: absolute;
  top: .5rem;
  z-index: -1;
}

trix-toolbar {
  display: none;
}

trix-editor > * {
  font-size: var(--rem-14);
  line-height: 1rem;
  letter-spacing: 0;
  color: var(--neutral-800);
}

trix-editor::before {
  color: var(--neutral-300) !important;
}

.input-character-counter {
  font-size: var(--rem-12);
  color: var(--text-placeholder);

  &[data-over-limit="true"] {
    color: var(--error-600);
  }
}

label:has(input[type="checkbox"]) {
  font-size: var(--rem-14);
  line-height: var(--rem-18);
  letter-spacing: 0;
  color: var(--text-body);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  cursor: pointer;
}

/* A fixed "$" inside the left edge of an amount field, so people type only the number. */
.inputs--currency {
  position: relative;
  width: 100%;

  .inputs--currency-symbol {
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    color: var(--text-placeholder);
    font-size: var(--rem-14);
    pointer-events: none;
  }

  input {
    padding-left: 1.5rem;
  }
}