@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(popover) {
  @include e(wrapper) {
    display: block;
    position: relative;
  }
  @include e(content) {
    transition:
      background-color 0.3s getCssVar("bezier", "1"),
      box-shadow 0.3s getCssVar("bezier", "1");
    position: relative;
  }
  @include e(content-custom) {
    background-color: getCssVar("color", "bg-3");
    box-shadow: getCssVar("shadow", "1");
    padding: 12px;
    border-radius: getCssVar("radius", "medium");
    border: 1px solid getCssVar("color", "fill-3");
  }
  @include e(arrow) {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: getCssVar("color", "bg-3");
    border-color: getCssVar("color", "fill-3");
    &:before {
      content: "";
      visibility: visible;
      position: absolute;
      width: 8px;
      height: 8px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      border-color: inherit;
      background-color: inherit;
    }
  }
  [data-popper-arrow] {
    visibility: hidden;
  }
  [data-popper-placement="top"] {
    @include child-be(popover, content) {
      transform-origin: bottom center;
      @include child-be(popover, arrow) {
        bottom: -4px;
        &:before {
          border-right-width: 1px;
          border-right-style: solid;
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }
      }
    }
  }
  [data-popper-placement="top-start"] {
    @include child-be(popover, content) {
      transform-origin: bottom left;
      @include child-be(popover, arrow) {
        bottom: -4px;
        &:before {
          border-right-width: 1px;
          border-right-style: solid;
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }
      }
    }
  }
  [data-popper-placement="top-end"] {
    @include child-be(popover, content) {
      transform-origin: bottom right;
      @include child-be(popover, arrow) {
        bottom: -4px;
        &:before {
          border-right-width: 1px;
          border-right-style: solid;
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }
      }
    }
  }
  [data-popper-placement="bottom"] {
    @include child-be(popover, content) {
      transform-origin: top center;
      @include child-be(popover, arrow) {
        top: -4px;
        &:before {
          border-left-width: 1px;
          border-left-style: solid;
          border-top-width: 1px;
          border-top-style: solid;
        }
      }
    }
  }
  [data-popper-placement="bottom-start"] {
    @include child-be(popover, content) {
      transform-origin: top left;
      @include child-be(popover, arrow) {
        top: -4px;
        &:before {
          border-left-width: 1px;
          border-left-style: solid;
          border-top-width: 1px;
          border-top-style: solid;
        }
      }
    }
  }
  [data-popper-placement="bottom-end"] {
    @include child-be(popover, content) {
      transform-origin: top right;
      @include child-be(popover, arrow) {
        top: -4px;
        &:before {
          border-left-width: 1px;
          border-left-style: solid;
          border-top-width: 1px;
          border-top-style: solid;
        }
      }
    }
  }
  [data-popper-placement="left"] {
    @include child-be(popover, content) {
      transform-origin: right center;
      @include child-be(popover, arrow) {
        right: -4px;
        &:before {
          border-right-width: 1px;
          border-right-style: solid;
          border-top-width: 1px;
          border-top-style: solid;
        }
      }
    }
  }
  [data-popper-placement="left-start"] {
    @include child-be(popover, content) {
      transform-origin: right top;
      @include child-be(popover, arrow) {
        right: -4px;
        &:before {
          border-right-width: 1px;
          border-right-style: solid;
          border-top-width: 1px;
          border-top-style: solid;
        }
      }
    }
  }
  [data-popper-placement="left-end"] {
    @include child-be(popover, content) {
      transform-origin: right bottom;
      @include child-be(popover, arrow) {
        right: -4px;
        &:before {
          border-right-width: 1px;
          border-right-style: solid;
          border-top-width: 1px;
          border-top-style: solid;
        }
      }
    }
  }
  [data-popper-placement="right"] {
    @include child-be(popover, content) {
      transform-origin: left center;
      @include child-be(popover, arrow) {
        left: -4px;
        &:before {
          border-left-width: 1px;
          border-left-style: solid;
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }
      }
    }
  }
  [data-popper-placement="right-start"] {
    @include child-be(popover, content) {
      transform-origin: left top;
      @include child-be(popover, arrow) {
        left: -4px;
        &:before {
          border-left-width: 1px;
          border-left-style: solid;
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }
      }
    }
  }
  [data-popper-placement="right-end"] {
    @include child-be(popover, content) {
      transform-origin: left bottom;
      @include child-be(popover, arrow) {
        left: -4px;
        &:before {
          border-left-width: 1px;
          border-left-style: solid;
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }
      }
    }
  }

  .popover-fade-enter-to,
  .popover-fade-leave-from {
    opacity: 1;
    transform: scale(1);
  }

  .popover-fade-enter-from,
  .popover-fade-leave-to {
    opacity: 0;
    transform: scale(0.85);
  }
  .popover-fade-enter-active {
    transition:
      box-shadow 0.3s getCssVar("bezier", "1"),
      background-color 0.3s getCssVar("bezier", "1"),
      color 0.3s getCssVar("bezier", "1"),
      opacity 0.15s getCssVar("bezier", "out"),
      transform 0.15s getCssVar("bezier", "out");
  }
  .popover-fade-leave-active {
    transition:
      box-shadow 0.3s getCssVar("bezier", "1"),
      background-color 0.3s getCssVar("bezier", "1"),
      color 0.3s getCssVar("bezier", "1"),
      opacity 0.15s getCssVar("bezier", "in"),
      transform 0.15s getCssVar("bezier", "in");
  }
}