@import "./variables";

.#{$component-prefix}tree-select-option {
  position: relative;
  padding: $tree-select-option-padding;
  font-weight: $tree-select-option-font-weight;
  line-height: $tree-select-option-line-height;
  cursor: pointer;

  &--active {
    color: $tree-select-option-active-color;

    .#{$component-prefix}tree-select-option__icon {
      position: absolute;
      top: 50%;
      right: $tree-select-option-icon-active-right;
      margin-top: calc(var(--padding-xs, #{$padding-xs}) * -1);
      font-size: $tree-select-option-icon-active-font-size;
    }
  }

  &:active {
    background: $tree-select-option-active-background-color;
  }

  &--disabled {
    color: $tree-select-option-disabled-color;
    cursor: not-allowed;

    &:active {
      background: transparent;
    }
  }
}