@nebular/theme/components/popover/_popover.component.theme.scss

/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin nb-popover-theme {
  nb-popover {
    $arrow-size: nb-theme(popover-arrow-size);

    border: nb-theme(popover-border-width) solid nb-theme(popover-border-color);
    border-radius: nb-theme(popover-border-radius);
    background: nb-theme(popover-background-color);
    box-shadow: nb-theme(popover-shadow);
    color: nb-theme(popover-text-color);

    .primitive-overlay {
      font-family: nb-theme(popover-text-font-family);
      font-size: nb-theme(popover-text-font-size);
      font-weight: nb-theme(popover-text-font-weight);
      line-height: nb-theme(popover-text-line-height);
      padding: nb-theme(popover-padding);
    }

    .arrow {
      border-left: $arrow-size solid transparent;
      border-right: $arrow-size solid transparent;
      border-bottom: $arrow-size solid nb-theme(popover-border-color);

      &::after {
        position: absolute;
        content: ' ';
        width: 0;
        height: 0;
        top: 3px;
        left: calc(50% - #{$arrow-size});
        border-left: $arrow-size solid transparent;
        border-right: $arrow-size solid transparent;
        border-bottom: $arrow-size solid nb-theme(popover-background-color);
        clip-path: inset(0 0 2px);
      }
    }

    &.nb-overlay-bottom .arrow {
      top: calc(-1 * #{$arrow-size} + 1px);
      left: calc(50% - #{$arrow-size});
    }

    &.nb-overlay-bottom-start .arrow {
      top: calc(-1 * #{$arrow-size} + 1px);
      @include nb-ltr(right, $arrow-size);
      @include nb-rtl(left, $arrow-size);
    }

    &.nb-overlay-bottom-end .arrow {
      top: calc(-1 * #{$arrow-size} + 1px);
      @include nb-ltr(left, $arrow-size);
      @include nb-rtl(right, $arrow-size);
    }

    &.nb-overlay-left .arrow {
      right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
      top: calc(50% - #{$arrow-size / 2});
      transform: rotate(90deg);
    }

    &.nb-overlay-start-top .arrow {
      right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
      bottom: $arrow-size;
      transform: rotate(90deg);
    }

    &.nb-overlay-start-bottom .arrow {
      right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
      top: $arrow-size;
      transform: rotate(90deg);
    }

    &.nb-overlay-top .arrow {
      bottom: calc(-1 * #{$arrow-size} + 1px);
      left: calc(50% - #{$arrow-size});
      transform: rotate(180deg);
    }

    &.nb-overlay-top-start .arrow {
      bottom: calc(-1 * #{$arrow-size} + 1px);
      @include nb-ltr(right, $arrow-size);
      @include nb-rtl(left, $arrow-size);
      transform: rotate(180deg);
    }

    &.nb-overlay-top-end .arrow {
      bottom: calc(-1 * #{$arrow-size} + 1px);
      @include nb-ltr(left, $arrow-size);
      @include nb-rtl(right, $arrow-size);
      transform: rotate(180deg);
    }

    &.nb-overlay-right .arrow {
      left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
      top: calc(50% - #{$arrow-size / 2});
      transform: rotate(270deg);
    }

    &.nb-overlay-end-top .arrow {
      left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
      bottom: $arrow-size;
      transform: rotate(270deg);
    }

    &.nb-overlay-end-bottom .arrow {
      left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
      top: $arrow-size;
      transform: rotate(270deg);
    }
  }
}