@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

.#{$class-prefix}-popover-menu {
  $-border-color: $m-color-bg-light;

  &-list {
    overflow: hidden;
    min-width: $m-s-120;
  }
  &-list-inner {
    margin-top: -$m-s-1;
  }

  &-item {
    display: flex;
    padding-left: $m-s-20;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    &-icon {
      flex: none;
      padding-right: $m-s-8;
      font-size: $m-s-20;
    }
    &-text {
      flex: auto;
      padding: $m-s-14 $m-s-20 $m-s-14 0;
      border-top: solid $m-s-1 $-border-color;
    }
    &-disabled {
      > * {
        opacity: 0.4;
      }
      cursor: not-allowed;
    }
    &:active:not(.#{$class-prefix}-popover-menu-item-disabled) {
      background-color: $-border-color;
      &::after {
        content: ' ';
        display: block;
        position: absolute;
        width: 100%;
        bottom: -$m-s-1;
        left: 0;
        border-bottom: solid $m-s-1 $-border-color;
      }
    }
  }
}

.#{$class-prefix}-popover.#{$class-prefix}-popover-dark {
  &.#{$class-prefix}-popover-menu {
    $-border-color: $m-color-text-title2;
    background: rgba(0, 0, 0, 0.8);
  }
}