@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  .v-tooltip
    > .v-overlay__content
      background: $tooltip-background-color
      color: $tooltip-text-color
      border-radius: $tooltip-border-radius
      font-size: $tooltip-font-size
      line-height: $tooltip-line-height
      display: inline-block
      padding: $tooltip-padding
      text-transform: initial
      width: auto
      opacity: 1
      pointer-events: none
      transition-property: opacity, transform
      overflow-wrap: $tooltip-overflow-wrap

      &[class*="enter-active"]
        transition-timing-function: settings.$decelerated-easing
        transition-duration: $tooltip-transition-enter-duration

      &[class*="leave-active"]
        transition-timing-function: settings.$accelerated-easing
        transition-duration: $tooltip-transition-leave-duration