.icon {
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: background-color var(--durationS) var(--course);
}

.iconXS, .iconS, .iconM, .iconL, .iconXL, .iconXS:hover, .iconS:hover, .iconM:hover, .iconL:hover, .iconXL:hover {
    transition: color var(--durationS) var(--course);
}

.iconXS {
    color: var(--iconXS_iconColor);
}

.iconXS:hover {
    color: var(--iconXS_iconColorHover);
}

.iconS {
    color: var(--iconS_iconColor);
}

.iconS:hover {
    color: var(--iconS_iconColorHover);
}

.iconM {
    color: var(--iconM_iconColor);
}

.iconM:hover {
    color: var(--iconM_iconColorHover);
}

.iconL {
    color: var(--iconL_iconColor);
}

.iconL:hover {
    color: var(--iconL_iconColorHover);
}

.iconXL {
    color: var(--iconXL_iconColor);
}

.iconXL:hover {
    color: var(--iconXL_iconColorHover);
}

@media (prefers-color-scheme: dark) {
    .iconXS {
        color: var(--iconXS_iconColorD);
    }

    .iconXS:hover {
        color: var(--iconXS_iconColorHoverD);
    }

    .iconS {
        color: var(--iconS_iconColorD);
    }

    .iconS:hover {
        color: var(--iconS_iconColorHoverD);
    }

    .iconM {
        color: var(--iconM_iconColorD);
    }

    .iconM:hover {
        color: var(--iconM_iconColorHoverD);
    }

    .iconL {
        color: var(--iconL_iconColorD);
    }

    .iconL:hover {
        color: var(--iconL_iconColorHoverD);
    }

    .iconXL {
        color: var(--iconXL_iconColorD);
    }

    .iconXL:hover {
        color: var(--iconXL_iconColorHoverD);
    }
}

@media only screen and (max-width: 500px) {
    .iconXS {
        width: 16px;
        height: 16px;
    }

    .iconS {
        width: 24px;
        height: 24px;
    }

    .iconM {
        width: 32px;
        height: 32px;
    }

    .iconL {
        width: 40px;
        height: 40px;
    }

    .iconXL {
        width: 48px;
        height: 48px;
    }
}

@media only screen and (min-width: 501px) and (max-width: 1000px) {
    .iconXS {
        width: 18px;
        height: 18px;
    }

    .iconS {
        width: 26px;
        height: 26px;
    }

    .iconM {
        width: 34px;
        height: 34px;
    }

    .iconL {
        width: 42px;
        height: 42px;
    }

    .iconXL {
        width: 50px;
        height: 50px;
    }
}

@media only screen and (min-width: 1001px) {
    .iconXS {
        width: 20px;
        height: 20px;
    }

    .iconS {
        width: 28px;
        height: 28px;
    }

    .iconM {
        width: 36px;
        height: 36px;
    }

    .iconL {
        width: 44px;
        height: 44px;
    }

    .iconXL {
        width: 52px;
        height: 52px;
    }
}