@import "./src/common/var.less";
@import "./src/common/mixins.less";

@tooltip-css-prefix: ~"@{css-prefix}tooltip";
@tooltip-arrow-css-prefix: ~"@{css-prefix}tooltip-arrow";

.tooltip-type(@tooltip-bg; @tooltip-color; @tooltip-shadow; @tooltip-border-color; @tooltip-border-bg) {
  .@{tooltip-css-prefix}-inner {
    background-color: @tooltip-bg;
    color: @tooltip-color;
    -webkit-box-shadow: @tooltip-shadow;
    box-shadow: @tooltip-shadow;
    border: 1px solid @tooltip-border-color;
  }

  &[x-placement^="top"] .@{tooltip-arrow-css-prefix},
  &[x-placement^="top-start"] .@{tooltip-arrow-css-prefix},
  &[x-placement^="top-end"] .@{tooltip-arrow-css-prefix}{
    border-top-color: @tooltip-border-color;
    &::after {
      border-top-color: @tooltip-border-bg;
    }
  }

  &[x-placement^="right"] .@{tooltip-arrow-css-prefix},
  &[x-placement^="right-start"] .@{tooltip-arrow-css-prefix},
  &[x-placement^="right-end"] .@{tooltip-arrow-css-prefix}{
    border-right-color: @tooltip-border-color;
    &::after {
      border-right-color: @tooltip-border-bg;
    }
  }

  &[x-placement^="bottom"] .@{tooltip-arrow-css-prefix},
  &[x-placement^="bottom-start"] .@{tooltip-arrow-css-prefix},
  &[x-placement^="bottom-end"] .@{tooltip-arrow-css-prefix}{
    border-bottom-color: @tooltip-border-color;
    &::after {
      border-bottom-color: @tooltip-border-bg;
    }
  }

  &[x-placement^="left"] .@{tooltip-arrow-css-prefix},
  &[x-placement^="left-start"] .@{tooltip-arrow-css-prefix},
  &[x-placement^="left-end"] .@{tooltip-arrow-css-prefix}{
    border-left-color: @tooltip-border-color;
    &::after {
      border-left-color: @tooltip-border-bg;
    }
  }
}

.@{tooltip-css-prefix} {
  .mixin-default;
  .mixin-border-box;
  line-height: 1.4;
  position: absolute;
  display: block;
  visibility: visible;
  animation: opacity .5s;

  &-fade-in-enter{
    &-active {
      animation: fade-in @fade-duration;
    }

    &-to {
    }
  }

  &-fade-in-leave{
    &-active {
      animation: fade-in @fade-duration reverse;
    }

    &-to {
    }
  }

  &[x-placement^="top"] {
    padding-bottom: 12px;
  }
  &[x-placement^="bottom"] {
    padding-top: 12px;
  }
  &[x-placement^="left"] {
    padding-right: 12px;
  }
  &[x-placement^="right"] {
    padding-left: 12px;
  }

  &-rel {
    display: inline-block;
  }
  &-type {
    &-dark {
      .tooltip-type(@tooltip-dark-bg; @tooltip-dark-color; @tooltip-dark-shadow; @tooltip-dark-border-color; @tooltip-dark-border-bg);
      .@{tooltip-css-prefix}-inner-title {
        border-bottom: 1px dotted #999999;
      }
    }
    &-light {
      .tooltip-type(@tooltip-light-bg; @tooltip-light-color; @tooltip-light-shadow; @tooltip-light-border-color; @tooltip-light-border-bg);
      .@{tooltip-css-prefix}-inner-title{
        border-bottom: 1px dotted #dddddd;
      }
    }
  }
  &-inner {
    .mixin-scrollbar;
    .mixin-h-scroll;
    border-radius: @tooltip-radius;

    &-content {
      .mixin-wordwrap;
      padding: @tooltip-default-size;
    }

    &.is-popover{
      padding: @popover-default-size;

      .@{tooltip-css-prefix}-inner{
        &-title {
          font-size: @popover-default-title-font-size;
          padding: @popover-default-title-size;
        }

        &-content {
          .mixin-wordwrap;
          line-height: 1.6;
          padding: @popover-default-content-size;
        }

        &-bottom {
          padding: @popover-default-button-size;
          &.is-center {
            text-align: center;
          }
          &.is-right {
            text-align: right;
          }
        }
      }
    }
  }

  .@{tooltip-arrow-css-prefix},
  .@{tooltip-arrow-css-prefix}::after {
    .mixin-border-box;
    content: " ";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: solid transparent;
  }

  .@{tooltip-arrow-css-prefix} {
    z-index: 1;
    border-width: 10px;
  }
  .@{tooltip-arrow-css-prefix}::after {
    z-index: 0;
    border-width: 8px;
  }

  .@{tooltip-arrow-css-prefix}-top {
    bottom: 5px;
    border-width: 8px 8px 0 8px;
    &::after {
      bottom: -7px;
      left: -8px;
    }
  }

  .@{tooltip-arrow-css-prefix}-right {
    left: 0px;
    border-width: 8px 8px 8px 0;
    &::after {
      bottom: -8px;
      left: -7px;
    }
  }

  .@{tooltip-arrow-css-prefix}-bottom {
    top: 5px;
    border-width: 0 8px 8px 8px;
    &::after {
      top: -7px;
      left: -8px;
    }
  }

  .@{tooltip-arrow-css-prefix}-left {
    right: 0px;
    border-width: 8px 0 8px 8px;
    &::after {
      bottom: -8px;
      right: -7px;
    }
  }
}

@keyframes fade-in{
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in{
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.we-fade-in-linear-enter-active,
.we-fade-in-linear-leave-active {
  transition: opacity .2s linear !important;
}
.we-fade-in-linear-enter,
.we-fade-in-linear-leave,
.we-fade-in-linear-leave-active {
  opacity: 0;
}