@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
      transition-property: opacity, transform
      overflow-wrap: $tooltip-overflow-wrap

    &:not(.v-tooltip--interactive)
      > .v-overlay__content
        pointer-events: none

@include tools.layer('overrides')
  .v-tooltip > .v-overlay__content
    &[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