.c-input-with-label {
  @apply relative block rounded border border-solid border-transparent p-3;

  &-input-wrap {
    @apply mt-1 flex;
  }

  &-input {
    @apply flex-1 overflow-hidden text-ellipsis text-base font-medium;
  }

  &-append {
    @apply -mr-3 flex flex-shrink-0 items-center px-3;
  }

  &-elevated {
    @apply bg-elevate shadow;
  }

  &.c-input-with-label--error {
    @apply text-pink-700-200;
  }

  &.c-input-with-label--warning {
    @apply text-orange-200-700;
  }

  &-error {
    @apply !mt-1 text-xs text-error;
  }

  &-sm {
    @apply text-sm;
  }

  &-lg {
    @apply text-lg;
  }
}
