@import '../var.less';

.f-contextmenu-item {
  box-sizing: border-box;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  position: relative;
  color: @gray-70;
  background: transparent;
  &:hover {
    color: @gray-70;
    background: @gray-5;
  }
  &-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: @primary-color;
  }
}

.f-contextmenu-item-active {
  color: @gray-70;
  background: @gray-8;
  &:hover {
    color: @gray-70;
    background: @gray-8;
  }
}

.f-contextmenu-item-disabled {
  color: @gray-30;
  background: @gray-8;
  &:hover {
    color: @gray-30;
    background: @gray-8;
  }
}

.f-contextmenu-item-danger {
  color: @dangerous-color;
  background: transparent;
  &:hover {
    color: @dangerous-color;
    background: #fff5f2;
  }
}

.f-contextmenu-item-split {
  margin-top: 9px;
  &::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 12px;
    width: calc(100% - 24px);
    height: 1px;
    background: @gray-10;
  }
}