@use '../../_styles/mixin.scss' as *;

.o-option {
  padding: calc(var(--option-gap) / 2) 0;
}
.o-option-item {
  display: flex;
  align-items: center;
  padding: var(--option-padding);
  color: var(--option-color);
  background-color: var(--option-bg-color);
  font-size: var(--option-text-size);
  line-height: var(--option-text-height);
  border-radius: var(--option-radius);
  transition: background-color var(--o-duration-s) var(--o-easing-standard);
  cursor: pointer;

  &,
  &.o-option-multiple {
    @include hover {
      background-color: var(--option-bg-color-hover);
      color: var(--option-color-hover);
    }
  }

  &.active {
    font-weight: 600;
    color: var(--option-color-active);
    background-color: var(--option-bg-color-active);
  }
}

.o-option-disabled {
  &,
  &:hover,
  &:active,
  &.o-option-multiple:hover {
    cursor: not-allowed;
    color: var(--option-color-disabled);
    background-color: var(--option-bg-color-disabled);
  }
}
.o-option-list {
  padding: var(--option-list-padding, var(--option-list-padding-default));
  --scroller-padding: 0;
}
// 列表容器
.o-options-container {
  max-height: var(--option-list-max-height, var(--option-list-max-height-default));
  overflow: auto;
}

// 选项组
.o-option-group {
  color: var(--option-group-color);
  font-size: var(--option-group-text-size);
  line-height: var(--option-group-text-height);

  + .o-option-group {
    margin-top: var(--option-group-gap);
  }
}
.o-option-group-name {
  padding: var(--option-group-name-padding);
}