//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/vars';
@import '../../globals/scss/layer';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/css--typography';

@mixin tooltip {
  .#{$prefix}--tooltip--icon {
    display: flex;
    align-items: center;
  }

  .#{$prefix}--tooltip__label {
    @include font-family;
    @include typescale('epsilon');
    display: inline-flex;
    align-items: center;
    color: $text-01;
    font-weight: normal;

    .#{$prefix}--tooltip__trigger {
      margin-left: $spacing-xs;
    }
  }

  .#{$prefix}--tooltip__trigger {
    @include button-reset($width: false);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;

    &:focus {
      @include focus-outline('border');
      fill: $hover-primary;
    }

    path,
    polygon,
    circle {
      fill: $brand-01;
    }

    &:hover,
    &:focus {
      color: $text-01;

      path,
      polygon,
      circle {
        fill: $hover-primary;
      }
    }
  }

  .#{$prefix}--tooltip__label--bold {
    font-weight: 600;
  }

  .#{$prefix}--tooltip {
    @include layer('overlay');
    @include reset;
    position: absolute;
    display: none;
    max-width: rem(240px);
    background: $ui-01;
    margin-top: $spacing-2xs;
    padding: $spacing-md;
    border: 1px solid $ui-03;
    border-radius: rem(4px);
    z-index: z('floating');
    word-wrap: break-word;
    color: $text-01;

    p {
      @include font-family;
      @include typescale('zeta');
    }

    .#{$prefix}--tooltip__footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 1rem;
    }

    .#{$prefix}--tooltip__caret {
      position: absolute;
      background: $ui-01;
      left: 0;
      top: rem(-5px);
      right: 0;
      transform: rotate(-135deg);
      width: 0.6rem;
      height: 0.6rem;
      border-right: 1px solid $ui-03;
      border-bottom: 1px solid $ui-03;
      margin: 0 auto;
      content: '';
    }

    &[data-floating-menu-direction='left'] {
      .#{$prefix}--tooltip__caret {
        left: auto;
        top: 50%;
        right: rem(-5px);
        transform: rotate(-45deg) translate(50%, -50%);
      }
    }

    &[data-floating-menu-direction='top'] {
      .#{$prefix}--tooltip__caret {
        top: auto;
        bottom: rem(-6px);
        transform: rotate(45deg);
      }
    }

    &[data-floating-menu-direction='right'] {
      .#{$prefix}--tooltip__caret {
        left: rem(-5px);
        top: 50%;
        right: auto;
        transform: rotate(135deg) translate(-50%, 50%);
      }
    }
  }

  .#{$prefix}--tooltip--shown {
    display: block;
  }

  // Tooltip Definition
  // Definition CSS only tooltip
  .#{$prefix}--tooltip--definition {
    @include font-family;
    @include reset;
    @include typescale('delta');

    position: relative;

    .#{$prefix}--tooltip__trigger {
      display: inline-flex;
      position: relative;
      border-bottom: 2px dotted $ui-04;

      &:hover {
        border-bottom: 2px dotted $hover-primary;
        cursor: pointer;

        + .#{$prefix}--tooltip--definition__top,
        + .#{$prefix}--tooltip--definition__bottom {
          display: block;
        }
      }

      &:focus {
        @include focus-outline('border');

        + .#{$prefix}--tooltip--definition__top,
        + .#{$prefix}--tooltip--definition__bottom {
          display: block;
        }
      }
    }
  }

  .#{$prefix}--tooltip--definition__bottom,
  .#{$prefix}--tooltip--definition__top {
    @include layer('overlay');
    position: absolute;
    z-index: 1;
    display: none;
    background: $inverse-02;
    max-width: rem(176px);
    margin-top: $spacing-sm;
    padding: $spacing-xs;
    border-radius: rem(4px);
    pointer-events: none;
    cursor: pointer;

    p {
      @include font-family;
      @include typescale('omega');
      color: $inverse-01;
    }

    .#{$prefix}--tooltip__caret {
      position: absolute;
      right: 0;
      left: 0;
      width: 0.6rem;
      height: 0.6rem;
      background: $inverse-02;
      margin-left: $spacing-lg;
    }
  }

  // Tooltip Definition caret - bottom position
  .#{$prefix}--tooltip--definition__bottom {
    .#{$prefix}--tooltip__caret {
      top: -0.2rem;
      transform: rotate(-135deg);
    }
  }

  // Tooltip Definition caret - top position
  .#{$prefix}--tooltip--definition__top {
    transform: translateY(-100%);
    margin-top: rem(-32px);

    .#{$prefix}--tooltip__caret {
      bottom: -0.2rem;
      transform: rotate(45deg);
    }
  }

  // Tooltip Icon
  // Icon CSS only tooltip
  .#{$prefix}--tooltip--icon__top,
  .#{$prefix}--tooltip--icon__bottom {
    @include font-family;
    @include reset;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    overflow: visible;

    path {
      fill: $brand-01;
    }

    // Tooltip - renders as a combo of :before and :after elements
    &:before,
    &:after {
      @include font-family;
      position: absolute;
      display: none;
      background-color: $inverse-02;
    }

    &:before {
      right: 0;
      left: 0;
      width: 0.6rem;
      height: 0.6rem;
      margin: 0 auto;
      content: '';
      margin-top: 1px;
      margin-left: 50%;
    }

    &:after {
      @include typescale('omega');
      @include layer('overlay');
      max-width: rem(176px);
      margin-left: 50%;
      padding: $spacing-2xs;
      border-radius: 4px;
      color: $inverse-01;
      font-weight: 400;
      content: attr(aria-label);
      transform: translateX(-50%);
      white-space: nowrap;
      pointer-events: none;
      margin-left: 50%;
    }

    &:hover,
    &:focus {
      path {
        fill: $hover-primary;
      }

      &:before,
      &:after {
        position: absolute;
        display: block;
      }
    }

    &:focus {
      outline: 1px solid transparent;

      svg {
        @include focus-outline('border');
      }
    }
  }

  // Tooltip Icon caret - top position
  .#{$prefix}--tooltip--icon__top {
    &:before {
      top: 0;
      transform: translate(-50%, calc(-100% - 10px)) rotate(45deg);
    }

    &:after {
      top: 0;
      transform: translate(-50%, calc(-100% - 10px));
    }
  }

  // Tooltip Icon caret - bottom position
  .#{$prefix}--tooltip--icon__bottom {
    &:before {
      bottom: 0;
      transform: translate(-50%, calc(100% + 10px)) rotate(135deg);
    }

    &:after {
      bottom: 0;
      transform: translate(-50%, calc(100% + 10px));
    }
  }

  // Tooltip position - icon only
  .#{$prefix}--tooltip--icon {
    .#{$prefix}--tooltip__trigger {
      svg {
        margin-left: 0;
      }
    }
  }
}

