//##  Flat UI Color Variations

/***
Custom color buttons 
***/

@each $name, $colors in $component-colors {
    .bg-#{$name} {
        background: map-get($colors, base) !important;
    }

    .bg-#{$name}-opacity {
        background: rgba(map-get($colors, base), 0.8) !important;
    }

    .bg-hover-#{$name}:hover {
        background: map-get($colors, base) !important;
    }

    .font-#{$name} {
        color: map-get($colors, base) !important;
    }
    
    .bg-font-#{$name} {
        color: map-get($colors, font) !important;
    }

    .border-#{$name} {
        border-color: map-get($colors, base) !important;
    }

    .border-top-#{$name} {
        border-top-color: map-get($colors, base) !important;
    }

    .border-bottom-#{$name} {
        border-bottom-color: map-get($colors, base) !important;
    }
    
    .border-left-#{$name} {
        border-left-color: map-get($colors, base) !important;
    }

    .border-right-#{$name} {
        border-right-color: map-get($colors, base) !important;
    }

    // pseudo classes
    .bg-before-#{$name}:before,
    .bg-after-#{$name}:after {
        background: map-get($colors, base) !important;
    }

    .border-before-#{$name}:before,
    .border-after-#{$name}:after {
        border-color: map-get($colors, base) !important;
    }

    .border-top-before-#{$name}:before,
    .border-top-after-#{$name}:after {
        border-top-color: map-get($colors, base) !important;
    }

    .border-bottom-before-#{$name}:before,
    .border-bottom-after-#{$name}:after {
        border-bottom-color: map-get($colors, base) !important;
    }
    
    .border-left-before-#{$name}:before,
    .border-left-after-#{$name}:after {
        border-left-color: map-get($colors, base) !important;
    }

    .border-right-before-#{$name}:before,
    .border-right-after-#{$name}:after {
        border-right-color: map-get($colors, base) !important;
    }
}

/***
Color library demo
***/

.color-demo {
	border: 1px solid #eee;
	margin: 0 0 20px 0;
	cursor: pointer;

	.color-view {
		padding: 35px 10px;
		text-align: center;
		font-size: 18px;
	}

	.color-info {
		border-top: 1px solid #eee;
		padding: 10px 10px;	
		text-align: center;
	}	
}