/* components/RESULT-ICON.CSS */

.result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2em;
    height: 2em;
    font-size: 1.6rem;
    color: white;
    border-radius: 50%;
    box-shadow: var(--shadow-medium);
    transition: var(--t-reveal);
    z-index: 3;
}

.result-icon.win i,
.result-icon.draw i,
.result-icon.loss i,
.win .result-icon i,
.draw .result-icon i,
.loss .result-icon i,
.form-result i {
    -webkit-text-stroke: 0.08em currentColor;
}

/* Result Colours */
.win .result-icon,
.result-icon.win { background: var(--light-green) !important; }

.draw .result-icon,
.result-icon.draw { background: var(--golden-yellow) !important; }

.loss .result-icon,
.result-icon.loss { background: var(--soft-coral) !important; }

.result-icon:not(.win):not(.draw):not(.loss) { background: var(--dusty-blue); }