$name: 'ivue-tooltip';

:root {
  // top
  --#{$name}-popper-top-padding: 5px 0 8px;
  --#{$name}-popper-top-bottom: 3px;
  --#{$name}-popper-top-border-width: 5px 5px 0;

  // left
  --#{$name}-popper-left-padding: 0 8px 0 5px;
  --#{$name}-popper-left-right: 3px;
  --#{$name}-popper-left-border-width: 5px 0 5px 5px;

  // right
  --#{$name}-popper-right-padding: 0 5px 0 8px;
  --#{$name}-popper-right-left: 3px;
  --#{$name}-popper-right-border-width: 5px 5px 5px 0;

  // bottom
  --#{$name}-popper-bottom-padding: 8px 0 5px;
  --#{$name}-popper-bottom-top: 3px;
  --#{$name}-popper-bottom-border-width: 0 5px 5px;

  // inner
  --#{$name}-inner-max-width: 250px;
  --#{$name}-inner-min-height: 34px;
  --#{$name}-inner-padding: 8px 12px;
  --#{$name}-inner-radius: 4px;
  --#{$name}-inner-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

  // light top
  --#{$name}-popper-light-top-border-width: 7px 7px 0;

  // light left
  --#{$name}-popper-light-left-border-width: 7px 0 7px 7px;

  // light right
  --#{$name}-popper-light-right-border-width: 7px 7px 7px 0;

  // light bottom
  --#{$name}-popper-light-bottom-border-width: 0 7px 7px;

  // color
  --#{$name}-inner-bg: rgba(56, 61, 71, 0.9);
  --#{$name}-light-border-color: rgba(56, 61, 71, 0.5);
}

