/**
 * Tooltip
 */


.at-tooltip {
  display: inline-block;

  /* element */
  &__trigger {
    display: inline-block;
    position: relative;
  }
  &__popper {
    position: relative;
    max-width: $popover-popper-max-width;
    border: 1px solid $popover-border-color;
    box-shadow: 0 1px 6px $popover-border-color;
    background-color: $black-900;
    border-radius: 4px;
    color: white;
    z-index: $zindex-popover;
    &__top {
      padding-bottom: 10px;
    }
    &__left {
      padding-right: 10px;
    }
  }
  &__title {
    margin: 0;
    padding: $popover-title-padding;
    font-size: $popover-title-font-size;
    word-wrap: break-word;
    border-bottom: 1px solid $popover-title-border-color;
    border-radius: $border-radius-base $border-radius-base 0 0;
    background-color: $popover-title-bg-color;
  }
  &__content {
    padding: $popover-content-padding;
    font-size: $popover-content-font-size;
    line-height: 1.5;
    word-wrap: break-word;
    border-radius: $border-radius-base;
  }
  &__arrow {
    background: $black-900;
    width: $popover-arrow-size;
    height: $popover-arrow-size;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    display: block;
  }

  /* modifier */
  /**
   * Top
   */
  &--top,
  &--topLeft,
  &--topRight {
    margin-bottom: 10px;

    .at-tooltip__arrow {
      left: 50%;
      -webkit-transform: translateX(-50%) rotate(45deg);
      transform: translateX(-50%) rotate(45deg);
      bottom: -$popover-arrow-size / 2;
      box-shadow: 3px 3px 7px $popover-arrow-shadow;
      border-left: 0px;
      border-top: 0px;
    }
  }
  &--topLeft {
    .at-tooltip__arrow {
      left: $popover-arrow-size * 1.5;
    }
  }
  &--topRight {
    .at-tooltip__arrow {
      left: initial;
      right: $popover-arrow-size * 0.8;
    }
  }

  /**
   * Bottom
   */
  &--bottom,
  &--bottomLeft,
  &--bottomRight {
    margin-top: 12px;

    .at-tooltip__arrow {
      left: 50%;
      -webkit-transform: translateX(-50%) rotate(45deg);
      transform: translateX(-50%) rotate(45deg);
      top: -$popover-arrow-size / 2;
      box-shadow: -2px -2px 5px rgba(0, 0, 0, .03);
      border-right: 0px;
      border-bottom: 0px;
    }
  }
  &--bottomLeft {
    .at-tooltip__arrow {
      left: $popover-arrow-size * 1.5;
    }
  }
  &--bottomRight {
    .at-tooltip__arrow {
      left: initial;
      right: $popover-arrow-size * 0.8;
    }
  }

  /**
   * Left
   */
  &--left,
  &--leftTop,
  &--leftBottom {
    margin-right: 10px;

    .at-tooltip__arrow {
      top: 50%;
      right: -$popover-arrow-size / 2;
      -webkit-transform: translateY(-50%) rotate(45deg);
      transform: translateY(-50%) rotate(45deg);
      box-shadow: 2px -2px 7px $popover-arrow-shadow;
      border-left: 0px;
      border-bottom: 0px;
    }
  }
  &--leftTop {
    .at-tooltip__arrow {
      top: $popover-arrow-size * 1.5;
    }
  }
  &--leftBottom {
    .at-tooltip__arrow {
      top: initial;
      bottom: $popover-arrow-size * 0.8;
    }
  }

  /**
   * Right
   */
  &--right,
  &--rightTop,
  &--rightBottom {
    margin-left: 12px;

    .at-tooltip__arrow {
      top: 50%;
      left: -$popover-arrow-size / 2;
      -webkit-transform: translatey(-50%) rotate(45deg);
      transform: translateY(-50%) rotate(45deg);
      box-shadow: -3 3px 6px $popover-border-color;
      border-top: 0px;
      border-right: 0px;
    }
  }
  &--rightTop {
    .at-tooltip__arrow {
      top: $popover-arrow-size * 1.5;
    }
  }
  &--rightBottom {
    .at-tooltip__arrow {
      top: initial;
      bottom: $popover-arrow-size * 0.8;
    }
  }
}