@mixin tooltip--x {
  .#{$prefix}--tooltip--icon {
    display: flex;
    align-items: center;
  }

  .#{$prefix}--tooltip__label {
    @include type-style('label-01');
    display: inline-flex;
    align-items: center;
    color: $text-02;

    .#{$prefix}--tooltip__trigger {
      margin-left: $carbon--spacing-03;
    }
  }

  .#{$prefix}--tooltip__label:focus {
    @include focus-outline('border');
  }

  .#{$prefix}--tooltip__trigger {
    @include button-reset($width: false);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;

    &:focus {
      @include focus-outline('border');
      fill: $hover-primary;
    }

    path,
    polygon,
    circle {
      fill: $icon-02;
    }
  }

  .#{$prefix}--tooltip__label--bold {
    font-weight: 600;
  }

  .#{$prefix}--tooltip {
    @include layer('overlay');
    @include reset;
    position: absolute;
    display: none;
    min-width: rem(208px);
    max-width: rem(288px);
    background: $inverse-02;
    margin-top: $carbon--spacing-02;
    padding: 1rem;
    border-radius: rem(2px);
    z-index: z('floating');
    word-wrap: break-word;
    color: $inverse-01;

    p {
      @include type-style('body-short-01');
    }

    button {
      padding-right: $carbon--spacing-07;
    }

    .#{$prefix}--link {
      // Need to add new link / UI color -- IBM Color Blue 40
      color: $link-inverse-color;
      font-size: rem(14px);

      &:active {
        color: $inverse-01;
      }

      &:visited {
        color: $link-inverse-color;
      }
    }

    .#{$prefix}--tooltip__caret {
      position: absolute;
      background: $inverse-02;
      left: 0;
      top: rem(-4px);
      right: 0;
      transform: rotate(-135deg);
      width: 0.6rem;
      height: 0.6rem;
      margin: 0 auto;
      content: '';
    }

    .#{$prefix}--tooltip__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 1rem;
    }

    &[data-floating-menu-direction='left'] {
      .#{$prefix}--tooltip__caret {
        left: auto;
        top: 50%;
        right: rem(-4px);
        transform: rotate(-45deg) translate(50%, -50%);
      }
    }

    &[data-floating-menu-direction='top'] {
      .#{$prefix}--tooltip__caret {
        top: auto;
        bottom: rem(-4px);
        transform: rotate(45deg);
      }
    }

    &[data-floating-menu-direction='right'] {
      .#{$prefix}--tooltip__caret {
        left: rem(-4px);
        top: 50%;
        right: auto;
        transform: rotate(135deg) translate(-50%, 50%);
      }
    }
  }

  .#{$prefix}--tooltip--shown {
    display: block;
  }

  // Tooltip Definition
  // Definition CSS only tooltip
  .#{$prefix}--tooltip--definition {
    @include reset;
    position: relative;

    .#{$prefix}--tooltip__trigger {
      @include type-style('label-01');
      display: inline-flex;
      position: relative;
      border-bottom: 1px dotted $interactive-01;
      color: $text-01;

      &:hover {
        cursor: pointer;

        + .#{$prefix}--tooltip--definition__top,
        + .#{$prefix}--tooltip--definition__bottom {
          display: block;
        }
      }

      &:focus {
        @include focus-outline('border');

        + .#{$prefix}--tooltip--definition__top,
        + .#{$prefix}--tooltip--definition__bottom {
          display: block;
        }
      }
    }
  }

  .#{$prefix}--tooltip--definition__bottom,
  .#{$prefix}--tooltip--definition__top {
    @include layer('overlay');
    position: absolute;
    z-index: 1;
    display: none;
    background: $inverse-02;
    width: rem(208px);
    margin-top: $carbon--spacing-04;
    padding: $carbon--spacing-03 $carbon--spacing-05;
    border-radius: rem(2px);
    pointer-events: none;
    cursor: pointer;

    p {
      @include type-style('body-short-01');
      color: $inverse-01;
    }

    .#{$prefix}--tooltip__caret {
      position: absolute;
      right: 0;
      left: 0;
      width: 0.6rem;
      height: 0.6rem;
      background: $inverse-02;
      margin-left: $carbon--spacing-05;
    }
  }

  // Tooltip Definition caret - bottom position
  .#{$prefix}--tooltip--definition__bottom .#{$prefix}--tooltip__caret {
    top: -0.2rem;
    transform: rotate(-135deg);
  }

  // Tooltip Definition caret - top position
  .#{$prefix}--tooltip--definition__top {
    transform: translateY(-100%);
    margin-top: rem(-32px);

    .#{$prefix}--tooltip__caret {
      bottom: -0.2rem;
      transform: rotate(45deg);
    }
  }

  // Tooltip Icon
  // Icon CSS only tooltip
  .#{$prefix}--tooltip--icon__top,
  .#{$prefix}--tooltip--icon__bottom {
    @include reset;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    overflow: visible;

    path {
      fill: $icon-02;
    }

    // Tooltip - renders as a combo of ::before and ::after elements
    &::before,
    &::after {
      @include type-style('body-short-01');
      position: absolute;
      display: none;
      background-color: $inverse-02;
    }

    &::before {
      right: 0;
      left: 0;
      width: rem(18px);
      height: rem(18px);
      margin: 0 auto;
      content: '';
      margin-top: 1px;
      margin-left: 50%;
    }

    &::after {
      @include layer('overlay');
      min-width: rem(24px);
      max-width: rem(208px);
      height: rem(24px);
      margin-left: 50%;
      padding: 0 1rem;
      border-radius: rem(2px);
      color: $inverse-01;
      font-weight: 400;
      content: attr(aria-label);
      transform: translateX(-50%);
      white-space: nowrap;
      pointer-events: none;
      margin-left: 50%;
    }

    &:hover,
    &:focus {
      path {
        fill: $icon-02;
      }

      &::before,
      &::after {
        position: absolute;
        display: flex;
        align-items: center;
      }
    }

    &:focus {
      outline: 1px solid transparent;

      svg {
        @include focus-outline('border');
      }
    }
  }

  // Tooltip Icon caret - top position
  .#{$prefix}--tooltip--icon__top {
    &::before {
      top: 1px;
      transform: translate(-50%, calc(-100% - 12px)) rotate(45deg);
    }

    &::after {
      top: 0;
      transform: translate(-50%, calc(-100% - 12px));
    }
  }

  // Tooltip Icon caret - bottom position
  .#{$prefix}--tooltip--icon__bottom {
    &::before {
      bottom: 0;
      transform: translate(-50%, calc(100% + 9px)) rotate(135deg);
    }

    &::after {
      bottom: 0;
      transform: translate(-50%, calc(100% + 10px));
    }
  }

  // Tooltip position - icon only
  .#{$prefix}--tooltip--icon .#{$prefix}--tooltip__trigger svg {
    margin-left: 0;
  }
}

@include exports('tooltip') {
  @if feature-flag-enabled('components-x') {
    @include tooltip--x;
  } @else {
    @include tooltip;
  }
}