// Color
.text-current {
    color: currentColor;

    &:hover {
        color: var(--theme-color);
    }
}

.text-white-hover {
    color: rgba($white, .75);

    &:hover {
        color: $white;
    }
}

// Color
.bg-theme {
    background-color: var(--theme-color);
}

.text-theme {
    color: var(--theme-color) !important;

    &:hover {
        color: var(--theme-color);
    }
}

.text-xp {
    color: var(--xp-color);
}

// Soft color variation
@each $color,
$value in $brand-colors {
    .bg-#{$color} {
        color: #fff;
        background-color: $value;
    }
}

.bg-grad {
background: linear-gradient(90.92deg, #ff4c44 6.54%, #706DE4 92.09%);
    animation: gradient 10s ease infinite;
    background-size: 400% 400%;
}

.game-ratio {
    iframe {
        z-index: 10;
    }
}

.progress-xp {
    background-color: var(--xp-color);
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}