@import url(../var.less);

@dropdown-menu-prefix: ~"@{prefix}dropdown-menu";

.@{dropdown-menu-prefix}{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 10px 0;
  margin: 5px 0;
  background-color: @dropdown-menu-background-color;
  border: @dropdown-menu-border;
  border-radius: @dropdown-menu-border-radius;
  box-shadow: @dropdown-menu-box-shadow;

  &__item{
    list-style: none;
    line-height: 36px;
    padding: 0 20px;
    margin: 0;
    font-size: @dropdown-font-size;
    color: @dropdown-font-color;
    cursor: pointer;
    outline: none;

    &:not(.is-disabled):hover, &:focus {
      background-color: @dropdown-menuItem-hover-fill;
    }

    i {
      margin-right: 5px;
    }

    &--divided {
      @divided-offset: 6px;

      position: relative;
      margin-top: @divided-offset;
      padding: 0;
      margin: 6px 20px 0;
      border-top: 1px dashed @border-lighter-color;

      &:before {
        content: '';
        height: @divided-offset;
        display: block;
        margin: 0 -20px;
        background-color: @color-white;
      }
    }

    &.is-disabled {
      cursor: default;
      color: @disabled-font-color;
      pointer-events: none;
    }
  }

  &--medium {
    padding: 6px 0;

    &__item {
      line-height: @dropdown-menu-medium-line-height;
      padding: @dropdown-menu-medium-padding;
      font-size: @dropdown-menu-medium-font-size;

      &.w-dropdown-menu__item--divided {
        @divided-offset: 6px;
        margin-top: @divided-offset;

        &:before {
          height: @divided-offset;
          margin: 0 -17px;
        }
      }
    }
  }

  &--small {
    padding: 6px 0;

    &__item {
      line-height: @dropdown-menu-small-line-height;
      padding: @dropdown-menu-small-padding;
      font-size: @dropdown-menu-small-font-size;

      &.w-dropdown-menu__item--divided {
        @divided-offset: 4px;
        margin-top: @divided-offset;

        &:before {
          height: @divided-offset;
          margin: 0 -15px;
        }
      }
    }
  }
}