.#{$name} {
  display: inline-block;

  // 描述
  &-rel {
    position: relative;
    width: inherit;
    display: inline-block;
  }

  // 悬浮框
  &-popper {
    display: block;
    visibility: visible;
    font-size: var(--ivue-font-base-size);
    line-height: 1.5;
    z-index: 1060;

    // top
    &[data-popper-placement='top'] {
      padding: var(--#{$name}-popper-top-padding);

      .#{$name}-arrow {
        left: 50%;
        margin-left: -5px;
        bottom: var(--#{$name}-popper-top-bottom);
        border-width: var(--#{$name}-popper-top-border-width);
        border-top-color: var(--#{$name}-inner-bg);
      }
    }

    // top-start
    &[data-popper-placement='top-start'] {
      padding: var(--#{$name}-popper-top-padding);

      .#{$name}-arrow {
        left: 16px;
        bottom: var(--#{$name}-popper-top-bottom);
        border-width: var(--#{$name}-popper-top-border-width);
        border-top-color: var(--#{$name}-inner-bg);
      }
    }

    // top-end
    &[data-popper-placement='top-end'] {
      padding: var(--#{$name}-popper-top-padding);

      .#{$name}-arrow {
        right: 16px;
        bottom: var(--#{$name}-popper-top-bottom);
        border-width: var(--#{$name}-popper-top-border-width);
        border-top-color: var(--#{$name}-inner-bg);
      }
    }

    // left-start
    &[data-popper-placement='left-start'] {
      padding: var(--#{$name}-popper-left-padding);

      .#{$name}-arrow {
        top: 8px;
        right: var(--#{$name}-popper-left-right);
        border-width: var(--#{$name}-popper-left-border-width);
        border-left-color: var(--#{$name}-inner-bg);
      }
    }

    // left
    &[data-popper-placement='left'] {
      padding: var(--#{$name}-popper-left-padding);

      .#{$name}-arrow {
        top: 50%;
        margin-top: -5px;
        right: var(--#{$name}-popper-left-right);
        border-width: var(--#{$name}-popper-left-border-width);
        border-left-color: var(--#{$name}-inner-bg);
      }
    }

    // left-end
    &[data-popper-placement='left-end'] {
      padding: var(--#{$name}-popper-left-padding);

      .#{$name}-arrow {
        bottom: 8px;
        right: var(--#{$name}-popper-left-right);
        border-width: var(--#{$name}-popper-left-border-width);
        border-left-color: var(--#{$name}-inner-bg);
      }
    }

    // right-start
    &[data-popper-placement='right-start'] {
      padding: var(--#{$name}-popper-right-padding);

      .#{$name}-arrow {
        top: 8px;
        left: var(--#{$name}-popper-right-left);
        border-width: var(--#{$name}-popper-right-border-width);
        border-right-color: var(--#{$name}-inner-bg);
      }
    }

    // right
    &[data-popper-placement='right'] {
      padding: var(--#{$name}-popper-right-padding);

      .#{$name}-arrow {
        top: 50%;
        margin-top: -5px;
        left: var(--#{$name}-popper-right-left);
        border-width: var(--#{$name}-popper-right-border-width);
        border-right-color: var(--#{$name}-inner-bg);
      }
    }

    // right-end
    &[data-popper-placement='right-end'] {
      padding: var(--#{$name}-popper-right-padding);

      .#{$name}-arrow {
        bottom: 8px;
        left: var(--#{$name}-popper-right-left);
        border-width: var(--#{$name}-popper-right-border-width);
        border-right-color: var(--#{$name}-inner-bg);
      }
    }

    // bottom-start
    &[data-popper-placement='bottom-start'] {
      padding: var(--#{$name}-popper-bottom-padding);

      .#{$name}-arrow {
        left: 16px;
        top: var(--#{$name}-popper-bottom-top);
        border-width: var(--#{$name}-popper-bottom-border-width);
        border-bottom-color: var(--#{$name}-inner-bg);
      }
    }

    // bottom
    &[data-popper-placement='bottom'] {
      padding: var(--#{$name}-popper-bottom-padding);

      .#{$name}-arrow {
        left: 50%;
        margin-left: -5px;
        top: var(--#{$name}-popper-bottom-top);
        border-width: var(--#{$name}-popper-bottom-border-width);
        border-bottom-color: var(--#{$name}-inner-bg);
      }
    }

    // bottom-end
    &[data-popper-placement='bottom-end'] {
      padding: var(--#{$name}-popper-bottom-padding);

      .#{$name}-arrow {
        right: 16px;
        top: var(--#{$name}-popper-bottom-top);
        border-width: var(--#{$name}-popper-bottom-border-width);
        border-bottom-color: var(--#{$name}-inner-bg);
      }
    }
  }

  // inner
  &-inner {
    max-width: var(--#{$name}-inner-max-width);
    min-height: var(--#{$name}-inner-min-height);
    padding: var(--#{$name}-inner-padding);
    color: var(--ivue-white-color);
    text-align: left;
    text-decoration: none;
    background-color: var(--#{$name}-inner-bg);
    border-radius: var(--#{$name}-inner-radius);
    box-shadow: var(--#{$name}-inner-shadow);
    word-break: break-all;
    overflow: hidden;
  }

  // arrow
  &-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  // light
  &-light {
    .#{$name}-inner {
      background-color: var(--ivue-white-color);
      color: var(--ivue-title-color);
    }

    .#{$name}-arrow {
      &:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        z-index: -1;
      }
    }

    // top
    &[data-popper-placement='top'] {
      .#{$name}-arrow {
        border-top-color: var(--ivue-white-color);

        &:after {
          left: 50%;
          margin-left: -7px;
          bottom: 0;
          border-width: var(--#{$name}-popper-light-top-border-width);
          border-top-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // top-start
    &[data-popper-placement='top-start'] {
      .#{$name}-arrow {
        border-top-color: var(--ivue-white-color);

        &:after {
          left: -7px;
          bottom: 0;
          border-width: var(--#{$name}-popper-light-top-border-width);
          border-top-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // top-end
    &[data-popper-placement='top-end'] {
      .#{$name}-arrow {
        border-top-color: var(--ivue-white-color);

        &:after {
          right: -7px;
          bottom: 0;
          border-width: var(--#{$name}-popper-light-top-border-width);
          border-top-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // left-start
    &[data-popper-placement='left-start'] {
      .#{$name}-arrow {
        border-left-color: var(--ivue-white-color);

        &:after {
          top: -7px;
          right: 0;
          border-width: var(--#{$name}-popper-light-left-border-width);
          border-left-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // left
    &[data-popper-placement='left'] {
      .#{$name}-arrow {
        border-left-color: var(--ivue-white-color);

        &:after {
          top: 50%;
          margin-top: -7px;
          right: 0;
          border-width: var(--#{$name}-popper-light-left-border-width);
          border-left-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // left-end
    &[data-popper-placement='left-end'] {
      .#{$name}-arrow {
        border-left-color: var(--ivue-white-color);

        &:after {
          bottom: -7px;
          right: 0;
          border-width: var(--#{$name}-popper-light-left-border-width);
          border-left-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // right-start
    &[data-popper-placement='right-start'] {
      .#{$name}-arrow {
        border-right-color: var(--ivue-white-color);

        &:after {
          top: -7px;
          left: 0;
          border-width: var(--#{$name}-popper-light-right-border-width);
          border-right-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // right
    &[data-popper-placement='right'] {
      .#{$name}-arrow {
        border-right-color: var(--ivue-white-color);

        &:after {
          top: 50%;
          margin-top: -7px;
          left: 0;
          border-width: var(--#{$name}-popper-light-right-border-width);
          border-right-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // right-end
    &[data-popper-placement='right-end'] {
      .#{$name}-arrow {
        border-right-color: var(--ivue-white-color);

        &:after {
          bottom: -7px;
          left: 0;
          border-width: var(--#{$name}-popper-light-right-border-width);
          border-right-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // bottom-start
    &[data-popper-placement='bottom-start'] {
      .#{$name}-arrow {
        border-bottom-color: var(--ivue-white-color);

        &:after {
          left: -7px;
          top: 0;
          border-width: var(--#{$name}-popper-light-bottom-border-width);
          border-bottom-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // bottom
    &[data-popper-placement='bottom'] {
      .#{$name}-arrow {
        border-bottom-color: var(--ivue-white-color);

        &:after {
          left: 50%;
          margin-left: -7px;
          top: 0;
          border-width: var(--#{$name}-popper-light-bottom-border-width);
          border-bottom-color: var(--#{$name}-light-border-color);
        }
      }
    }

    // bottom-end
    &[data-popper-placement='bottom-end'] {
      .#{$name}-arrow {
        border-bottom-color: var(--ivue-white-color);

        &:after {
          right: -7px;
          top: 0;
          border-width: var(--#{$name}-popper-light-bottom-border-width);
          border-bottom-color: var(--#{$name}-light-border-color);
        }
      }
    }
  }
}

.fade-tooltip-enter-active,
.fade-tooltip-leave-active {
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

.fade-tooltip-enter-from,
.fade-tooltip-leave-to {
  opacity: 0;
}