.tooltip {
    cursor: pointer;
    color: var(--box-hl);
    font-size: .9rem;
    display: inline-flex;

    &:hover, &:active, &:focus {
        position: relative;

        &:after, &:before {
            font-size: .9rem;
            display: block;
            position: absolute;

            white-space: nowrap;
            bottom: 100%;
            margin-bottom: 5px;
            padding: 7px;
            border-radius: 3px;
            background: var(--btn-bg);
            color: #fff;
            content: attr(data-tooltip);
            text-align: center;
            transform: translate(-45%, 0);
        }
    }
}