input,
textarea {
  /* prevents ligature swaps as the user is typing */
  font-variant-ligatures: none;
}

.form-input,
.form-select {
  @apply block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md appearance-none sm:text-sm shadow-none text-gray-700;

  &:focus-visible {
    @apply iv-field-focus;
  }
  &[disabled] {
    @apply bg-gray-50 text-gray-600 text-fill-gray-600;
  }
}

.has-error .form-input,
.has-error .form-select:not(.iv-rte-select) {
  @apply border-amber-500 bg-amber-50 placeholder:text-[#d7c08c];

  &:focus {
    @apply iv-field-focus--error;
  }
}

.form-label {
  @apply block mb-1 text-sm font-medium text-gray-700;
}

.form-group-label {
  @apply block mb-0 text-lg font-medium text-gray-900 border-b border-gray-200 pb-1 tracking-[-0.01em];
}

select:disabled {
  @apply opacity-100;
}

.form-select {
  @apply pr-10 bg-white bg-no-repeat cursor-pointer disabled:cursor-not-allowed disabled:opacity-50;
  print-color-adjust: exact;
  background-position: right 0.5em center;
  background-size: 1.5em 1.5em;
  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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

input[type='checkbox'],
input[type='radio'] {
  @apply flex-shrink-0 inline-block w-4 h-4 p-0 align-middle bg-white border border-gray-300 appearance-none cursor-pointer select-none text-primary-600;
  print-color-adjust: exact;
  background-origin: border-box;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
  @apply ring-2 ring-offset-0 outline-0 outline-primary-500 border-primary-500;

  &.no-ring {
    @apply outline-0 ring-offset-0 ring-0;
  }
}

label:hover input[type='checkbox']:not(:focus):not(:checked):not(:disabled),
label:hover input[type='radio']:not(:focus):not(:checked):not(:disabled) {
  @apply border-gray-400;
}

input[type='checkbox'] {
  @apply rounded;
}
input[type='radio'] {
  @apply rounded-full;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  @apply bg-center bg-no-repeat border-transparent bg-primary-500;
  background-size: 100% 100%;
}

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

input[type='checkbox'].indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8H11' stroke='%235f636d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

input[type='checkbox']:disabled,
input[type='radio']:disabled {
  @apply opacity-50 cursor-not-allowed;
}

input[type='checkbox']:checked:disabled {
  @apply bg-primary-200 border-primary-200;
  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");
}

input[type='radio']:checked:disabled {
  @apply bg-primary-200 border-primary-200;
  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");
}

.input-group--previous input[type='checkbox']:checked {
  @apply bg-gray-500 border-gray-500;
}

.iv-select-container .iv-select__control--is-disabled {
  @apply bg-gray-50;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type='range'] {
  @apply h-2 bg-gray-200 rounded-full bg-gradient-to-r from-primary-400 to-primary-400 focus:outline-none disabled:cursor-not-allowed;
  -webkit-appearance: none;
  background-size: 0% 100%;
  background-repeat: no-repeat;

  &:disabled {
    @apply opacity-50 from-gray-400 to-gray-400;
  }

  /* webkit styles must be by themselves, otherwise chrome doesn't pick them up */
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    @apply w-4 h-4 bg-white rounded-full border border-transparent cursor-grab;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  &::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    @apply shadow-none border-0 bg-transparent;
  }
  &:active::-webkit-slider-thumb {
    @apply cursor-grabbing bg-gray-200;
  }
  &:focus::-webkit-slider-thumb {
    box-shadow: inset 0 0 0 1px #1d4fc5, 0 0 0 2px #9db6f1;
  }
  &:disabled::-webkit-slider-thumb {
    @apply bg-gray-50 cursor-not-allowed;
  }

  /* Firefox */
  &::-moz-range-thumb {
    @apply w-4 h-4 bg-white rounded-full border border-transparent cursor-grab outline-0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  &::-moz-range-track {
    @apply shadow-none border-0 bg-transparent;
  }
  &:active::-moz-range-thumb {
    @apply cursor-grabbing bg-gray-200;
  }
  &:focus::-moz-range-thumb {
    box-shadow: inset 0 0 0 1px #1d4fc5, 0 0 0 2px #9db6f1;
  }
  &:disabled::-moz-range-thumb {
    @apply bg-gray-50 cursor-not-allowed;
  }

  /* IE */
  &::-ms-thumb {
    @apply w-4 h-4 bg-white rounded-full border border-transparent cursor-grab;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.2);
  }
  &::-ms-track {
    @apply shadow-none border-0 bg-transparent;
  }
  &:active::-ms-thumb {
    @apply cursor-grabbing bg-gray-200;
  }
  &:focus::-ms-thumb {
    box-shadow: inset 0 0 0 1px #1d4fc5, 0 0 0 2px #9db6f1;
  }
  &:disabled::-ms-thumb {
    @apply bg-gray-50 cursor-not-allowed;
  }

  & + div > input[inputmode='numeric']:disabled,
  & + div > input[inputmode='decimal']:disabled {
    -webkit-text-fill-color: #6b7280;
  }
}