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

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

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

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

    .arrow {
      border-left: $arrow-size solid transparent;
      border-right: $arrow-size solid transparent;
      border-bottom: $arrow-size solid el-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 el-theme(popover-background-color);
        clip-path: inset(0 0 2px);
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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