/*
 * GenPornX local icon compatibility for the small subset of RetroTube
 * Font Awesome classes still emitted on public MVP surfaces.
 *
 * No icon font or external asset is loaded: each icon is an embedded SVG mask
 * and inherits the surrounding text color through currentColor.
 */
.fa {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
    font-style: normal;
    font-weight: normal;
    text-rendering: auto;
}

.fa::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: var(--gpx-icon);
    mask-image: var(--gpx-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.fa-eye {
    --gpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.1 8.3.5 12c1.6 3.7 6 7 11.5 7s9.9-3.3 11.5-7C21.9 8.3 17.5 5 12 5Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E");
}

.fa-clock-o {
    --gpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3.5 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fa-thumbs-up {
    --gpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h5v11Zm2 0V10l4-7c.9.1 1.6.5 2.1 1.2.4.7.5 1.5.2 2.3L16 10h4a2 2 0 0 1 2 2.3l-1.1 6.5a2.6 2.6 0 0 1-2.6 2.2H11Z'/%3E%3C/svg%3E");
}

.fa-thumbs-down {
    --gpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h5V3Zm2 0v11l4 7c.9-.1 1.6-.5 2.1-1.2.4-.7.5-1.5.2-2.3L16 14h4a2 2 0 0 0 2-2.3l-1.1-6.5A2.6 2.6 0 0 0 18.3 3H11Z'/%3E%3C/svg%3E");
}

.fa-refresh {
    --gpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 7.5V3l-1.9 1.9A8.9 8.9 0 0 0 12 2a9 9 0 1 0 8.5 12h-2.2A7 7 0 1 1 17.2 6.3L15 8.5h5.5Z'/%3E%3C/svg%3E");
}

.fa-remove {
    --gpx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E");
}

/* RetroTube adds this modifier to the dislike icon. */
.fa-flip-horizontal::before {
    transform: scaleX(-1);
}

/* Preserve RetroTube's loading-state behavior without the Font Awesome CSS. */
.fa-spin::before {
    animation: gpx-icon-spin 1s linear infinite;
}

@keyframes gpx-icon-spin {
    to {
        transform: rotate(360deg);
    }
}

.gpx-inline-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
