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

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;
/*! rtl:begin:ignore */
.#{$hashClassName}.#{$class-prefix}-popover {
  $-z-index: var(--popover-z-index, 1030);

  $-background: $m-color-bg-white;
  $-arrow-size: $m-s-8;
  $-content-padding: $m-s-8 $m-s-12;
  display: block;
  width: min-content;
  bottom: auto;

  color: #333;
  position: absolute;
  top: 0;
  left: 0;
  z-index: $-z-index;
  white-space: normal;
  text-align: left;
  cursor: auto;
  user-select: text;
  animation: none;

  &::after {
    position: absolute;
    background: fade(#fff, 1%);
    content: '';
  }
  &-hidden {
    display: none;
  }

  .#{$class-prefix}-popover {
    &-inner {
      background-color: $-background;
      background-clip: padding-box;
      border-radius: $m-s-8;
      box-shadow: 0 0 $m-s-30 0 rgba(51, 51, 51, 0.2);
      font-size: $m-s-13;
      width: max-content;
      min-width: $m-s-32;
      max-width: calc(100vw - #{$m-s-24});
      overflow-y: hidden;
      &-content {
        padding: $-content-padding;
      }
    }

    &-arrow {
      position: absolute;
      color: $m-color-bg-white;
      display: block;
      height: $-arrow-size;
      width: $-arrow-size;
      overflow: visible;
      background: transparent;
    }

    &-arrow-icon {
      display: block;
      height: $-arrow-size;
      width: $m-s-15;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(var(--arrow-icon-rotate));
    }
    .#{$class-prefix}-popover-arrow {
      color: $-background;
    }
  }

  &-dark {
    color: $m-color-bg-white;
    .#{$class-prefix}-popover-inner {
      background: rgba(0, 0, 0, 0.75);
    }
    .#{$class-prefix}-popover-arrow {
      // color: rgba(0, 0, 0, 0.75);
      &-icon {
        color: rgba(0, 0, 0, 0.75);
      }
    }
    .#{$class-prefix}-popover-inner {
      box-shadow: none;
    }
  }
}
/*! rtl:end:ignore */