//
// Copyright 2020 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

// Selector '.mdc-*' should only be used in this project.
// stylelint-disable selector-class-pattern --
// Internal styling for Tooltip MDC component.

@use 'sass:math';
@use '@material/elevation/mixins' as elevation-mixins;
@use '@material/dom/dom';
@use '@material/feature-targeting/feature-targeting';
@use '@material/rtl/rtl' as rtl;
@use '@material/dom/mixins' as dom-mixins;
@use './tooltip-theme';
@use '@material/typography/typography';

$_padding-y: 4px;
$_padding-x: 8px;
$_max-height: 40vh;
//LINT.IfChange(tooltip-dimensions)
$_min-width: 40px;
$_max-width: 200px;
$_min-height: 24px;
// LINT.ThenChange(constants.ts:tooltip-dimensions)
$_label-type-scale: caption;
$_line-height: 16px;
// LINT.IfChange(tooltip-anim-scale)
$_animation-scale: 0.8;
// LINT.ThenChange(constants.ts:tooltip-anim-scale);

// Rich Tooltip variables
$_rich_corner_radius: 4px;
$_rich_line-height: 20px;
$_rich_title_baseline: 28px;
// LINT.IfChange(rich-tooltip-dimensions)
$_rich_max-width: 320px;
// LINT.ThenChange(constants.ts:rich-tooltip-dimensions)
$_content-margin: 8px;
$_content-type-scale: body2;
$_title-type-scale: subtitle2;
$_caret-size: 24px;

