/* Tooltips */

.tippy-tooltip {
    padding: 16px;
    font-family: 'Poppins';
    font-size: 20px;
    text-align: right;
    line-height: 1.2;
    font-weight: 700;
    color: var(--dark-accent);
    box-shadow: 0px 0px 16px var(--dark-primary);
}

/* Tooltip Themes */

.tippy-tooltip.title-translate-theme {
    background-color: var(--dark-primary);
    border: 1px solid var(--dark-secondary);
}

.tippy-tooltip.title-translate-theme .tippy-backdrop {
    background-color: var(--dark-primary);
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.title-translate-theme .tippy-arrow {
    border-bottom: 7px solid var(--dark-primary);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.tippy-tooltip.info-genre-theme {
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--dark-white);
    background-color: var(--dark-primary);
    border: 1px solid var(--dark-secondary);
}

.tippy-tooltip.info-genre-theme .tippy-backdrop {
    background-color: var(--dark-primary);
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.info-genre-theme .tippy-arrow {
    border-bottom: 7px solid var(--dark-primary);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

/* Right placement tooltip arrow (arrow will be on left side of tooltip) */
.tippy-popper[x-placement^=right] .tippy-tooltip.info-genre-theme .tippy-arrow {
    border-right: 7px solid var(--dark-primary); /* your color here */
}

/* Left placement tooltip arrow (arrow will be on right side of tooltip) */
.tippy-popper[x-placement^=left] .tippy-tooltip.info-genre-theme .tippy-arrow {
    border-left: 7px solid var(--dark-primary); /* your color here */
}

/* Top placement tooltip arrow (arrow will be on bottom side of tooltip) */
.tippy-popper[x-placement^=top] .tippy-tooltip.info-genre-theme .tippy-arrow {
    border-top: 7px solid var(--dark-primary); /* your color here */
}

/* Bottom placement tooltip arrow (arrow will be on top side of tooltip) */
.tippy-popper[x-placement^=bottom] .tippy-tooltip.info-genre-theme .tippy-arrow {
    border-bottom: 7px solid var(--dark-primary); /* your color here */
}