////
/// @group Component:Tooltip
/// @author Mustard-UI@v1, Michael Becker
////

///
.tooltip {
    display: inline-block;
    position: relative;
    border-bottom: 1px dashed $tooltip-underline-color;

    &:focus,
    &:hover {
        cursor: pointer;

        .tooltip-text {
            display: block;
        }
    }
}

///
.tooltip-text {
    display: none;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100px;
    padding: space(1) space(2);
    color: $color-light;
    text-align: center;
    background: $tooltip-bg-color;
    border-radius: $tooltip-border-radius;
    box-shadow: elevation(2);
    z-index: $tooltip-z;

    &::after {
        position: absolute;
        content: '';
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 8px;
        border-style: solid;
        border-color: $tooltip-bg-color transparent transparent;
    }
}