/** @component tooltip */

@include exports('md-tooltip') {
  #{$tooltip__class},
  .#{$tooltip__class} {
    &__text {
      min-width: $tooltip__min-width;
      max-width: $tooltip__max-width;
      padding: $tooltip__padding;
      font-size: $tooltip__font-size;
      line-height: $tooltip__line-height;
      color: $tooltip__color;
      text-align: center;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .#{$prefix}-event-overlay__arrow::after {
      display: none;
    }

    & > .md-event-overlay__children {
      background-color: $tooltip__background-color;
      border: none;
      box-shadow: none;
    }

    &.#{$prefix}-event-overlay--top {
      > .#{$prefix}-event-overlay__arrow {
        margin-top: -$tooltip-arrow__height;
        border-top: $tooltip-arrow__height solid $tooltip__background-color;
      }

      > .#{$prefix}-event-overlay__children {
        margin-top: -$tooltip-arrow__height;
      }
    }

    &.#{$prefix}-event-overlay--left {
      > .#{$prefix}-event-overlay__arrow {
        margin-left: -$tooltip-arrow__height;
        border-left: $tooltip-arrow__height solid $tooltip__background-color;
      }

      > .#{$prefix}-event-overlay__children {
        margin-left: -$tooltip-arrow__height;
      }
    }

    &.#{$prefix}-event-overlay--right {
      > .#{$prefix}-event-overlay__arrow {
        margin-left: 0;
        border-right: $tooltip-arrow__height solid $tooltip__background-color;
      }

      > .#{$prefix}-event-overlay__children {
        margin-left: $tooltip-arrow__height;
      }
    }

    &.#{$prefix}-event-overlay--bottom {
      > .#{$prefix}-event-overlay__arrow {
        margin-top: 0;
        border-bottom: $tooltip-arrow__height solid $tooltip__background-color;
      }

      > .#{$prefix}-event-overlay__children {
        margin-top: $tooltip-arrow__height;
      }
    }
  }
}