@layer components {
  .sci-input-container-v2 {
    @apply relative h-[2.75rem] flex items-center;
  }

  .sci-input-container-v2.input-sm {
    @apply h-[2.25rem] bg-transparent p-0.5 outline-none;
  }

  .sci-input-container-v2 input {
    @apply w-full h-full bg-transparent p-0.5 border rounded outline-none absolute top-0 pl-2;
    border-color: var(--sn-sleepy-grey);
  }

  .sci-input-container-v2 input::placeholder {
    color: var(--sn-sleepy-grey);
  }

  .sci-input-container-v2 .sci-input-field-v2 {
    @apply h-[2.25rem];
  }

  .sci-input-container-v2 .error {
    border-color: var(--sn-coral) !important;
  }

  .sci-input-container-v2 input:focus {
    border-color: var(--sn-sleepy-grey);
    box-shadow: none;
  }

  .sci-input-container-v2 .sn-icon {
    @apply m-2;
    color: var(--sn-black)
  }

  .sci-input-container-v2.right-icon .sn-icon {
    @apply absolute right-0;
  }

  .sci-input-container-v2.left-icon input {
    @apply pl-10;
  }

  .sci-input-container-v2.right-icon input {
    @apply pr-10;
  }

  .sci-input-container-v2.left-icon input {
    @apply pl-10;
  }

  .sci-input-container-v2.textarea-lg {
    @apply h-[9rem];
  }

  .sci-input-container-v2 textarea {
    @apply w-full h-full bg-transparent px-2 border rounded outline-none absolute top-0;
    border-color: var(--sn-sleepy-grey);
  }

  .sci-input-container-v2 textarea::placeholder {
    color: var(--sn-sleepy-grey);
  }

  .sci-input-container-v2 textarea:focus {
    border-color: var(--sn-science-blue);
  }
}