:host {
  display: inline-flex;

  .ld-select {
    flex-grow: 1;
    max-width: 100%;
  }
}

:host,
.ld-select {
  /* reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  ul {
    list-style: none;
  }
}

.ld-select {
  /* layout */
  --ld-select-min-width: 12.8125rem;
  --ld-select-min-height: var(--ld-sp-40);
  --ld-select-min-height-sm: var(--ld-sp-32);
  --ld-select-min-height-lg: 3.125rem;
  --ld-select-padding-x: var(--ld-sp-12);
  --ld-select-padding-x-sm: 0.625rem;
  --ld-select-padding-x-lg: 0.875rem;
  --ld-select-padding-y: var(--ld-sp-8);
  --ld-select-padding-y-sm: var(--ld-sp-4);
  --ld-select-padding-y-lg: var(--ld-sp-8);
  --ld-select-padding-right: calc(var(--ld-sp-40) + var(--ld-sp-12));
  --ld-select-padding-right-sm: calc(var(--ld-sp-40) + 0.625rem);
  --ld-select-padding-right-lg: calc(var(--ld-sp-40) + 0.875rem);
  --ld-select-icon-size: 1.25rem;
  --ld-select-icon-size-sm: var(--ld-sp-16);
  --ld-select-icon-size-lg: var(--ld-sp-24);
  --ld-select-trigger-line-height: 1.25;

  &--sm {
    --ld-select-min-height: var(--ld-select-min-height-sm);
    --ld-select-padding-x: var(--ld-select-padding-x-sm);
    --ld-select-padding-y: var(--ld-select-padding-y-sm);
    --ld-select-padding-right: var(--ld-select-padding-right-sm);
    --ld-select-icon-size: var(--ld-select-icon-size-sm);
  }

  &--lg {
    --ld-select-min-height: var(--ld-select-min-height-lg);
    --ld-select-padding-x: var(--ld-select-padding-x-lg);
    --ld-select-padding-y: var(--ld-select-padding-y-lg);
    --ld-select-padding-right: var(--ld-select-padding-right-lg);
    --ld-select-icon-size: var(--ld-select-icon-size-lg);
  }

  /* colors */
  --ld-select-col: var(--ld-col-neutral-900);
  --ld-select-col-disabled: var(--ld-col-neutral-100);
  --ld-select-col-border: var(--ld-col-neutral-100);
  --ld-select-col-border-hover: var(--ld-col-neutral-300);
  --ld-select-bg-col: var(--ld-col-wht);
  --ld-select-selection-col: var(--ld-col-wht);

  /* themable colors */
  --ld-select-invalid-col: var(--ld-thm-error);
  --ld-select-invalid-icon-col-hover: var(--ld-thm-error-hover);
  --ld-select-invalid-icon-col-focus: var(--ld-thm-error-focus);
  --ld-select-invalid-icon-col-active: var(--ld-thm-error-active);
  --ld-select-invalid-disabled-bg-col: var(--ld-thm-error-disabled);
  --ld-select-thm-col: var(--ld-thm-primary);
  --ld-select-thm-col-hover: var(--ld-thm-primary-hover);
  --ld-select-thm-col-focus: var(--ld-thm-primary-focus);
  --ld-select-thm-col-active: var(--ld-thm-primary-active);
  --ld-select-ghost-trigger-bg-col-hover: var(--ld-thm-primary-alpha-lowest);
  --ld-select-ghost-trigger-bg-col-focus: var(--ld-thm-primary-alpha-low);

  display: inline-flex;
  position: relative;

  select + .ld-icon,
  ::slotted(ld-icon) {
    width: var(--ld-select-icon-size);
    height: var(--ld-select-icon-size);
  }

  ::slotted(ld-icon) {
    display: contents !important;
  }

  select {
    + .ld-icon,
    + .ld-select__icon {
      position: absolute;
      right: var(--ld-select-padding-x);
      top: 50%;
      transform: translateY(-50%);
    }

    &[multiple] + .ld-icon,
    &[multiple] + .ld-select__icon {
      display: none;
    }

    + .ld-icon {
      width: var(--ld-select-icon-size);
      height: var(--ld-select-icon-size);
    }
  }

  > select[multiple] {
    overflow: auto;
  }
}

