#tooltip {
    font-weight: bold;
    padding: 0.5em 0.8em;
    font-size: 0.8em;
    border-radius: 4px;
    display: block;
    opacity: 0;
    transition: opacity 120ms;
}

#tooltip[data-show] {
    opacity: 1;
}

#arrow, #arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

#arrow {
    visibility: hidden;
}

#arrow::before {
    visibility: visible;
    content: "";
    transform: rotate(45deg);
}

#tooltip[data-popper-placement^="top"] > #arrow {
    bottom: -4px;
}

#tooltip[data-popper-placement^="bottom"] > #arrow {
    top: -4px;
}

#tooltip[data-popper-placement^="left"] > #arrow {
    right: -4px;
}

#tooltip[data-popper-placement^="right"] > #arrow {
    left: -4px;
}

#markdown button {
    display: inline;
    padding: 0;
    margin: 0;
    border: inherit;
    font: inherit;
    color: inherit;
    background: none;
    cursor: help;
}

#markdown button:hover::before,
#markdown button:hover::after {
    color: var(--shadow-color);
    opacity: 1;
}

#markdown button::before,
#markdown button::after {
    opacity: 0.5;
    transition: all 120ms;
}

#markdown button::before {
    content: "{";
    margin-right: 1px;
}

#markdown button::after {
    content: "}";
    margin-left: 1px;
}

#tips {
    text-align: center;
    font-weight: 500;
}

#tips > a {
    display: block;
}

a.current {
    opacity: 0.35;
    pointer-events: none;
}

@media (prefers-color-scheme: light) {
    #tooltip {
        background-color: var(--primary-color);
        color: white;
    }

    #markdown button {
        --shadow-color: var(--primary-color);
    }
}

@media (prefers-color-scheme: dark) {
    #tooltip {
        background-color: white;
        color: black;
    }

    #markdown button {
        --shadow-color: white;
    }
}