:root {
    --hint-caret-color: rgba(82, 82, 82, 1); /* Dark caret, override it from javascript for the light them */
}

.hint-small:after {
    border: 5px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.hint-small-top:after {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-top-color: var(--hint-caret-color);
}

.hint-small-right:after {
    right: 0;
    top: 50%;
    margin-top: -5px;
    border-right-color: var(--hint-caret-color);
}

.hint-small-bottom:after {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-bottom-color: var(--hint-caret-color);
}

.hint-small-left:after {
    left: 0;
    top: 50%;
    margin-top: -5px;
    border-left-color: var(--hint-caret-color);
}


.hint-large:after {
    border: 10px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.hint-large-top:after {
    top: 0;
    left: 50%;
    margin-left: -10px;
    border-top-color: var(--hint-caret-color);
}

.hint-large-right:after {
    right: 0;
    top: 50%;
    margin-top: -10px;
    border-right-color: var(--hint-caret-color);
}

.hint-large-bottom:after {
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    border-bottom-color: var(--hint-caret-color);
}

.hint-large-left:after {
    left: 0;
    top: 50%;
    margin-top: -10px;
    border-left-color: var(--hint-caret-color);
}