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;
  caret-color: var(--primary-500);
  caret-shape: block;
  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;
  }

  &[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);
    }
  }
}

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);
  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: 4px;
      top: 1.5px;
      width: 4px;
      height: 8px;
      border: solid white;
      border-width: 0 1px 1px 0;
      transform: rotate(45deg);
    }
  }

  &: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(--icon-disabled);
    }
  }
}

.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;

  svg,
  span.icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
  }

  &: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"] {
    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--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;
}

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;
}