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

@component-namespace el {
  @b dropdown {
    display: inline-block;
    position: relative;
    color: var(--color-extra-light-black);
    font-size: var(--font-size-base);

    .el-button-group {
      display: block;
      .el-button {
        float: none;
      }
    }

    & .el-dropdown__caret-button {
      padding: * 5px;

      & .el-dropdown__icon {
        padding-left: 0;
      }
    }
    @e icon {
      font-size: 12px;
      margin: 0 3px;
    }
  }
  @b dropdown-menu {
    margin: 5px 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-base-gray);
    box-shadow: var(--dropdown-menu-box-shadow);
    padding: 6px 0;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100px;

    @e item {
      list-style: none;
      line-height: 36px;
      padding: 0 10px;
      margin: 0;
      cursor: pointer;

      &:not(.is-disabled):hover {
        background-color: var(--dropdown-menuItem-hover-fill);
        color: var(--dropdown-menuItem-hover-color);
      }
      @m divided {
        position: relative;
        margin-top: 6px;
        border-top: 1px solid var(--color-base-gray);

        &:before {
          content: '';
          height: 6px;
          display: block;
          margin: 0 -10px;
          background-color: var(--color-white);
        }
      }
      @when disabled {
        cursor: default;
        color: var(--color-extra-light-silver);
        pointer-events: none;
      }
    }
  }
}