.text-color-primary-is-hover,
.text-color-secondary-is-hover {
    transition: all 0.2s ease;
}

.bg-color-primary {
    background-color: rgba(var(--customize-color-primary), 1);
}

.bg-color-primary-light {
    background-color: rgba(var(--customize-color-primary-light), 1);
}

.bg-color-secondary {
    background-color: rgba(var(--customize-color-secondary), 1);
}

.bg-color-secondary-light {
    background-color: rgba(var(--customize-color-secondary-light), 1);
}

.bg-color-secondary-2 {
    background-color: rgba(var(--customize-color-secondary-2), 1);
}

.bg-color-secondary-light-2 {
    background-color: rgba(var(--customize-color-secondary-light-2), 1);
}

.bg-color-black {
    background-color: rgba(var(--customize-color-black-dark), 1);
}

.bg-color-white {
    background-color: rgba(var(--customize-color-white), 1);
}

.bg-color-gray-light {
    background-color: rgba(var(--customize-color-gray-light), 1);
}

.bg-color-primary .text-color-hl-on-primary {
    color: rgba(var(--customize-color-hl-on-primary), 1);
}

.bg-color-secondary .text-color-hl-on-secondary {
    color: rgba(var(--customize-color-hl-on-secondary), 1);
}

.bg-color-gradient-light {
    /* border: 1px solid rgba(var(--customize-color-black), 0.1); */
    /* background-color: rgba(var(--customize-color-secondary-light), 1); */
    background: linear-gradient(to right, rgba(var(--customize-color-primary-light), 1), rgba(var(--customize-color-secondary-light), 1));
}


.text-color-primary,
.text-color-primary-is-hover:hover,
.text-color-hl {
    color: rgba(var(--customize-color-primary), 1) !important;
}

.text-color-primary-2 {
    color: rgba(var(--customize-color-primary-2), 1) !important;
}

.text-color-secondary,
.text-color-secondary-is-hover:hover {
    color: rgba(var(--customize-color-secondary), 1) !important;
}

.text-color-secondary-2 {
    color: rgba(var(--customize-color-secondary-2), 1) !important;
}

.text-color-white {
    color: rgba(var(--customize-color-white), 1) !important;
}

.text-color-black {
    color: rgba(var(--customize-color-black), 1) !important;
}

.text-color-gray {
    color: rgba(var(--customize-color-gray), 1) !important;
}

.text-color-gray-light {
    color: rgba(var(--customize-color-gray-light), 1) !important;
}

.text-color-gray-dark {
    color: rgba(var(--customize-color-gray-dark), 1) !important;
}

.text-color-red {
    color: rgba(var(--customize-color-red), 1) !important;
}

.text-color-red.text-color-on-bg-dark {
    color: rgba(var(--customize-color-red-on-dark), 1) !important;
}

.text-color-green {
    color: rgba(var(--customize-color-green), 1) !important;
}

.text-color-hl-gradient {
    color: rgba(var(--customize-color-primary), 1);
    /* background-image: linear-gradient(to right, rgba(var(--customize-color-primary-gradient-dark), 1), rgba(var(--customize-color-primary-gradient-default), 1), rgba(var(--customize-color-primary-gradient-light), 1));     */
    background-image: linear-gradient(to right, rgba(var(--customize-color-primary-gradient-default), 1), rgba(var(--customize-color-primary-gradient-light), 1));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-link-hover {
    color: rgba(var(--customize-color-black), 1);
}

[class*="text-color-"].text-link-hover:hover,
.text-link-hover:hover {
    color: rgba(var(--customize-color-primary), 1) !important;
}

.text-opacity {
    opacity: 0.5;
}


.tag-default {
    color: rgba(var(--customize-color-white), 1);
    background-color: rgba(var(--customize-color-black-dark), 0.5);
    -webkit-backdrop-filter: saturate(100%) blur(10px);
    backdrop-filter: saturate(100%) blur(10px);
}

.tag-status-new {
    color: rgba(var(--customize-color-on-secondary-2), 1);
    background-color: rgba(var(--customize-color-secondary-2), 1);
}

.tag-status-best-seller {
    color: rgba(var(--customize-color-white), 1);
    background-color: rgba(var(--customize-color-red), 1);
}

.tag-status-recommend {
    color: rgba(var(--customize-color-white), 1);
    background-color: rgba(var(--customize-color-red), 1);
}

.tag-status-promotion {
    color: rgba(var(--customize-color-white), 1);
    background-color: rgba(var(--customize-color-red), 1);
}