@import "../common/typography/text.mixins";

:host {
  .popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: z(overlay);
    display: none;
    width: 40rem;
    padding: 2rem;
    background-color: var(--background-bright, $white);
    color: var(--text-main, $dark);
    background-clip: padding-box;
    box-shadow: $shadow-popover;

    &.top {
      margin-top: -1rem;
      &.virtual-area {
        bottom: -1.1rem;
      }
    }
    &.right {
      margin-left: 1rem;
      &.virtual-area {
        left: -1.1rem;
      }
    }
    &.bottom {
      margin-top: 1rem;
      &.virtual-area {
        top: -1.1rem;
      }
    }
    &.left {
      margin-left: -1rem;
      &.virtual-area {
        right: -1.1rem;
      }
    }
    .virtual-area {
      height: 1.1rem;
      width: 100%;
      position: absolute;
    } // Arrows
    // .arrow is outer, .arrow:before is inner
    &.top > .arrow {
      margin-left: -9px;
      border-bottom-width: 0;
      border-top-color: rgba(0, 0, 0, 0.1);
      bottom: -9px;
      &:before {
        content: " ";
        bottom: 1px;
        margin-left: -1rem;
        border-bottom-width: 0;
        border-top-color: var(--background-bright, $white);
      }
      &.center {
        left: 50%;
      }
      &.left {
        left: 91%;
      }
      &.right {
        left: 9%;
      }
    }
    &.right > .arrow {
      left: -9px;
      margin-top: -9px;
      border-left-width: 0;
      border-right-color: rgba(0, 0, 0, 0.1);
      &:before {
        content: " ";
        left: 1px;
        bottom: -1rem;
        border-left-width: 0;
        border-right-color: var(--background-bright, $white);
      }
      &.center {
        top: 50%;
      }
      &.top {
        top: 91%;
      }
      &.bottom {
        top: 9%;
      }
    }
    &.bottom > .arrow {
      margin-left: -9px;
      border-top-width: 0;
      border-bottom-color: rgba(0, 0, 0, 0.1);
      top: -9px;
      &:before {
        content: " ";
        top: 1px;
        margin-left: -1rem;
        border-top-width: 0;
        border-bottom-color: var(--background-bright, $white);
      }
      &.center {
        left: 50%;
      }
      &.left {
        left: 91%;
      }
      &.right {
        left: 9%;
      }
    }
    &.left > .arrow {
      right: -9px;
      margin-top: -9px;
      border-right-width: 0;
      border-left-color: rgba(0, 0, 0, 0.1);
      &:before {
        content: " ";
        right: 1px;
        border-right-width: 0;
        border-left-color: var(--background-bright, $white);
        bottom: -1rem;
      }
      &.center {
        top: 50%;
      }
      &.top {
        top: 91%;
      }
      &.bottom {
        top: 9%;
      }
    }
  }
  .popover > .arrow {
    border-width: 9px;
    &,
    &:before {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }
    &:before {
      border-width: 1rem;
      content: "";
    }
  }
  .popover-title {
    @include novo-title-text();
    margin-bottom: 1rem;
  }
  .popover-content {
    @include novo-body-text();
    .popover-content-text {
      white-space: pre-line;
    }
  }
}