:host,
.ld-option-internal {
  /* layout */
  --ld-option-padding-inline-start: var(--ld-sp-12);
  --ld-option-padding-inline-start-sm: 0.625rem;
  --ld-option-padding-inline-start-lg: 0.875rem;

  /* colors */
  --ld-option-bg-col: var(--ld-col-wht);
  --ld-option-border-col: var(--ld-col-neutral-100);
  --ld-option-disabled-text-col: var(--ld-col-neutral-100);
  --ld-option-text-col: var(--ld-col-neutral-900);

  /* themable colors */
  --ld-option-thm-col: var(--ld-thm-primary);
  --ld-option-thm-col-hover: var(--ld-thm-primary-hover);
  --ld-option-thm-col-focus: var(--ld-thm-primary-focus);
  --ld-option-thm-col-active: var(--ld-thm-primary-active);
  --ld-option-thm-bg-col-hover: var(--ld-thm-primary-highlight);
  --ld-option-thm-bg-col-focus: var(--ld-thm-primary-highlight);
  --ld-option-thm-bg-col-active: var(--ld-thm-primary-highlight);
}

:host(:not(:last-of-type)) {
  .ld-option-internal {
    border-bottom: solid var(--ld-option-border-col) var(--ld-sp-1);
  }
}

.ld-option-internal {
  &--sm {
    --ld-option-padding-inline-start: var(--ld-option-padding-inline-start-sm);
  }

  &--lg {
    --ld-option-padding-inline-start: var(--ld-option-padding-inline-start-lg);
  }

  &--indent {
    --ld-option-indent: 1.75rem;
  }

  outline: none;
  display: flex;
  position: relative;
  color: var(--ld-option-text-col);
  background-color: var(--ld-option-bg-col);
  padding-block: var(--ld-sp-8);
  padding-inline: calc(
    var(--ld-option-padding-inline-start) + var(--ld-option-indent, 0px)
  ) var(--ld-sp-12);
  font: var(--ld-typo-label-m);
  min-height: 2.5rem;
  white-space: nowrap;
  user-select: none;
  touch-action: manipulation;
  border: 0;
  -webkit-touch-callout: none;
  box-sizing: border-box;

  &--filtered {
    display: none;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  [data-popper-placement*='bottom'] & {
    &:last-of-type {
      border-bottom-left-radius: var(--ld-br-m);
      border-bottom-right-radius: var(--ld-br-m);
    }
  }
  [data-popper-placement*='top'] & {
    &:first-of-type {
      border-top-left-radius: var(--ld-br-m);
      border-top-right-radius: var(--ld-br-m);
    }
  }

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

  &[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false'])) {
    color: var(--ld-option-disabled-text-col);
  }

  /* Pseudo element for focus outline */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--ld-br-m);
    pointer-events: none;
  }

  &:where(:focus),
  &:where(:focus:focus-visible) {
    &::before {
      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-option-thm-col);
    }
  }

  &:where(:focus:not(:focus-visible)) {
    &::before {
      box-shadow: none;
    }
  }

  &:where(
      :not(
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ) {
    :where(.ld-option-internal__check) {
      color: var(--ld-option-thm-col);
    }

    &:where(:focus),
    &:where(:focus:focus-visible) {
      background-color: var(--ld-option-thm-bg-col-focus);

      :where(.ld-option-internal__check) {
        color: var(--ld-option-thm-col-focus);
      }
    }

    &:where(:focus:not(:focus-visible)) {
      background-color: var(--ld-option-bg-col);

      :where(.ld-option-internal__check) {
        color: var(--ld-option-thm-col);
      }
    }

    @media (hover: hover) {
      &:where(:hover) {
        background-color: var(--ld-option-thm-bg-col-hover);

        :where(.ld-option-internal__check) {
          color: var(--ld-option-thm-col-hover);
        }
      }
    }

    &:where(:active),
    &:where(:active:focus-visible) {
      background-color: var(--ld-option-thm-bg-col-active);

      :where(.ld-option-internal__check) {
        color: var(--ld-option-thm-col-active);
      }
    }
  }
}

.ld-option-internal__checkbox-wrapper {
  display: inline-flex;
  flex-shrink: 0;
}

.ld-option-internal__check,
.ld-option-internal__checkbox {
  align-self: center;
  flex-shrink: 0;
  transform: translateX(calc(-1 * var(--ld-sp-2)));
}

.ld-option-internal__check {
  margin-right: var(--ld-sp-4);
}

.ld-option-internal__checkbox {
  margin-left: var(--ld-sp-2);
  margin-right: var(--ld-sp-6);
}

.ld-option-internal__label {
  overflow: hidden;
  text-overflow: ellipsis;
}
