.c-field__label {
  @apply text-grey-900;
}

.c-field__hint,
.c-field__message {
  @apply text-grey-700;
}

.c-field--success .c-field__message {
  background-image: svg-load('16/check-circle-stroke.svg', color: theme(colors.green.700));
  @apply text-green-700;
}

.c-field--warning .c-field__message {
  background-image: svg-load('16/alert-warning-stroke.svg', color: theme(colors.yellow.700));
  @apply text-yellow-700;
}

.c-field--error .c-field__message {
  background-image: svg-load('16/alert-error-stroke.svg', color: theme(colors.red.700));
  @apply text-red-700;
}

.c-field--dark {
  .c-field__label {
    @apply text-grey-300;
  }

  .c-field__hint,
  .c-field__message {
    @apply text-grey-500;
  }
}

.c-field--dark.c-field--success .c-field__message {
  background-image: svg-load('16/check-circle-stroke.svg', color: theme(colors.green.400));
  @apply text-green-400;
}

.c-field--dark.c-field--warning .c-field__message {
  background-image: svg-load('16/alert-warning-stroke.svg', color: theme(colors.yellow.400));
  @apply text-yellow-400;
}

.c-field--dark.c-field--error .c-field__message {
  background-image: svg-load('16/alert-error-stroke.svg', color: theme(colors.red.400));
  @apply text-red-400;
}