//- 💫 CSS > COMPONENTS > TOOLTIPS

[data-tooltip]
    position: relative

    @include breakpoint(min, sm)
        &[data-tooltip-style="code"]:before
            -webkit-font-smoothing: subpixel-antialiased
            -moz-osx-font-smoothing: auto
            padding: 0.35em 0.85em 0.45em
            font: normal 1rem/#{1.25} $font-code
            white-space: nowrap
            min-width: auto

        &:before
            @include position(absolute, top, left, 125%, 50%)
            display: inline-block
            content: attr(data-tooltip)
            background: $color-front
            border-radius: $border-radius
            border: 1px solid rgba($color-subtle-dark, 0.5)
            color: $color-back
            font: normal 1.2rem/#{1.25} $font-primary
            text-transform: none
            text-align: left
            opacity: 0
            transform: translateX(-50%) translateY(-2px)
            transition: opacity 0.1s ease-out, transform 0.1s ease-out
            visibility: hidden
            max-width: 300px
            min-width: 200px
            padding: 0.75em 1em 1em
            z-index: 200
            white-space: pre-wrap

        &:hover:before
            opacity: 1
            transform: translateX(-50%) translateY(0)
            visibility: visible