@layer base {
    .border-gradient {
        border-style: solid;
        border-color: transparent;
        /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */
        background-image: linear-gradient(
                var(--backgroundColorA),
                var(--backgroundColorA)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }
    .border-gradient-russianViolet {
        border-style: solid;
        border-color: transparent;
        /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */
        background-image: linear-gradient(
                theme(colors.russianViolet),
                theme(colors.russianViolet)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }
    .border-gradient-primary {
        border-style: solid;
        border-color: transparent;
        background-image: linear-gradient(#130b43, #130b43),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }
    .border-gradient-bgGray {
        border-style: solid;
        border-color: transparent;
        background-image: linear-gradient(
                var(--backgroundColorB),
                var(--backgroundColorB)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }
    .border-gradient-lightPurple {
        border-style: solid;
        border-color: transparent;
        background-image: linear-gradient(
                var(--backgroundColorBorderGradientLightPurple),
                var(--backgroundColorBorderGradientLightPurple)
            ),
            linear-gradient(#2200ff, #9e00ff);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }
}