@mixin static-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  @include tooltip-theme.word-break(
    tooltip-theme.$word-break-default,
    tooltip-theme.$word-break-ie11-fallback,
    $query: $query
  );
  @include tooltip-theme.show-transition(
    tooltip-theme.$enter-duration,
    $query: $query
  );
  @include tooltip-theme.hide-transition(
    tooltip-theme.$exit-duration,
    $query: $query
  );

  .mdc-tooltip {
    @include feature-targeting.targets($feat-structure) {
      position: fixed;
      display: none;
      z-index: tooltip-theme.$z-index;
    }
  }

  .mdc-tooltip-wrapper--rich {
    @include feature-targeting.targets($feat-structure) {
      position: relative;
    }
  }

  .mdc-tooltip--shown,
  .mdc-tooltip--showing,
  .mdc-tooltip--hide {
    @include feature-targeting.targets($feat-structure) {
      display: inline-flex;
    }

    &.mdc-tooltip--rich {
      @include feature-targeting.targets($feat-structure) {
        display: inline-block;
        // Moves the rich tooltip out of the viewport/parent element initially
        // so that the initial width is not affected and a 'correct' width can
        // be used to calculate the position of the tooltip.
        @include rtl.ignore-next-line();
        left: -$_rich_max_width;
        position: absolute;
      }
    }
  }

  .mdc-tooltip__surface {
    &::before {
      @include dom-mixins.transparent-border($query: $query);
    }

    @include feature-targeting.targets($feat-structure) {
      line-height: $_line-height;
      padding: $_padding-y $_padding-x;
      min-width: $_min-width;
      max-width: $_max-width;
      min-height: $_min-height;
      max-height: $_max-height;
      box-sizing: border-box;
      overflow: hidden;
      text-align: center;
    }

    .mdc-tooltip--rich & {
      @include feature-targeting.targets($feat-structure) {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        min-height: $_min-height;
        min-width: $_min-width;
        max-width: $_rich_max-width;
        position: relative;
      }
    }

    .mdc-tooltip--multiline & {
      @include feature-targeting.targets($feat-structure) {
        @include rtl.ignore-next-line();
        text-align: left;
        @include rtl.rtl {
          @include rtl.ignore-next-line();
          text-align: right;
        }
      }
    }

    .mdc-tooltip__title {
      @include feature-targeting.targets($feat-structure) {
        margin: 0 $_content-margin;
      }
    }

    .mdc-tooltip__content {
      @include feature-targeting.targets($feat-structure) {
        max-width: calc(#{$_max-width} - (2 * #{$_content-margin}));
        margin: $_content-margin;
        @include rtl.ignore-next-line();
        text-align: left;
        @include rtl.rtl {
          @include rtl.ignore-next-line();
          text-align: right;
        }
      }

      .mdc-tooltip--rich & {
        @include feature-targeting.targets($feat-structure) {
          max-width: calc(#{$_rich_max-width} - (2 * #{$_content-margin}));
          align-self: stretch;
        }
      }
    }

    .mdc-tooltip__content-link {
      @include feature-targeting.targets($feat-structure) {
        text-decoration: none;
      }
    }
  }

  .mdc-tooltip--rich-actions,
  .mdc-tooltip__content,
  .mdc-tooltip__title {
    @include feature-targeting.targets($feat-structure) {
      z-index: 1;
    }
  }

  .mdc-tooltip__surface-animation {
    @include feature-targeting.targets($feat-structure) {
      opacity: 0;
      transform: scale($_animation-scale);
      will-change: transform, opacity;
    }

    .mdc-tooltip--shown & {
      @include feature-targeting.targets($feat-structure) {
        transform: scale(1);
        opacity: 1;
      }
    }

    .mdc-tooltip--hide & {
      @include feature-targeting.targets($feat-structure) {
        transform: scale(1);
      }
    }
  }

  .mdc-tooltip__caret-surface-top,
  .mdc-tooltip__caret-surface-bottom {
    @include elevation-mixins.overlay-dimensions(100%, $query: $query);
    @include feature-targeting.targets($feat-structure) {
      position: absolute;
      height: $_caret-size;
      width: $_caret-size;
      // We override this transform in MDCTooltipFoundation, however these
      // styles must be present before the override happens in order to
      // calculate the correct boundingClientRect (with the transforms applied).
      @include rtl.ignore-next-line();
      transform: rotate(35deg) skewY(20deg) scaleX(math.cos(20deg));
    }
  }

  .mdc-tooltip__caret-surface-bottom {
    @include elevation-mixins.elevation(2, $query: $query);
    @include feature-targeting.targets($feat-structure) {
      outline: 1px solid transparent;
      z-index: -1;

      // Added for b/206440838.
      @include dom.forced-colors-mode($exclude-ie11: true) {
        outline-color: CanvasText;
      }
    }
  }
}

@mixin core-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  @include tooltip-theme.shape-radius(
    tooltip-theme.$border-radius,
    $query: $query
  );
  @include tooltip-theme.label-ink-color(
    tooltip-theme.$label-color,
    $query: $query
  );
  @include tooltip-theme.fill-color(
    tooltip-theme.$background-color,
    $query: $query
  );

  @include tooltip-theme.rich-text-ink-color(
    tooltip-theme.$rich-title-text-color,
    tooltip-theme.$rich-content-text-color,
    tooltip-theme.$rich-content-link-color,
    $query: $query
  );

  .mdc-tooltip {
    @include tooltip-theme.rich-fill-color(
      tooltip-theme.$rich-background-color,
      $query: $query
    );
  }

  .mdc-tooltip__surface {
    @include typography.typography(
      $_label-type-scale,
      $exclude-props: (line-height),
      $query: $query
    );

    .mdc-tooltip--rich & {
      @include elevation-mixins.overlay-dimensions(100%, $query: $query);
      @include elevation-mixins.elevation(2, $query: $query);
      @include feature-targeting.targets($feat-structure) {
        border-radius: $_rich_corner_radius;
        line-height: $_rich_line-height;
      }
    }

    .mdc-tooltip__title {
      @include typography.text-baseline(
        $top: $_rich_title_baseline - $_padding-y,
        $lineHeight: $_rich_line-height,
        $query: $query
      );
      @include typography.typography($_title-type-scale, $query: $query);
    }

    .mdc-tooltip__content {
      @include typography.typography($_content-type-scale, $query: $query);

      .mdc-tooltip--rich & {
        @include feature-targeting.targets($feat-structure) {
          max-width: calc(#{$_rich_max-width} - (2 * #{$_content-margin}));
          align-self: stretch;
        }
      }
    }
  }

  @include static-styles($query: $query);
}