@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {
  @b popover {
    position: absolute;
    background: var(--popover-fill);
    min-width: 150px;
    border-radius: 2px;
    border: 1px solid var(--popover-border-color);
    padding: var(--popover-padding);
    z-index: var(--index-popper);
    font-size: var(--popover-font-size);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
                0px 0px 6px 0px rgba(0, 0, 0, .04);

    .popper__arrow,
    .popper__arrow::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    .popper__arrow {
      border-width: var(--popover-arrow-size);
    }

    .popper__arrow::after {
      content: " ";
      border-width: var(--popover-arrow-size);
    }

    &[x-placement^="top"] {
      margin-bottom: calc(var(--popover-arrow-size) + 6);
    }

    &[x-placement^="top"] .popper__arrow {
      bottom: -var(--popover-arrow-size);
      left: 50%;
      margin-right: calc(var(--tooltip-arrow-size) / 2);
      border-top-color: var(--popover-border-color);
      border-bottom-width: 0;

      &::after {
        bottom: 1px;
        margin-left: -var(--popover-arrow-size);
        border-top-color: var(--popover-fill);
        border-bottom-width: 0;
      }
    }

    &[x-placement^="bottom"] {
      margin-top: calc(var(--popover-arrow-size) + 6);
    }

    &[x-placement^="bottom"] .popper__arrow {
      top: -var(--popover-arrow-size);
      left: 50%;
      margin-right: calc(var(--tooltip-arrow-size) / 2);
      border-top-width: 0;
      border-bottom-color: var(--popover-border-color);

      &::after {
        top: 1px;
        margin-left: -var(--popover-arrow-size);
        border-top-width: 0;
        border-bottom-color: var(--popover-fill);
      }
    }

    &[x-placement^="right"] {
      margin-left: calc(var(--popover-arrow-size) + 6);
    }

    &[x-placement^="right"] .popper__arrow {
      top: 50%;
      left: -var(--popover-arrow-size);
      margin-bottom: calc(var(--tooltip-arrow-size) / 2);
      border-right-color: var(--popover-border-color);
      border-left-width: 0;

      &::after {
        bottom: -var(--popover-arrow-size);
        left: 1px;
        border-right-color: var(--popover-fill);
        border-left-width: 0;
      }
    }

    &[x-placement^="left"] {
      margin-right: calc(var(--popover-arrow-size) + 6);
    }

    &[x-placement^="left"] .popper__arrow {
      top: 50%;
      right: -var(--popover-arrow-size);
      margin-bottom: calc(var(--tooltip-arrow-size) / 2);
      border-right-width: 0;
      border-left-color: var(--popover-border-color);

      &::after {
        right: 1px;
        bottom: -var(--popover-arrow-size);
        margin-left: -var(--popover-arrow-size);
        border-right-width: 0;
        border-left-color: var(--popover-fill);
      }
    }

    @e title {
      color: var(--popover-title-color);
      font-size: var(--popover-title-font-size);
      line-height: 1;
      margin-bottom: 9px;
    }
  }
}