@property --country-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes country-border-spin {
    to { --country-border-angle: 360deg; }
}

.flag-border-card {
    --country-flag-colors: transparent, transparent;
    --country-border-delay: 0s;
    position: relative;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
    touch-action: manipulation;
}

.flag-border-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--country-border-angle),
        var(--country-flag-colors)
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    animation: country-border-spin 6s linear infinite;
    animation-delay: var(--country-border-delay);
    animation-play-state: paused;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@media (hover: hover) {
    .flag-border-card:hover::before {
        opacity: 1;
        animation-play-state: running;
    }
}

.flag-border-card:focus-visible::before {
    opacity: 1;
    animation-play-state: running;
}

/* The same flag-colour cue is available while a card is pressed, including on touch screens. */
.flag-border-card:active {
    transform: translateY(2px) scale(0.975);
    box-shadow: inset 0 2px 5px rgba(41, 37, 36, 0.18);
}

.flag-border-card:active::before {
    opacity: 1;
    animation-play-state: running;
}

/* country_cards.js applies this after a normal click without delaying navigation. */
.flag-border-card.is-loading::before {
    opacity: 1;
    animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
    .flag-border-card::before {
        animation: none;
    }

    .flag-border-card:active {
        transform: none;
        box-shadow: none;
    }
}