.c-field__input {
  @apply border-grey-400;
  @apply bg-white;
  @apply text-grey-900;

  @apply placeholder:opacity-100;
  @apply placeholder:text-grey-600;

  @apply hover:border-blue-700;

  @apply focus-visible:shadow-outline;
  @apply focus-visible:border-blue-700;

  @apply [&:not(select)]:[&:not([type="color"])]:[&:not([type="file"])]:read-only:bg-grey-700/8;

  @apply disabled:border-grey-300 !important;
  @apply disabled:bg-grey-700/8 !important;
  @apply disabled:text-grey-600 !important;
}

.c-field__input::-webkit-datetime-edit {
  @apply text-grey-600;
}

.c-field__input::-webkit-calendar-picker-indicator {
  background-image: svg-load('16/chevron-down-stroke.svg', color: theme(colors.grey.700));

  @apply focus-visible:shadow-outline;
}

.c-field__input--select {
  @apply opacity-100;
  background-image: svg-load('16/chevron-down-stroke.svg', color: theme(colors.grey.700));
}

.c-field__input--select:hover {
  background-image: svg-load('16/chevron-down-stroke.svg', color: theme(colors.grey.800));
}

.c-field--success .c-field__input {
  @apply border-green-700;

  @apply focus-visible:shadow-[0_0_0_1px_theme(colors.white),0_0_0_3px_theme(colors.green.700)];
}

.c-field--warning .c-field__input {
  @apply border-yellow-700;

  @apply focus-visible:shadow-[0_0_0_1px_theme(colors.white),0_0_0_3px_theme(colors.yellow.700)];
}

.c-field--error .c-field__input {
  @apply border-red-700;

  @apply focus-visible:shadow-[0_0_0_1px_theme(colors.white),0_0_0_3px_theme(colors.red.700)];
}

.c-field--dark {
  .c-field__input {
    @apply border-grey-700;
    @apply bg-grey-1100;
    @apply text-grey-300;

    @apply placeholder:text-grey-700;

    @apply hover:border-blue-600;

    @apply focus-visible:shadow-outline-dark;
    @apply focus-visible:border-blue-600;

    @apply [&:not(select)]:[&:not([type="color"])]:[&:not([type="file"])]:read-only:bg-grey-500/8;

    @apply disabled:border-grey-800 !important;
    @apply disabled:bg-white/8 !important;
    @apply disabled:text-grey-700 !important;
  }

  .c-field__input::-webkit-datetime-edit {
    @apply text-grey-700;
  }

  .c-field__input::-webkit-calendar-picker-indicator {
    background-image: svg-load('16/chevron-down-stroke.svg', color: theme(colors.grey.500));

    @apply focus-visible:shadow-outline-dark;
  }

  .c-field__input--select {
    @apply opacity-100;
    background-image: svg-load('16/chevron-down-stroke.svg', color: theme(colors.grey.500));
  }

  .c-field__input--select:hover {
    background-image: svg-load('16/chevron-down-stroke.svg', color: theme(colors.grey.400));
  }
}

.c-field--dark.c-field--success .c-field__input {
  @apply border-green-600;

  @apply focus-visible:shadow-[0_0_0_1px_theme(colors.white),0_0_0_3px_theme(colors.green.600)];
}

.c-field--dark.c-field--warning .c-field__input {
  @apply border-yellow-600;

  @apply focus-visible:shadow-[0_0_0_1px_theme(colors.white),0_0_0_3px_theme(colors.yellow.600)];
}

.c-field--dark.c-field--error .c-field__input {
  @apply border-red-700;

  @apply focus-visible:shadow-[0_0_0_1px_theme(colors.white),0_0_0_3px_theme(colors.red.600)];
}