_mixins.scss

////
/// @group tooltip
////

@import '~@react-md/theme/dist/helpers';
@import '~@react-md/typography/dist/mixins';
@import '~@react-md/transition/dist/mixins';
@import './variables';
@import './functions';

/// Creates the styles for one of the tooltip's theme values. This is mostly
/// going to be an internal helper mixin util.
///
/// @param {String} property - The property to set a `rmd-tooltip-theme-values`
/// value to.
/// @param {String} theme-style - One of the keys of `rmd-tooltip-theme-values`
/// to extract a value from.
/// @param {Color|String|Number} fallback [null] - A fallback value to use if
/// the css variable isn't set somehow. This will default to automatically
/// retrieving the default value from the `rmd-tooltip-theme-values` map when
/// `null`.
@mixin rmd-tooltip-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-tooltip-theme-values,
    tooltip
  );
}

/// Updates one of the tooltip's theme variables with the new value for the
/// section of your app.
///
/// @param {String} theme-style - The tooltip theme style type to update. This
/// should be one of the `$rmd-tooltip-theme-values` keys.
/// @param {Color|String|Number} value - The new value to use.
@mixin rmd-tooltip-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-tooltip-theme-values,
    tooltip
  );
}

/// Creates the base styles for a tooltip.
@mixin rmd-tooltip-base {
  @include rmd-typography-base;
  @include rmd-typography-value(body-1, letter-spacing);
  @include rmd-tooltip-theme(background-color);
  @include rmd-tooltip-theme(color);
  @include rmd-tooltip-theme(font-size);
  @include rmd-tooltip-theme(line-height);
  @include rmd-tooltip-theme(min-height);
  @include rmd-tooltip-theme(max-width);
  @include rmd-tooltip-theme(padding-left, horizontal-padding);
  @include rmd-tooltip-theme(padding-right, horizontal-padding);
  @include rmd-tooltip-theme(z-index);

  align-items: center;
  border-radius: $rmd-tooltip-border-radius;
  display: flex;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  text-transform: none;
  user-select: none;
  white-space: nowrap;
}

/// Creates the base styles to allow line-wrapping tooltips.
@mixin rmd-tooltip-line-wrap {
  @include rmd-tooltip-theme(padding-bottom, vertical-padding);
  @include rmd-tooltip-theme(padding-top, vertical-padding);

  white-space: normal;
}

/// Creates the dense tooltip style overrides.
@mixin rmd-tooltip-dense-theme {
  @include rmd-tooltip-theme-update-var(
    font-size,
    rmd-tooltip-theme-var(dense-font-size)
  );
  @include rmd-tooltip-theme-update-var(
    line-height,
    rmd-tooltip-theme-var(dense-line-height)
  );
  @include rmd-tooltip-theme-update-var(
    min-height,
    rmd-tooltip-theme-var(dense-min-height)
  );
  @include rmd-tooltip-theme-update-var(
    horizontal-padding,
    rmd-tooltip-theme-var(dense-horizontal-padding)
  );
  @include rmd-tooltip-theme-update-var(
    vertical-padding,
    rmd-tooltip-theme-var(dense-vertical-padding)
  );
  @include rmd-tooltip-theme-update-var(
    spacing,
    rmd-tooltip-theme-var(dense-spacing)
  );
}

/// Creates all the styles for a tooltip element. This should be used within a
/// css class.
@mixin rmd-tooltip {
  @include rmd-tooltip-base;

  &--line-wrap {
    @include rmd-tooltip-line-wrap;
  }

  &--dense {
    @include rmd-tooltip-dense-theme;
  }

  &--above {
    transform: translateY(
      rmd-utils-negate-var(rmd-tooltip-theme-var(transition-distance))
    );
  }

  &--below {
    transform: translateY(rmd-tooltip-theme-var(transition-distance));
  }

  &--left {
    transform: translateX(
      rmd-utils-negate-var(rmd-tooltip-theme-var(transition-distance))
    );
  }

  &--right {
    transform: translateX(rmd-tooltip-theme-var(transition-distance));
  }

  &--visible {
    opacity: 1;
    transform: none;
  }

  &--enter {
    @include rmd-transition(deceleration);

    transition: opacity $rmd-tooltip-enter-duration,
      transform $rmd-tooltip-enter-duration * 2;
  }

  &--exit {
    @include rmd-transition(acceleration);

    transition-duration: $rmd-tooltip-exit-duration;
  }

  &--exit-active {
    opacity: 0;
  }
}

/// Creates all the styles and theme for the tooltip package.
@mixin react-md-tooltip {
  @include rmd-theme-create-root-theme($rmd-tooltip-theme-values, tooltip);

  .rmd-tooltip {
    @include rmd-tooltip;
  }
}