/* Mobile Safari (iOS only) */
/* stylelint-disable-next-line media-feature-range-notation, media-feature-name-no-vendor-prefix */
@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) {
  .ld-select > select[multiple] {
    padding-right: calc(var(--ld-select-padding-x) + var(--ld-sp-24));

    + .ld-icon,
    + .ld-select__icon {
      display: flex;
    }
  }
}

.ld-select--expanded {
  .ld-tether-target-attached-bottom {
    .ld-select__btn-trigger:not(.ld-select__btn-trigger--detached) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}

:where(.ld-select:not(.ld-select--inline, .ld-select--ghost)) {
  min-width: var(--ld-select-min-width);
}

.ld-select__select,
.ld-select__btn-trigger {
  width: 100%;
}

.ld-select > select,
.ld-select__btn-trigger {
  /* outline: none; */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font: var(--ld-typo-body-m);
  line-height: var(--ld-select-trigger-line-height);
  border: 0;
  padding: var(--ld-select-padding-y) var(--ld-select-padding-x);
  border-radius: var(--ld-br-m);
  height: 100%;
  user-select: none;
  touch-action: manipulation;
  color: var(--ld-select-col);
  background-color: var(--ld-select-bg-col);
  text-align: left;
  appearance: none;
  -webkit-touch-callout: none;

  &:where(select) {
    width: 100%;
  }

  &:where(select:not([multiple])) {
    padding-right: calc(var(--ld-select-padding-x) + var(--ld-sp-24));
  }

  &:where(
      select:not(
          :disabled,
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ),
  &:where(
      .ld-select__btn-trigger:not(
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ) {
    cursor: pointer;
  }

  &:where([aria-expanded='true']) {
    z-index: 2;

    &:not(:focus:focus-visible, .ld-select__btn-trigger--detached) {
      box-shadow: none;
    }
  }

  &:disabled,
  &:disabled + .ld-select__icon,
  &:disabled + .ld-icon,
  &:where(
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
    ),
  &:where(
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
    )
    + .ld-select__icon,
  &:where(
      [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
    )
    + .ld-icon {
    color: var(--ld-select-col-disabled);
  }
}

.ld-select__btn-trigger {
  overflow: hidden;
}

:where(.ld-select),
:where(.ld-select) > select {
  min-height: var(--ld-select-min-height);
}

.ld-select--ghost {
  &:not(ld-select),
  select,
  .ld-select__btn-trigger {
    background-color: transparent;
  }

  select,
  .ld-select__btn-trigger {
    &:not(:focus) {
      box-shadow: none;
    }
  }
}

.ld-select:where(:not(.ld-select--ghost)) {
  &:where(.ld-select--detached),
  &:where(:not(.ld-select--detached, .ld-select--expanded)) {
    :where(select),
    :where(.ld-select__btn-trigger) {
      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-col-border);
    }
  }

  &:where(:not(.ld-select--invalid)) {
    select,
    .ld-select__btn-trigger {
      &:where(
          .ld-select__btn-trigger--detached:not(
              :disabled,
              [aria-disabled]:where(
                  :not([aria-disabled=''], [aria-disabled='false'])
                )
            )
        ),
      &:where(
          :not(
              :disabled,
              [aria-disabled]:where(
                  :not([aria-disabled=''], [aria-disabled='false'])
                ),
              .ld-select__btn-trigger--detached,
              [aria-expanded='true']
            )
        ) {
        @media (hover: hover) {
          &:hover:not(:focus:focus-visible) {
            box-shadow: inset 0 0 0 var(--ld-sp-2)
              var(--ld-select-col-border-hover);
          }
        }
      }
    }
  }
}

.ld-select--invalid > select,
.ld-select--invalid .ld-select__btn-trigger--invalid {
  &:where(:not(:disabled)) {
    &:where(:focus:focus-visible) {
      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-invalid-col);
    }
  }

  &:where(
      :not(
          :disabled,
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ) {
    &:where(:not(:focus:focus-visible)) {
      background-color: var(--ld-select-invalid-disabled-bg-col);
      color: var(--ld-select-invalid-col);
    }

    &:where(:not(.ld-select__btn-trigger--ghost)) {
      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-invalid-col);
    }

    + .ld-icon,
    + .ld-select__icon,
    .ld-select__icon {
      color: var(--ld-select-invalid-col);
    }

    @media (hover: hover) {
      &:hover {
        box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-invalid-col);

        + .ld-icon,
        + .ld-select__icon,
        .ld-select__icon,
        ::slotted(ld-icon) {
          color: var(--ld-select-invalid-icon-col-hover);
        }
      }
    }
    &:where(:focus:focus-visible) {
      + .ld-icon,
      + .ld-select__icon,
      .ld-select__icon,
      ::slotted(ld-icon) {
        color: var(--ld-select-invalid-icon-col-focus);
      }
    }
    &:where(:active),
    &:where(:active:focus-visible) {
      + .ld-icon,
      + .ld-select__icon,
      .ld-select__icon,
      ::slotted(ld-icon) {
        color: var(--ld-select-invalid-icon-col-active);
      }
    }
  }
}

.ld-select__btn-trigger-text-wrapper,
.ld-select__selection-list {
  flex-grow: 1;
}

.ld-select__btn-trigger-text-wrapper {
  font: var(--ld-typo-label-m);
  line-height: var(--ld-select-trigger-line-height);
  padding: var(--ld-sp-6) var(--ld-sp-8) var(--ld-sp-6) 0;
  height: calc(100% + var(--ld-sp-12));
  margin: calc(-1 * var(--ld-sp-6)) 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ld-select > select,
.ld-select__btn-trigger-text,
.ld-select__selection-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ld-select__selection-list-container {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--ld-sp-6);
  margin-right: auto;
}

.ld-select__selection-list {
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--ld-sp-1)) var(--ld-sp-4) calc(-1 * var(--ld-sp-4)) 0;
  overflow: hidden;
  padding: 0;
}

