@import '../../style/variable.less';

.popover {
  position: relative;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    display: none;
  }
}

:global {
  :local(.content) {
    position: absolute;
    color: var(--kt-tooltip-foreground);
    background: var(--kt-tooltip-background);
    border-color: var(--notifications-border);
    border-radius: var(--kt-tooltip-borderRadius);
    .overlay-shadow();
    box-shadow: 0 5px 15px 0 var(--widget-shadow);
    padding: 5px 10px;
    z-index: 10001;
    margin-top: -5px;

    &.top {
      &::after {
        position: absolute;
        left: 50%;
        margin-left: -7px;
        top: 100%;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 7px 7px 0 7px;
        border-color: var(--kt-tooltip-background) transparent transparent transparent;
      }

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        height: 15px;
        border-style: solid;
        background: transparent;
        border: 0;
      }
    }
    &.bottom {
      &::after {
        position: absolute;
        left: 50%;
        margin-left: -7px;
        bottom: 100%;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 7px 7px 7px;
        border-color: transparent transparent var(--kt-tooltip-background) transparent;
      }

      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 100%;
        width: 100%;
        height: 15px;
        border-style: solid;
        background: transparent;
        border: 0;
      }
    }
  }
}
