prenix_components

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

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

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

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

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

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

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

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

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

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

  .ts-wrapper {
    @apply relative w-full;
  }

  [data-original-input] {
    @apply bg-transparent visually-hidden;
  }

  .autocomplete-wrapper {
    @apply relative w-full inline-flex tap-highlight-transparent;
    @apply outline-none shadow-small 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;
  }

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

  .autocomplete-input-wrapper {
    @apply inline-flex w-full items-center h-full box-border relative gap-1.5;
    @apply max-w-[calc(100%_-_24px)];
  }

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

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

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

  .ts-wrapper.input-active .autocomplete-input,
  .ts-wrapper.dropdown-active .autocomplete-input {
    @apply block;
  }

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

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

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

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

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

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

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

  .autocomplete-dropdown {
    @apply absolute top-[100%] left-0 w-full z-[1070] mt-3;
  }

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

  .ts-dropdown-content {
    overflow: hidden auto;
    @apply bg-content text-content-foreground shadow-medium;
    @apply p-2 rounded-xl text-sm subpixel-antialiased outline-none box-border;
    @apply opacity-0 scale-95 transition-transform-opacity duration-150 origin-[left_top] ease-out;
    @apply overflow-x-hidden overflow-y-auto max-h-[200px]  scroll-smooth;
  }

  .ts-dropdown-content.open {
    @apply opacity-100 scale-100 ease-in;
  }

  .autocomplete .no-results {
    @apply px-2 py-1.5 text-neutral2-foreground;
  }

  .autocomplete-option,
  .autocomplete-create {
    @apply relative flex px-2 py-1.5 break-words;
    @apply cursor-pointer rounded-lg subpixel-antialiased;
    @apply tap-highlight-transparent outline-none;
  }

  .autocomplete-option.active {
    @apply bg-default text-default-foreground;
  }

  .autocomplete[data-type='single'] .autocomplete-option {
    @apply pr-8 flex;
  }

  .autocomplete-option[aria-disabled='true'] {
    @apply opacity-disabled text-neutral2-foreground;
    @apply cursor-not-allowed;
  }

  .autocomplete .autocomplete-option[data-selectable] .highlight {
    @apply bg-primary/40;
  }

  .autocomplete[data-type='single'] .autocomplete-option.selected:after {
    --autocomplete-option-active-checkmark-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath fill-rule='evenodd' d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    -webkit-mask-image: var(--autocomplete-option-active-checkmark-img);
    mask-image: var(--autocomplete-option-active-checkmark-img);
    @apply w-4 h-4 content-[""] absolute right-2;
    @apply top-[50%] -translate-y-[50%] bg-content-foreground;
  }

  .autocomplete-option-label {
    @apply break-words flex-1 min-w-0;
  }

  .autocomplete[data-type='single'] .autocomplete-item,
  .autocomplete[data-type='multiple'] .autocomplete-item {
    @apply truncate;
  }

  .autocomplete[data-type='single']
    .ts-wrapper.dropdown-active
    .autocomplete-item,
  .autocomplete[data-type='multiple']
    .ts-wrapper.input-active
    .autocomplete-item {
    @apply hidden;
  }

  .autocomplete-item {
    @apply text-foreground;
  }

  .autocomplete-dropdown-icon {
    @apply text-neutral1-foreground transition-transform inline-flex;
  }

  .autocomplete[data-type='tags'] .autocomplete-dropdown-icon {
    @apply hidden;
  }

  .autocomplete[data-js-focus='true'] .autocomplete-dropdown-icon {
    @apply rotate-180;
  }

  .input-hidden .ts-control .autocomplete-input {
    opacity: 0;
    position: absolute;
    left: -10000px;
  }

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

  .autocomplete-wrapper--single,
  .autocomplete-wrapper--multiple {
    @apply flex flex-row items-center justify-start gap-1.5;
  }

  .autocomplete-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];
  }

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

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

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

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

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

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

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

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

  /* Blank */
  .autocomplete-option.selected[data-value='']:after {
    @apply hidden;
  }

  .autocomplete-option[data-value=''] {
    @apply min-h-[2rem] pr-2;
  }

  .autocomplete-item[data-value=''] {
    @apply text-neutral1-foreground;
  }

  /* Multiple */
  .autocomplete[data-type='multiple'] .autocomplete-option {
    @apply flex;
  }

  .autocomplete[data-type='multiple']
    .autocomplete-option-checkbox
    .checkbox-checkbox {
    @apply before:border-foreground;
  }

  .autocomplete[data-type='multiple']
    .autocomplete-option[aria-disabled='true']
    .autocomplete-option-checkbox
    .checkbox-checkbox {
    @apply before:border-neutral2-foreground;
  }

  /* Tags */
  .autocomplete[data-type='tags'] .ts-control {
    @apply gap-1 flex-wrap flex;
  }

  .autocomplete[data-type='tags'] .autocomplete-dropdown-toggle {
    @apply hidden;
  }

  .autocomplete-wrapper--tags {
    @apply h-auto justify-start;
  }

  .autocomplete-input--tags {
    @apply flex-1 max-w-full min-w-[100px];
  }

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

  .autocomplete[data-type='tags'] .autocomplete-remove-btn {
    @apply h-4 w-4 inline-flex;
  }

  .autocomplete[data-type='tags'] .autocomplete-remove-btn-icon {
    @apply h-4 w-4;
  }

  .autocomplete[data-type='tags'] .autocomplete-create {
    @apply flex items-center gap-2;
  }

  .autocomplete[data-type='tags'] .autocomplete-create .chip {
    @apply flex-1 min-w-[1px];
  }

  .autocomplete[data-type='tags'] .chip {
    @apply w-full;
  }

  .autocomplete[data-type='tags'] .chip-content {
    @apply truncate;
  }

  .autocomplete-wrapper--tags-sm {
    @apply p-1.5;
  }

  .autocomplete-wrapper--tags-md {
    @apply p-2;
  }

  .autocomplete-wrapper--tags-lg {
    @apply p-2.5;
  }

  .autocomplete-label--tags-outside-left {
    @apply mt-1;
  }
}