.ld-select__selection-list-item {
  flex: 0 1;
  margin-right: var(--ld-sp-4);
  margin-bottom: var(--ld-sp-4);
  width: 100%;
}

.ld-select__selection-list-item--overflowing {
  display: none;
}

.ld-select__selection-list-more {
  order: 2147483647; /* Highest possible */
  display: inline-flex;
  align-items: center;
  font: var(--ld-typo-label-s);
  font-weight: 700;
  padding: var(--ld-sp-4) var(--ld-sp-6);
  border-radius: var(--ld-br-m);
  margin-right: var(--ld-sp-4);
  margin-bottom: var(--ld-sp-4);
}

.ld-select__btn-clear-single,
.ld-select__btn-clear {
  /* outline: none; */
  border: 0;
  padding: 0;
  border-radius: var(--ld-br-full);
  user-select: none;
  touch-action: manipulation;
  background-color: transparent;
  line-height: 0;
  -webkit-touch-callout: none;

  &:not(:disabled) {
    cursor: pointer;
  }
}

.ld-select__btn-clear {
  margin-right: var(--ld-sp-6);
  flex-shrink: 0;

  &:disabled {
    color: var(--ld-select-col-disabled);
  }
}

.ld-select__btn-clear-single {
  z-index: 1;
  margin-left: var(--ld-sp-6);
}

.ld-select__selection-label {
  position: relative;
  width: 100%;
  display: inline-flex;
  align-items: center;
  color: var(--ld-select-selection-col);
  font: var(--ld-typo-label-s);
  font-weight: 700;
  padding: var(--ld-sp-4) var(--ld-sp-6);
}

.ld-select__selection-label-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--ld-br-m);

  :where(
      .ld-select__btn-trigger[aria-disabled]:where(
          :not([aria-disabled=''], [aria-disabled='false'])
        )
    )
    & {
    background-color: var(--ld-select-col-disabled);
  }
}

.ld-select__selection-label-text {
  z-index: 1;
}

.ld-select__btn-clear-single-icon {
  --ld-select-btn-clear-single-size: 0.75rem;
  width: var(--ld-select-btn-clear-single-size);
  height: var(--ld-select-btn-clear-single-size);
}

