@import '../../_style/animation/variables.scss';
@import '../../_style/layout/mixins.scss';

$md-tooltip-height: 22px;
$md-tooltip-height-mobile: 32px;

.md-popover.md-tooltip {
  z-index: 111;
  pointer-events: none;

  > .content {
    font-size: 10px;
    padding: 0 8px;
    height: $md-tooltip-height;
    line-height: $md-tooltip-height;
    text-transform: none;
    white-space: nowrap;
    color: var(--md-surface);
    background-color: var(--md-on-surface-medium);

    @include md-layout-small {
      height: $md-tooltip-height-mobile;
      font-size: 14px;
      line-height: $md-tooltip-height-mobile;
    }
  }

  .md-popover-enter-active {
    transition-duration: 0.15s;
  }
}