@import '../../style/theme/color';
@import '../../style/theme/shadow';
@import '../../style/theme/corner';
@import '../../style/theme/z-index';

.popper {
  position: relative;
  width: 100%;

  .popper-activator {
    width: 100%;
  }
}

.popper-container {
  &.devui-popover-container-right,
  &.devui-popover-container-left,
  &.devui-popover-container-top {
    display: flex !important;

    & > .devui-dropdown-menu-wrap {
      display: inline-block;
    }

    & > .popper-append-area {
      display: inline-block;
      overflow: auto;
    }

    .popper-append-area {
      border-left: 1px solid $devui-dividing-line;

      &::before {
        display: none;
      }
    }
  }

  &.devui-popover-container-top {
    flex-direction: column-reverse;
  }

  &.devui-popover-container-left .popper-append-area {
    order: -1;
  }

  display: none;
  z-index: $devui-z-index-dropdown;
  position: absolute;
  box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow;
  background: $devui-connected-overlay-bg;
  border: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: $devui-border-radius;

  .popper-container-scrollable {
    min-height: 40px;
    width: 100%;
    overflow: auto;
    overflow: overlay;
  }

  &.fluid {
    width: 100%;
  }
}

// 此处设置默认宽度，使用组件时可以自定义宽度，尽量不要入侵组件内部样式。
:host {
  display: block;
}
