.label {
  @apply text-primary-500 opacity-60 text-lg ps-1;
  :global(.dark) & {
    @apply text-white;
  }
}

.labelInvalid {
  @apply !text-danger;
}

.container {
  @apply w-full !bg-transparent pb-1.5 border-b-1 border-primary-200 relative;
  :global(.dark) & {
    @apply border-white after:bg-white;
  }
}

.container::after {
  content: '';
  @apply absolute bottom-0 left-1/2 w-0 h-[1px] bg-black origin-center transition-all duration-300;
}

.container:focus-within::after {
  @apply w-full -left-0;
}

.container :global(.flag-dropdown) {
  @apply !border-b-[1px] !border-primary-200 hover:!border-primary-800;
  :global(.dark) & {
    @apply !border-white;
  }
}

.container :global(.form-control:focus) {
  @apply !border-primary-800 !border-b-[1px];
  :global(.dark) & {
    @apply !border-white;
  }
}

.containerInvalid :global(.form-control:focus) {
  @apply !border-b-[2px] !border-b-danger;
}

.containerInvalid {
  @apply !border-danger-500 hover:!border-danger-500;
}

.containerInvalid::after {
  @apply bg-danger;
}

.input {
  @apply !w-full !border-none !bg-transparent !rounded-none !font-sans !text-base;
}

.button {
  @apply !pb-1.5 !border-none !bg-transparent;
}

.button :global(.selected-flag) {
  @apply !bg-transparent;
}

.dropdown {
  @apply !z-10 font-sans;
  :global(.dark) & {
    @apply !bg-black !text-white;
  }
}

.dropdown :global(li) {
  :global(.dark) & {
    @apply hover:!text-black;
  }
}

.dropdown :global(li.highlight) {
  :global(.dark) & {
    @apply !text-black;
  }
}

.search {
  @apply !bg-white !px-2;
  :global(.dark) & {
    @apply !bg-black;
  }
}

.search :global(span) {
  @apply !hidden;
}

.search :global(input) {
  @apply !w-full !ml-0;
  :global(.dark) & {
    @apply !text-white hover:!text-white focus:!text-white;
  }
}
.dropdown :global(li.no-entries-message) {
  :global(.dark) & {
    @apply hover:!text-white !text-white;
  }
}
