$base-class: '.sui-MoleculeDropdownOption';

#{$base-class} {
  align-items: center;
  border-radius: $bdrs-molecule-dropdown-option;
  color: $c-dropdown-option;
  display: flex;
  gap: $g-molecule-dropdown-option;
  min-height: $mih-dropdown-option;
  padding: $pt-molecule-dropdown-option $pr-molecule-dropdown-option $pb-molecule-dropdown-option
    $pl-molecule-dropdown-option;
  margin: $mt-molecule-dropdown-option $mr-molecule-dropdown-option $mb-molecule-dropdown-option
    $ml-molecule-dropdown-option;

  &-mark {
    color: $c-molecule-dropdown-option--highlight-mark;
    &.is-highlighted {
      background-color: $bg-molecule-dropdown-option--highlight-mark;
      font-weight: $fw-molecule-dropdown-option--highlight-mark;
    }
  }

  &-checkbox {
    padding-left: $p-s;
  }

  &-leftAddon {
    margin-left: $ml-molecule-dropdown-option-text;
  }

  &-text {
    font-size: $fz-molecule-dropdown-option-text;
    line-height: $lh-molecule-dropdown-option-text;
    flex-basis: 100%;
    overflow: hidden;
    text-overflow: ellipsis;

    &:first-child {
      margin-left: $ml-molecule-dropdown-option-text;
    }

    &--noWrap {
      white-space: nowrap;
    }

    &--lineWrap,
    &--twoLines,
    &--threeLines {
      line-height: $lh-molecule-dropdown-option-line-wrap-text;
    }

    &--twoLines,
    &--threeLines {
      -webkit-box-orient: vertical;
      display: -webkit-box;
    }

    &--twoLines {
      -webkit-line-clamp: 2;
    }
    &--threeLines {
      -webkit-line-clamp: 3;
    }
  }

  &-description {
    color: $c-molecule-dropdown-option-description;
    margin: $mt-molecule-dropdown-option-description $mr-molecule-dropdown-option-description
      $mb-molecule-dropdown-option-description $ml-molecule-dropdown-option-description;
    font-size: $fz-molecule-dropdown-option-description;
  }

  &.is-selected:not(&-checkbox) {
    background: $bg-molecule-dropdown-option-selected;
  }

  &.is-selected:not(&-checkbox) &-text {
    font-weight: $fw-molecule-dropdown-option-selected-text;
    color: $c-molecule-dropdown-option-selected-text;
  }

  &--disabled {
    color: $c-dropdown-option-disabled;
    cursor: default;
  }

  &:hover,
  &:focus {
    background-color: $bgc-dropdown-option-hover;
    color: $c-dropdown-option-hover;
    cursor: pointer;
    outline: none;

    & #{$base-class}-description {
      color: $c-dropdown-option-hover;
    }
  }

  &:focus-visible {
    outline-color: $oc-dropdown-option-focus-visible;
    outline-offset: $oo-dropdown-option-focus-visible;
    outline-width: $ow-dropdown-option-focus-visible;
    outline-style: solid;
  }

  &--withDescription {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: $pt-molecule-dropdown-option-with-description $pl-molecule-dropdown-option;

    &.is-selected {
      color: $c-molecule-dropdown-option-selected-text;
    }
  }

  &--withDescriptionAndAddon {
    flex-direction: row;

    & #{$base-class} {
      &-leftAddon {
        height: fit-content;
      }
      &-text {
        display: flex;
        gap: 4px;
        flex-direction: column;
      }
      &-description {
        margin: 0;
      }
    }
  }
}