.efly-tip {
  @include box();
  padding: $space-mini $space-default;
  word-break: break-all;
  flex-basis: auto;
  @include box-sizing();

  &.tip-primary {
    background: $color-medium-primary;
    color: $color-primary;
  }

  &.tip-success {
    background: $color-medium-success;
    color: $color-success;
  }

  &.tip-warning {
    background: $color-medium-warning;
    color: $color-warning;
  }

  &.tip-danger {
    background: $color-medium-danger;
    color: $color-danger;
  }

  &.tip-info {
    background: $color-medium-info;
    color: $color-info;
  }

  .efly-tip-content {
    @include box();
    @include flex();

    .icon {
      @include box();
      position: relative;
      top: 1px;
      margin-right: $space-mini;
    }
  }

  .efly-checkbox {
    @include box();
    @include flex-center();
    color: $color-text-secondary
  }
}

.efly-tooltip {
  @include box();
  position: relative;
  cursor: pointer;

  &.show {
    .efly-tooltip-content {
      @include box();
    }
  }

  &.hide {

  }


  .efly-tooltip-content {
    z-index: 1000;
    padding: 6px;

    .efly-tooltip-text {
      font-size: $font-small;
      background: $color-light-primary;
      padding: $space-xs $space-mini;
      word-break: break-all;

      position: relative;
      display: flex;
      border-radius: 3px;
    }

    $efly-tooltip-type: (name: "primary", color: $color-primary, background: $color-medium-primary, border: $color-primary),
    (name: "danger", color: $color-danger, background: $color-medium-danger, border: $color-danger),
    (name: "success", color: $color-success, background: $color-medium-success, border: $color-success),
    (name: "warning", color: $color-warning, background: $color-medium-warning, border: $color-warning),
    (name: "info", color: $color-info, background: $color-medium-info, border: $color-info),
    (name: "white", color: $color-text-regular, background: $color-white, border: $color-border-base),;

    @for $i from 1 through length($efly-tooltip-type) {
      $item: nth($efly-tooltip-type, $i);
      $name: map-get($item, name);
      $color: map-get($item, color);
      $background: map-get($item, background);
      $border: map-get($item, border);
      .efly-tooltip-#{$name} {
        background: $background;
        border: 1px solid $border !important;
        color: $color;
        box-shadow: 0 0 5px 0 $color-shadow;

        &.arrow-right, &.arrow-left, &.arrow-top-left, &.arrow-top-right, &.arrow-top, &.arrow-bottom-left, &.arrow-bottom-right, &.arrow-bottom {
          &:before {
            content: '';
            position: absolute;
          }

          &:after {
            content: '';
            position: absolute;
          }
        }

        &.arrow-left {
          &:before {
            top: calc(50% - 5px);
            left: 100%;
            border-left: 7px solid $border;
            border-bottom: 5px solid transparent;
            border-top: 5px solid transparent;
          }

          &:after {
            left: calc(100% - 2px);
            top: calc(50% - 5px);
            border-left: 7px solid $background;
            border-bottom: 5px solid transparent;
            border-top: 5px solid transparent;
          }
        }

        &.arrow-right {
          &:before {
            top: calc(50% - 5px);
            right: 100%;
            border-right: 7px solid $border;
            border-bottom: 5px solid transparent;
            border-top: 5px solid transparent;
          }

          &:after {
            top: calc(50% - 5px);
            right: calc(100% - 2px);
            border-right: 7px solid $background;
            border-bottom: 5px solid transparent;
            border-top: 5px solid transparent;
          }
        }

        &.arrow-top {
          &:before {
            top: 100%;
            left: calc(50% - 5px);
            border-top: 7px solid $border;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }

          &:after {
            top: calc(100% - 2px);
            left: calc(50% - 5px);
            border-top: 7px solid $background;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }
        }

        &.arrow-top-left {
          &:before {
            top: 100%;
            left: 10px;
            border-top: 7px solid $border;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }

          &:after {
            top: calc(100% - 2px);
            left: 10px;
            border-top: 7px solid $background;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }
        }

        &.arrow-top-right {
          &:before {
            top: 100%;
            right: 10px;
            border-top: 7px solid $border;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }

          &:after {
            top: calc(100% - 2px);
            right: 10px;
            border-top: 7px solid $background;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }
        }

        &.arrow-bottom {
          &:before {
            bottom: 100%;
            left: calc(50% - 5px);
            border-bottom: 7px solid $border;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }

          &:after {
            bottom: calc(100% - 2px);
            left: calc(50% - 5px);
            border-bottom: 7px solid $background;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }
        }

        &.arrow-bottom-left {
          &:before {
            bottom: 100%;
            left: 10px;
            border-bottom: 7px solid $border;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }

          &:after {
            bottom: calc(100% - 2px);
            left: 10px;
            border-bottom: 7px solid $background;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }
        }

        &.arrow-bottom-right {
          &:before {
            bottom: 100%;
            right: 10px;
            border-bottom: 7px solid $border;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }

          &:after {
            bottom: calc(100% - 2px);
            right: 10px;
            border-bottom: 7px solid $background;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
          }
        }

      }
    }
    .efly-tooltip-danger {
      box-shadow: unset;
    }

  }

}