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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &-expanded &-button {
        // color: red;
        // font-weight: @veui-option-font-weight-selected-parent;
        background-color: @veui-option-background-color-selected-parent;

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

    &-box {
        pointer-events: none;
    }

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

    &-box[x-placement*="right"] &-options {
        margin-left: 0;
      }
    
      &-box[x-placement*="left"] &-options {
        margin-right: 0;
      }
}