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

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

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

    & .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: #fff;
    border: 1px solid #D3DCE6;
    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 #D3DCE6;

        &:before {
          content: '';
          height: 6px;
          display: block;
          margin: 0 -10px;
          background-color: #fff;
        }
      }
      @when disabled {
        cursor: default;
        color: #c0ccda;
        pointer-events: none;
      }
    }
  }
}