@charset "UTF-8";
@import "../common/var.css";

@component-namespace element {

  @b option {
    box-sizing: border-box;
    color: var(--dropdown-color);
    cursor: pointer;
    display: block;
    font-size: var(--dropdown-font-size);
    padding: 9px;

    @e remark {
      color: var(--dropdown-option-pinyin-color);
      float: right;
    }

    @m arrow {

      &:not(.is-last)::after {
        border-left: 1px solid var(--dropdown-border-color);
        border-top: 1px solid var(--dropdown-border-color);
        content: " ";
        height: 4px;
        margin-top: 6px;
        position: absolute;
        right: 12px;
        transform: rotate(135deg);
        width: 4px;
      }
    }

    @when disabled {
      background-color: transparent;
      color: var(--dropdown-option-color-disabled);
      cursor: not-allowed;
    }

    &:hover,
    &.is-hover {
      background-color: var(--dropdown-option-fill-hover);
      color: var(--dropdown-option-color-hover);
    }

    @when selected {
      background-color: var(--dropdown-option-fill-active);
      color: var(--dropdown-option-color-active);
    }
  }

  @b optiongroup {
    list-style: none;
    padding-left: 0;

    & .element-option {
      padding-left: 21px;
    }

    @e title {
      box-sizing: border-box;
      color: var(--dropdown-group-color);
      display: inline-block;
      font-size: var(--dropdown-font-size);
      padding: 8px;

      &:hover {
        background-color: inherit;
      }
    }
  }
}