@import "../lib.less";
@import (reference) "../dropdown.less";

.@{veui-prefix}-option-group {
  // 先给所有的 OptionGroup 设置 padding 和 max-height， 然后通过后代选择器清除内部的
  // OptionGroup 的 padding 和 max-height，保证只有最外层的设置了 max-height 和 padding
  font-size: @dls-option-font-size-m;
  .padding(@dls-option-group-padding-y, _);

  & & {
    .padding(0, _);
    max-height: none;
  }

  &-box & {
    .padding(0, _);
  }

  // 找到有分割线的元素，padding-top 设置分割线下间距， margin-top 设置分割线上间距
  & &:not(.@{veui-prefix}-option-group-popout):not(:first-child) {
    margin-top: @dls-option-group-padding-y;
    padding-top: @dls-option-group-padding-y;
    border-top: 1px solid @dls-option-group-separator-color;
  }

  &-popout &-label {
    .margin(0, _);
  }

  &.@{veui-prefix}-option-group-popout {
    .@{veui-prefix}-option-group-label {
      color: @dls-option-font-color;
    }
  }

  &[ui~="xs"] {
    .@{veui-prefix}-option-group-label {
      font-size: @dls-option-font-size-xs;
      max-width: @dls-option-max-width-xs;
    }
  }

  &[ui~="s"] {
    .@{veui-prefix}-option-group-label {
      font-size: @dls-option-font-size-s;
      max-width: @dls-option-max-width-s;
    }
  }

  &[ui~="l"] {
    .@{veui-prefix}-option-group-label {
      font-size: @dls-option-font-size-l;
      max-width: @dls-option-max-width-l;
    }
  }

  .@{veui-prefix}-text-highlighted {
    color: @dls-option-font-color-highlighted;
  }

  &-label {
    display: flex;
    align-items: center;
    max-width: @dls-option-max-width-m;
    font-size: @dls-option-font-size-m;
    color: @dls-option-group-label-font-color;
    line-height: @dls-option-group-label-line-height;
    .padding(@dls-option-group-label-padding-y, @dls-option-padding-m);

    .@{veui-prefix}-option-label {
      flex-grow: 1;
    }

    .@{veui-prefix}-option-group-expandable {
      color: @dls-option-icon-color-aux;
      .dls-icon-size(@dls-option-icon-size-aux);
      margin-left: @dls-option-label-spacing-after;
    }
  }

  &-label&-button {
    .padding(0, _);
  }

  &-label-disabled {
    .@{veui-prefix}-option-group-expandable {
      color: @dls-option-icon-color-aux-disabled;
    }
  }

  .@{veui-prefix}-option {
    .padding(_, @dls-option-padding-m);
  }

  &-button {
    &:extend(._veui-dropdown-option all);
  }

  &-expanded &-button {
    font-weight: @dls-option-font-weight-selected-parent;
    background-color: @dls-option-background-color-selected-parent;

    &:active {
      background-color: @dls-option-background-color-active;
    }
  }

  &-box {
    pointer-events: none;
  }

  &-box &-options {
    &:extend(._veui-dropdown-overlay all);
    .padding(@dls-option-group-padding-y, _);
    .margin(0, @dls-option-dropdown-target-spacing);
    pointer-events: all;
  }
}