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

@component-namespace el {
  @b tooltip {
    @e popper {
      position: absolute;
      border-radius: 4px;
      padding: var(--tooltip-padding);
      z-index: var(--index-popper);
      font-size: var(--tooltip-font-size);
      line-height: 1.2;

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

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

      .popper__arrow::after {
        content: " ";
        border-width: 5px;
      }

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

      &[x-placement^="top"] .popper__arrow {
        bottom: -var(--tooltip-arrow-size);
        border-top-color: var(--tooltip-border-color);
        border-bottom-width: 0;

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

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

      &[x-placement^="bottom"] .popper__arrow {
        top: -var(--tooltip-arrow-size);
        border-top-width: 0;
        border-bottom-color: var(--tooltip-border-color);

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

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

      &[x-placement^="right"] .popper__arrow {
        left: -var(--tooltip-arrow-size);
        border-right-color: var(--tooltip-border-color);
        border-left-width: 0;

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

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

      &[x-placement^="left"] .popper__arrow {
        right: -var(--tooltip-arrow-size);
        border-right-width: 0;
        border-left-color: var(--tooltip-border-color);

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

      @when dark {
        background: var(--tooltip-fill);
        color: var(--tooltip-color);
      }

      @when light {
        background: var(--tooltip-color);
        border: 1px solid var(--tooltip-fill);

        &[x-placement^="top"] .popper__arrow {
          border-top-color: var(--tooltip-fill);
          &::after {
            border-top-color: var(--tooltip-color);
          }
        }
        &[x-placement^="bottom"] .popper__arrow {
          border-bottom-color: var(--tooltip-fill);
          &::after {
            border-bottom-color: var(--tooltip-color);
          }
        }
        &[x-placement^="left"] .popper__arrow {
          border-left-color: var(--tooltip-fill);
          &::after {
            border-left-color: var(--tooltip-color);
          }
        }
        &[x-placement^="right"] .popper__arrow {
          border-right-color: var(--tooltip-fill);
          &::after {
            border-right-color: var(--tooltip-color);
          }
        }
      }
    }
  }
}