prenix_components

@layer components {
  .input {
    @apply w-full;
  }

  .input-wrapper--sm {
    @apply py-2 px-3 min-h-[2rem] rounded-[8px];
  }

  .input-wrapper--md {
    @apply py-3 px-3 min-h-[2.5rem] rounded-[10px];
  }

  .input-wrapper--lg {
    @apply py-3.5 px-3 min-h-[3rem] rounded-[12px];
  }

  .input--sm {
    --input-label-translate: calc(calc(50% + 0.75rem / 2 - 8px) * -1);
    @apply text-sm;
  }

  .input--md {
    --input-label-translate: calc(calc(50% + 0.875rem / 2 - 10px) * -1);
    @apply text-sm;
  }

  .input--lg {
    --input-label-translate: calc(calc(50% + 0.875rem / 2 - 8px) * -1);
    @apply text-base;
  }

  .input-wrapper {
    @apply relative w-full inline-flex tap-highlight-transparent;
    @apply outline-none shadow-small;
    @apply flex-col items-start justify-center gap-0 cursor-text;
    @apply transition-colors motion-reduce:transition-none;
    @apply border-2 border-default/50;
    @apply hover:border-default;
  }

  .input-content {
    @apply flex items-center justify-center;
  }

  .input[data-js-focus='true'] .input-wrapper {
    @apply border-foreground;
  }

  .input-el-wrapper {
    @apply inline-flex w-full items-center h-full box-border relative gap-1.5;
  }

  .input-label {
    @apply subpixel-antialiased text-neutral2-foreground;
    @apply pe-2 max-w-full inline-flex items-center gap-1;
  }

  .input[data-js-focus='true'] .input-label {
    @apply text-foreground;
  }

  .input-el {
    @apply w-full font-normal bg-transparent outline-none placeholder:text-neutral1-foreground;
    @apply text-foreground focus-visible:outline-none;
  }

  .input-helper {
    @apply p-1 text-xs text-neutral2-foreground;
    @apply flex items-center gap-1;
  }

  .input-wrapper--invalid {
    @apply border-danger hover:border-danger;
  }

  .input[data-js-focus='true'] .input-wrapper--invalid {
    @apply border-danger;
  }

  .input[data-js-focus='true'] .input-label--invalid {
    @apply text-danger;
  }

  .input-label--invalid {
    @apply text-danger;
  }

  .input-helper--invalid {
    @apply text-danger;
  }

  .input-wrapper--disabled {
    @apply pointer-events-none opacity-disabled;
  }

  .input-label--inside {
    @apply absolute justify-center text-ellipsis overflow-hidden pointer-events-none;
    @apply origin-top-left will-change-auto !duration-200 !ease-out;
    @apply motion-reduce:transition-none transition-[transform,color,left,opacity];
  }

  .input[data-js-focus='true'] .input-label--inside,
  .input[data-js-has-placeholder='true'] .input-label--inside,
  .input[data-js-has-value='true'] .input-label--inside {
    @apply scale-[0.85] translate-y-[--input-label-translate];
  }

  .input[data-js-has-label='true'] .input-el-wrapper--inside {
    @apply items-end;
  }

  .input-wrapper--inside-sm {
    @apply py-1.5 h-12;
  }

  .input-wrapper--inside-md {
    @apply py-2 h-14;
  }

  .input-wrapper--inside-lg {
    @apply py-2.5 h-16;
  }

  .input--outside {
    @apply flex flex-col;
  }

  .input-label--outside {
    @apply mb-1;
  }

  .input--outside-left {
    @apply flex flex-row gap-2;
  }

  .input-label--outside-left {
    @apply shrink self-start;
  }

  .input-label--outside-left-sm {
    @apply mt-3;
  }

  .input-label--outside-left-md {
    @apply mt-3.5;
  }

  .input-label--outside-left-lg {
    @apply mt-4;
  }

  .input-wrapper--outside-left {
    @apply grow;
  }

  .input-wrapper--textarea {
    @apply h-auto;
  }

  .input-label--textarea-inside {
    @apply static scale-[0.85] !translate-y-0;
  }

  .input-label--textarea-outside-left {
    @apply self-start mt-1;
  }

  .input-el--textarea {
    @apply resize-none min-h-[60px] max-h-[160px] !overflow-x-auto;
  }

  .input-wrapper--textarea-sm {
    @apply py-1.5;
  }

  .input-wrapper--textarea-md {
    @apply py-2;
  }

  .input-wrapper--textarea-lg {
    @apply py-2.5;
  }

  .input-el-wrapper--textarea {
    @apply gap-0;
  }

  .input-wrapper--datepicker {
    @apply flex flex-row items-center justify-start gap-1;
  }

  .datepicker-clear-btn {
    @apply hidden text-neutral2-foreground shrink-0;
  }

  .input[data-js-has-value='true']:not(disabled)
    .input-wrapper--datepicker:hover
    .datepicker-clear-btn {
    @apply inline-flex;
  }

  .datepicker-calendar-icon {
    @apply text-neutral1-foreground block shrink-0;
  }

  .input[data-js-has-value='true']:not(disabled)
    .input-wrapper--datepicker:hover
    .datepicker-calendar-icon {
    @apply hidden;
  }
}