@layer components {
  .tw-input-wrapper {
    height: 1.875rem;
    max-width: 320px;
    @apply tw-bg-sov-white tw-flex tw-flex-row tw-justify-center tw-items-center tw-space-x-4 tw-rounded-md;
    @apply tw-font-semibold tw-font-body tw-text-black;
    @apply tw-w-full;
  }

  .tw-input {
    @apply tw-w-full tw-bg-transparent tw-text-black tw-appearance-none focus:tw-outline-none;
    @apply tw-font-semibold tw-font-body tw-text-base;
    @apply tw-px-5;
    @apply tw-placeholder-black tw-placeholder-opacity-25;
  }

  .tw-input-label {
    @apply tw-text-sov-white;
  }
  .tw-input-append {
    @apply tw-text-black;
    /* @apply tw-mr-5 !important; */
  }
  .tw-input-prepend {
    @apply tw-text-black;
    @apply tw-ml-5 !important;
  }

  .tw-input-wrapper.readonly {
    @apply tw-bg-transparent tw-text-sov-white tw-border tw-border-gray-6 tw-rounded-lg;
  }
  .tw-input-wrapper.readonly .tw-input {
    @apply tw-text-sov-white;
  }
  .tw-input-wrapper.readonly .tw-input-append {
    @apply tw-text-sov-white;
  }
  .tw-input-wrapper.readonly .tw-input-prepend {
    @apply tw-text-white;
  }
}