.ld-select__btn-clear-icon {
  --ld-select-btn-clear-size: 1.25rem;
  width: var(--ld-select-btn-clear-size);
  height: var(--ld-select-btn-clear-size);
}

.ld-select__icon {
  fill: none;
  width: var(--ld-sp-16);
  height: var(--ld-sp-16);
}

.ld-select select + .ld-icon,
.ld-select__icon,
.ld-select ::slotted(ld-icon) {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;

  :where(
      select[aria-disabled]:where(
          :not([aria-disabled=''], [aria-disabled='false'])
        )
    )
    &,
  :where(select:disabled) &,
  :where(
      .ld-select__btn-trigger[aria-disabled]:where(
          :not([aria-disabled=''], [aria-disabled='false'])
        )
    )
    & {
    color: var(--ld-select-col-disabled);
  }

  .ld-icon,
  svg {
    width: 100%;
    height: 100%;
  }
}

.ld-select__icon--rotated {
  transform-origin: center;
  transform: rotate(180deg);
}

.ld-select__slot-container {
  display: none;
}

:where(
    .ld-select:not(.ld-select--disabled, [aria-disabled], .ld-select--invalid)
  ) {
  .ld-select__btn-trigger {
    &:where(:focus:focus-visible) {
      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-thm-col);
    }
  }

  &.ld-select--ghost {
    :where(select:not(:disabled)),
    :where(.ld-select__btn-trigger) {
      @media (hover: hover) {
        &:hover:not(:focus) {
          background-color: var(--ld-select-ghost-trigger-bg-col-hover);
        }
      }
      &:active,
      &:active:focus-visible {
        background-color: var(--ld-select-ghost-trigger-bg-col-focus);
      }
    }
  }

  :where(select:not(:disabled)),
  :where(.ld-select__btn-trigger) {
    .ld-select__icon,
    + .ld-icon,
    + .ld-select__icon,
    ::slotted(ld-icon) {
      color: var(--ld-select-thm-col);
    }

    @media (hover: hover) {
      &:where(:hover) {
        .ld-select__icon,
        + .ld-icon,
        + .ld-select__icon,
        ::slotted(ld-icon) {
          color: var(--ld-select-thm-col-hover);
        }
      }
    }
    &:where(:focus:focus-visible) {
      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-thm-col);

      .ld-select__icon,
      + .ld-select__icon,
      ::slotted(ld-icon) {
        color: var(--ld-select-thm-col-focus);
      }
    }
    &:where(:active),
    &:where(:active:focus-visible) {
      .ld-select__icon,
      + .ld-icon,
      + .ld-select__icon,
      ::slotted(ld-icon) {
        color: var(--ld-select-thm-col-active);
      }
    }
  }
}

:where(.ld-select:not(.ld-select--disabled)):not(.ld-select--invalid) {
  :where(select:not(:disabled)),
  :where(.ld-select__btn-trigger) {
    &:where(:focus:focus-visible) {
      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-select-thm-col);
    }
  }
}

:where(
    .ld-select:not(
        .ld-select--disabled,
        [aria-disabled],
        [aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false']))
      )
  ) {
  .ld-select__selection-list-more {
    color: var(--ld-select-thm-col);
  }
  .ld-select__selection-label-bg {
    background-color: var(--ld-select-thm-col);
  }

  .ld-select__btn-clear-single {
    &:where(:focus:focus-visible) + .ld-select__selection-label-bg {
      background-color: var(--ld-select-thm-col-focus);
    }

    &:where(:active),
    &:where(:active:focus-visible) {
      + .ld-select__selection-label-bg {
        background-color: var(--ld-select-thm-col-active);
      }
    }
  }

  .ld-select__btn-clear {
    color: var(--ld-select-thm-col);

    &:where(:focus:focus-visible) {
      color: var(--ld-select-thm-col-focus);
    }
    @media (hover: hover) {
      &:where(:hover) {
        color: var(--ld-select-thm-col-hover);
      }
    }
    &:where(:active),
    &:where(:active:focus-visible) {
      color: var(--ld-select-thm-col-active);
    }
  }
}
