// Tool tip
// ––––––––––––––––––––––––––––––––––––––––––––––––––

.tool-tip
    position: relative

    .tool-tip-text
        visibility: hidden
        display: inline-block
        font-size: 0.9em
        bottom: 100%
        margin-bottom: 10px
        left: 0px
        background-color: $eden-green
        color: $eden-light-grey
        padding: 0.5em 1em
        border-radius: 0.2em
        white-space: nowrap
        position: absolute
        z-index: 1

        &.dark
            background-color: $eden-charcoal
            color: $eden-light-grey
        &.light
            background-color: $eden-light-grey
            color: $eden-charcoal

        &.center
            left: 50%
            transform: translate3d(-50%, 0px, 0px)

            &:after
                left: 50%

        &.right
            left: auto
            right: 0px

            &:after
                left: auto
                right: 10px

        &.sharp
            border-radius: 0px

        &.short
            padding-top: 0.25em
            padding-bottom: 0.25em

        &.tall
            padding-top: 0.75em
            padding-bottom: 0.75em

        &.skinny
            padding-left: 0.5em
            padding-right: 0.5em

        &.fat
            padding-left: 1.5em
            padding-right: 1.5em

        &.dark

            &:after
                border-color: $eden-charcoal transparent transparent transparent

        &.light

            &:after
                border-color: $eden-light-grey transparent transparent transparent

        &.eden

            &:after
                border-color: $eden-green transparent transparent transparent

        &:after
            content: " "
            position: absolute
            top: 100%
            left: 10px
            margin-left: -5px
            border-width: 5px
            border-style: solid
            border-color: black transparent transparent transparent

    &:hover
        cursor: help

        &>.tool-tip-text
            visibility: visible