@import '../tools/functions/core';
@import '../tools/mixins/core';
@import '../settings/tooltip';
@import '../settings/event-overlay';
@import 'event-overlay';

@include exports('cui-tooltip') {
  #{$tooltip__class},
  .#{$tooltip__class} {
    &__text {
      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;
    }

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

    & > .cui-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;
      }
    }
  }
}


/**
* @component tooltips
* @section default
* @html
<div class="row">
  <div class="docs-example docs-example--spacing">
    <span>
      <button class="cui-button cui-button--36" alt="Click" type="button" aria-label="Click">
        <span class="cui-button__children" style="opacity: 1;">Click</span>
      </button>
      <div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--bottom cui-tooltip">
        <div class="cui-event-overlay__arrow" style="left: 345.203px; top: 213px;"></div>
        <div class="cui-event-overlay__children" style="overflow: auto; top: 213px; left: 309px;">
          <span class="cui-tooltip__text">Hello!</span>
        </div>
      </div>
    </span>
  </div>
  <div class="docs-example docs-example--spacing">
    <span>
      <button class="cui-button cui-button--36" alt="MouseEnter" type="button" aria-label="MouseEnter">
        <span class="cui-button__children" style="opacity: 1;">MouseEnter</span>
      </button>
    </span>
  </div>
  <div class="docs-example docs-example--spacing">
    <span>
      <button class="cui-button cui-button--36" alt="Focus" type="button" aria-label="Focus">
        <span class="cui-button__children" style="opacity: 1;">Focus</span>
      </button>
    </span>
  </div>
</div>
*/

/**
* @component tooltips
* @section delay
* @html
<span>
  <button class="cui-button cui-button--36" alt="Delay" type="button" aria-label="Delay">
    <span class="cui-button__children" style="opacity: 1;">Delay</span>
  </button>
  <div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--bottom cui-tooltip">
    <div class="cui-event-overlay__arrow" style="left: 347.539px; top: 363px;"></div>
    <div class="cui-event-overlay__children" style="overflow: auto; top: 363px; left: 309px;">
      <span class="cui-tooltip__text">Delayed!</span>
    </div>
  </div>
</span>
*/


/**
* @component tooltips
* @section direction
* @html
<span>
  <button class="cui-button cui-button--36" alt="Direction" type="button" aria-label="Direction">
    <span class="cui-button__children" style="opacity: 1;">Direction</span>
  </button>
  <div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--right cui-tooltip">
    <div class="cui-event-overlay__arrow" style="left: 387.266px; top: 345px;"></div>
    <div class="cui-event-overlay__children" style="overflow: auto; top: 315.5px; left: 387.266px;">
      <span class="cui-tooltip__text">Hello!</span>
    </div>
  </div>
</span>
*/


/**
* @component tooltips
* @section direction
* @html
<span>
  <button class="cui-button cui-button--36" alt="Content" type="button" aria-label="Content">
    <span class="cui-button__children" style="opacity: 1;">Content</span>
  </button>
  <div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--right cui-tooltip">
    <div class="cui-event-overlay__arrow" style="left: 379.797px; top: 343px;"></div>
    <div class="cui-event-overlay__children" style="overflow: auto; top: 313.5px; left: 379.797px;">
      <span style="color: white; padding: 16px;"> content! </span>
    </div>
  </div>
</span>
*/