@import 'mixins/mixins';
@import 'common/var';

@include b(popover) {
  &.el-popper {
    background: $--popover-background-color;
    min-width: 150px;
    border-radius: 4px;
    border: 1px solid $--popover-border-color;
    padding: $--popover-padding;
    z-index: $--index-popper;
    color: $--color-text-regular;
    line-height: 1.4;
    text-align: justify;
    font-size: $--popover-font-size;
    box-shadow: $--box-shadow-light;
    word-break: break-all;

    &.el-popper[role="tooltip"] {
      border: none;
      .el-popper__arrow::before {
        border: none;
      }
    }

    @include m(plain) {
      padding: $--popover-padding-large;
    }

    @include e(title) {
      color: $--popover-title-font-color;
      font-size: $--popover-title-font-size;
      line-height: 1;
      margin-bottom: 12px;
    }

    @include e(reference) {
      &:focus:not(.focusing),
      &:focus:hover {
        outline-width: 0;
      }
    }

    &:focus:active,
    &:focus {
      outline-width: 0;
    }
  }
}