////
/// Site Background Color
///
/// @group  Components\Background
/// @author Sky Shabatura <theme@sky.camp>
/// @link   https://taproot-theme.com
////


// Text color
.has-text-color {
    color:              var( --colors--text );
}
// Accent color
.has-accent-color {
    color:              var( --colors--accent );
}

// Accent contrast color
.has-accent-contrast-color {
    color:              var( --colors--accent-contrast );
}

// Meta Light color
.has-meta-light-color {
    color:              var( --colors--meta-light );
}

// Meta Medium color
.has-meta-medium-color {
    color:              var( --colors--meta-medium );
}

// Meta Dark color
.has-meta-dark-color {
    color:              var( --colors--meta-dark );
}

// Backgrounds

// Text color as background
.has-text-background-color {
    background-color:   var( --colors--text );
}

// Accent color as background
.has-accent-background-color {
    background-color:   var( --colors--accent );
}

// Accent color as background
.has-accent-contrast-background-color {
    background-color:   var( --colors--accent-contrast );
}

// Meta Light color as background
.has-meta-light-background-color {
    background-color:   var( --colors--meta-light );
}

// Meta Medium color as background
.has-meta-medium-background-color {
    background-color:   var( --colors--meta-medium );
}

// Meta Dark color as background
.has-meta-dark-background-color {
    background-color:   var( --colors--meta-dark );
}


// Default Gradients

.has-accent-to-accent-gradient-background {
    background: linear-gradient(135deg, var( --colors--accent ) 0%, var( --colors--accent ) 100%);
}

.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
    background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
}

.has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
    background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);
}

.has-vlight-green-cyan-to-vivid-green-cyan-gradient-background {
    background: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
}

.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
    background: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
}

.has-luminous-vivid-orange-to-vivid-red-gradient-background {
    background: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
}
