@layer components {
  :root {
    --select__text-color: var(--color-neutral-700);
    --select__font-size: var(--typography-body-large__font-size);
    --select__line-height: var(--typography-body-large__line-height);
    --select__letter-spacing: var(--typography-body-large__letter-spacing);
    --select__font-weight: var(--typography-body-large__font-weight);
    --select__font-family: var(--typography-body-large__font-family);

    --select__dropdown-width: 100%;
    --select__dropdown-border-radius: var(--border-radius-rounded-square);
    --select__dropdown-background-color: var(--color-surface-primary);
    --select__dropdown-shadow: 0 9px 21px 0 rgb(0 0 0 / 0.1),
      0 38px 38px 0 rgb(0 0 0 / 0.09), 0 85px 51px 0 rgb(0 0 0 / 0.05),
      0 152px 61px 0 rgb(0 0 0 / 0.01), 0 237px 66px 0 rgb(0 0 0 / 0);

    --select__search-border: 1px solid var(--color-neutral-100);

    --select__search-input-py: 0.875em;
    --select__search-input-px--desktop: 0.625em;
    --select__search-input-px--mobile: 0.125em;
    --select__search-input-text-color: var(--color-neutral-700);
    --select__search-input-caret-color: var(--color-primary-theme-primary);
    --select__search-input-font-family: var(
      --typography-body-large__font-family
    );
    --select__search-input-font-size: var(--typography-body-large__font-size);
    --select__search-input-line-height: var(
      --typography-body-large__line-height
    );
    --select__search-input-letter-spacing: var(
      --typography-body-large__letter-spacing
    );
    --select__search-input-font-weight: var(
      --typography-body-large__font-weight
    );

    --select__search-icon-width: calc(
      var(--select__search-input-font-size) * 2.75
    );
    --select__search-icon-font-size: calc(
      var(--select__search-input-font-size) * 1.5
    );
    --select__search-icon-color: var(--color-neutral-200);

    --select__clear-icon-width: calc(
      var(--select__search-input-font-size) * 2.75
    );
    --select__clear-icon-font-size: calc(
      var(--select__search-input-font-size) * 1.25
    );
    --select__clear-icon-color: var(--color-neutral-200);

    --select__close-icon-font-size: calc(
      var(--select__search-input-font-size) * 1.5
    );

    --select__options-max-height: 100%;
    --select__options-py: 1em;
    --select__options-px: calc(var(--select__font-size) * 1);
    --select__options-space-y: 0.5em;

    --select__option-border-radius: calc(var(--select__font-size) * 0.75)
      /* 12 / 16 ratio to font size */;
    --select__option-background-color--active: var(--color-neutral-100);
    --select__option-py: 0.75em;
    --select__option-px: calc(var(--select__font-size) * 1);

    --select__empty-text-color: var(--color-neutral-300);
    --select__empty-font-size: var(--typography-body-large-font-size);
    --select__empty-line-height: var(--typography-body-large-line-height);
    --select__empty-letter-spacing: var(
      --typography-body-large__letter-spacing
    );
    --select__empty-font-weight: var(--typography-body-large-font-weight);

    @media (min-width: theme("screens.tablet")) {
      --select__options-max-height: 18rem;
      --select__dropdown-width: 22rem;
    }
  }

  :root.dark {
    --select__text-color: var(--color-neutral-100);
    --select__dropdown-background-color: var(--color-neutral-600);
    --select__search-border: 1px solid var(--color-neutral-400);
    --select__search-input-text-color: var(--color-neutral-100);
    --select__search-icon-color: var(--color-neutral-200);
    --select__clear-icon-color: var(--color-neutral-200);
    --select__option-background-color--active: var(--color-neutral-500);
    --select__empty-text-color: var(--color-neutral-300);
  }

  .select__dropdown-container {
    @apply fixed overflow-visible;
  }

  .select__dropdown {
    @apply absolute;
    @apply flex;
    @apply flex-col;

    width: var(--select__dropdown-width);
    border-radius: var(--select__dropdown-border-radius);
    background-color: var(--select__dropdown-background-color);
    box-shadow: var(--select__dropdown-shadow);

    font-family: var(--select__font-family);
    font-size: var(--select__font-size);
    line-height: var(--select__line-height);
    letter-spacing: var(--select__letter-spacing);
    font-weight: var(--select__font-weight);
    color: var(--select__text-color);

    /* Full screen select for mobile */
    @media not all and (min-width: theme("screens.tablet")) {
      position: fixed;
      /* Override @floating-ui/dom style */
      /* stylelint-disable-next-line declaration-no-important */
      top: 0 !important;
      /* stylelint-disable-next-line declaration-no-important */
      left: 0 !important;
      right: 0;
      bottom: 0;
      height: 100%;
      border-radius: initial;
    }
  }

  .select__search-container {
    @apply flex;
    @apply flex-row;
    @apply items-center;

    @apply max-tablet:p-6 max-tablet:pb-2;
  }

  .select__search {
    @apply flex-1;
    @apply min-w-0;
    @apply grid;
    grid-template:
      "search  input clear" auto
      / auto 1fr auto;

    @apply px-1.5;
    @apply max-tablet:rounded-xl;
    border: var(--select__search-border);

    @media (min-width: theme("screens.tablet")) {
      grid-template:
        "input clear search" auto
        / 1fr auto auto;
      border: none;
      border-bottom: var(--select__search-border);
    }
  }

  .select__search-input {
    @apply min-w-0;

    grid-area: input;

    border: none;
    outline: none;
    background-color: transparent;

    padding: var(--select__search-input-py)
      var(--select__search-input-px--desktop);
    @media (max-width: theme("screens.tablet")) {
      padding: var(--select__search-input-py)
        var(--select__search-input-px--mobile);
    }

    color: var(--select__search-input-text-color);
    font-family: var(--select__search-input-font-family);
    font-size: var(--select__search-input-font-size);
    line-height: var(--select__search-input-line-height);
    letter-spacing: var(--select__search-input-letter-spacing);
    font-weight: var(--select__search-input-font-weight);
    caret-color: var(--select__search-input-caret-color);
  }

  @media (min-width: theme("screens.tablet")) {
    .select__search-input:placeholder-shown ~ .select__clear-icon {
      @apply hidden;
    }
    .select__search-input:not(:placeholder-shown) ~ .select__search-icon {
      @apply hidden;
    }
  }

  .select__search-icon {
    grid-area: search;
    @apply flex;
    @apply items-center;
    @apply justify-center;

    width: var(--select__search-icon-width);
    font-size: var(--select__search-icon-font-size);
    color: var(--select__search-icon-color);
  }

  .select__clear-icon {
    grid-area: clear;
    @apply hidden tablet:flex;
    @apply items-center;
    @apply justify-center;

    width: var(--select__clear-icon-width);
    font-size: var(--select__clear-icon-font-size);
    color: var(--select__clear-icon-color);
  }

  .select__close-icon {
    @apply flex;
    @apply items-center;
    @apply justify-center;
    @apply tablet:hidden;
    @apply ltr:ml-4 rtl:mr-4;

    font-size: var(--select__close-icon-font-size);
  }

  .select__options {
    @apply flex;
    @apply flex-col;

    padding: var(--select__options-py) var(--select__options-px);
    max-height: var(--select__options-max-height);
    overflow-y: auto;

    @apply space-y-[var(--select\_\_options\_\_space-y)];
  }

  .select__option {
    @apply flex;
    @apply flex-row;
    @apply items-center;
    @apply cursor-pointer;
    @apply whitespace-pre-wrap;

    padding: var(--select__option-py) var(--select__option-px);
    border-radius: var(--select__option-border-radius);
    font-family: var(--select__font-family);

    &:hover,
    &:focus,
    &[aria-selected="true"] {
      background-color: var(--select__option-background-color--active);
    }
  }

  .select__option-prefix {
    @apply flex;
    @apply flex-row;
    @apply items-center;
    min-width: 5.25rem;
  }

  .select__empty {
    @apply flex;
    @apply flex-row;
    @apply items-center;
    @apply justify-center;
    @apply text-center;

    padding: var(--select__option-py) var(--select__option-px);
    color: var(--select__empty-text-color);
    font-size: var(--select__empty-font-size);
    line-height: var(--select__empty-line-height);
    letter-spacing: var(--select__empty-letter-spacing);
    font-weight: var(--select__empty-font-weight);
  }
}
