@import './variables.css';

/*Text Colors*/
.primary-text    { color: var(--primary) }
.secondary-text  { color: var(--secondary) }
.default-text    { color: var(--default) }

.error-text     { color: var(--error) }
.warning-text   { color: var(--warning) }
.success-text   { color: var(--success) }
.info-text      { color: var(--info) }
.alert-text     { color: var(--alert) }

.black          { color: var(--black) }
.gray           { color: var(--gray) }
.med-gray       { color: var(--med-gray) }
.dark-gray      { color: var(--dark-gray) }
.charcoal       { color: var(--charcoal) }
.silver         { color: var(--silver) }
.white          { color: var(--white) }

.primary-blue   { color: var(--primary-blue) }
.primary-blue-hover	{ color: var(--primary-blue-darker) }
.aqua           { color: var(--aqua) }
.blue           { color: var(--blue) }
.navy           { color: var(--navy) }
.sky-blue       { color: var(--sky-blue) }
.inverse-blue-text { color: var(--powder-blue) }
.kelly          { color: var(--kelly-green) }
.teal           { color: var(--teal) }
.green          { color: var(--green) }
.olive          { color: var(--olive) }
.lime           { color: var(--lime) }

.yellow  { color: var(--yellow) }
.orange  { color: var(--orange) }
.red     { color: var(--red) }
.fuchsia { color: var(--fuchsia) }
.purple  { color: var(--purple) }
.maroon  { color: var(--maroon) }

.color-inherit { color: inherit }
.muted { opacity: .5 }

/*Hover-Text Colors*/

.hover-primary-text:hover   { color: var(--primary-darker) }
.hover-secondary-text:hover   { color: var(--secondary-darker) }
.hover-default-text:hover   { color: var(--default-lighter) }

.hover-black:hover          { color: var(--black) }
.hover-gray:hover           { color: var(--gray) }
.hover-charcoal:hover       { color: var(--charcoal) }
.hover-silver:hover         { color: var(--silver) }
.hover-white:hover          { color: var(--white) }

.hover-aqua:hover  { color: var(--aqua) }
.hover-blue:hover  { color: var(--blue) }
.hover-navy:hover  { color: var(--navy) }
.hover-teal:hover  { color: var(--teal) }
.hover-green:hover { color: var(--green) }
.hover-olive:hover { color: var(--olive) }
.hover-lime:hover  { color: var(--lime) }

.hover-yellow:hover  { color: var(--yellow) }
.hover-orange:hover  { color: var(--orange) }
.hover-red:hover     { color: var(--red) }
.hover-fuchsia:hover { color: var(--fuchsia) }
.hover-purple:hover  { color: var(--purple) }
.hover-maroon:hover  { color: var(--maroon) }

.hover-color-inherit:hover { color: inherit }
.hover-muted:hover { opacity: .5 }

/*Background Colors*/
.bg-transparent { background-color: transparent }

.bg-body        { background-color: var(--white) }

.bg-primary     { background-color: var(--primary) }
.bg-secondary   { background-color: var(--secondary) }
.bg-default     { background-color: var(--default) }
.bg-warning     { background-color: var(--warning) }
.bg-error       { background-color: var(--error) }

.bg-black    { background-color: var(--black) }
.bg-gray     { background-color: var(--gray) }
.bg-med-gray { background-color: var(--med-gray) }
.bg-silver   { background-color: var(--silver) }
.bg-white    { background-color: var(--white) }

.bg-aqua     { background-color: var(--aqua) }
.bg-blue     { background-color: var(--blue) }
.bg-sky-blue { background-color: var(--sky-blue) }
.bg-navy     { background-color: var(--navy) }
.bg-teal     { background-color: var(--teal) }
.bg-green    { background-color: var(--green) }
.bg-olive    { background-color: var(--olive) }
.bg-lime     { background-color: var(--lime) }
.bg-ylw-green{ background-color: var(--light-green)}

.bg-yellow  { background-color: var(--yellow) }
.bg-orange  { background-color: var(--orange) }
.bg-red     { background-color: var(--red) }
.bg-fuchsia { background-color: var(--fuchsia) }
.bg-purple  { background-color: var(--purple) }
.bg-maroon  { background-color: var(--maroon) }

.bg-darken-1 { background-color: var(--darken-1) }
.bg-darken-2 { background-color: var(--darken-2) }
.bg-darken-3 { background-color: var(--darken-3) }
.bg-darken-4 { background-color: var(--darken-4) }

.bg-lighten-1 { background-color: var(--lighten-1) }
.bg-lighten-2 { background-color: var(--lighten-2) }
.bg-lighten-3 { background-color: var(--lighten-3) }
.bg-lighten-4 { background-color: var(--lighten-4) }

/*Hover-Background Colors*/
.hover-bg-transparent:hover { background-color: transparent }

.hover-bg-primary:hover     { background-color: var(--primary-darker) }
.hover-bg-secondary:hover   { background-color: var(--secondary-darker) }
.hover-bg-default:hover     { background-color: var(--default-lighter) }
.hover-bg-warning:hover     { background-color: var(--warning-darker) }
.hover-bg-error:hover       { background-color: var(--error-darker) }
.hover-bg-link:hover       { background-color: transparent }

.hover-bg-black:hover  { background-color: var(--black) }
.hover-bg-gray:hover   { background-color: var(--gray) }
.hover-bg-silver:hover { background-color: var(--silver) }
.hover-bg-white:hover  { background-color: var(--white) }

.hover-bg-aqua:hover    { background-color: var(--aqua) }
.hover-bg-blue:hover    { background-color: var(--blue) }
.hover-bg-navy:hover    { background-color: var(--navy) }
.hover-bg-teal:hover    { background-color: var(--teal) }
.hover-bg-green:hover   { background-color: var(--green) }
.hover-bg-kelly:hover   { background-color: var(--kelly-green) }
.hover-bg-olive:hover   { background-color: var(--olive) }
.hover-bg-lime:hover    { background-color: var(--lime) }

.hover-bg-yellow:hover  { background-color: var(--yellow) }
.hover-bg-orange:hover  { background-color: var(--orange) }
.hover-bg-red:hover     { background-color: var(--red) }
.hover-bg-fuchsia:hover { background-color: var(--fuchsia) }
.hover-bg-purple:hover  { background-color: var(--purple) }
.hover-bg-maroon:hover  { background-color: var(--maroon) }

.hover-bg-darken-1:hover { background-color: var(--darken-1) }
.hover-bg-darken-2:hover { background-color: var(--darken-2) }
.hover-bg-darken-3:hover { background-color: var(--darken-3) }
.hover-bg-darken-4:hover { background-color: var(--darken-4) }

.hover-bg-lighten-1:hover { background-color: var(--lighten-1) }
.hover-bg-lighten-2:hover { background-color: var(--lighten-2) }
.hover-bg-lighten-3:hover { background-color: var(--lighten-3) }
.hover-bg-lighten-4:hover { background-color: var(--lighten-4) }

/* Border Colors */
.border-transparent  { border-color: transparent }

.border-primary         { border-color: var(--primary) }
.border-secondary       { border-color: var(--secondary) }
.border-default         { border-color: var(--default) }
.border-warning         { border-color: var(--warning) }
.border-error         { border-color: var(--error) }

.border-black       { border-color: var(--black) }
.border-gray        { border-color: var(--gray) }
.border-silver      { border-color: var(--silver) }
.border-white       { border-color: var(--white) }
.border-med-gray    { border-color: var(--med-gray) }
.border-dark-gray   { border-color: var(--dark-gray) }
.border-charcoal    { border-color: var(--charcoal) }

.border-aqua    { border-color: var(--aqua) }
.border-blue    { border-color: var(--blue) }
.border-navy    { border-color: var(--navy) }
.border-teal    { border-color: var(--teal) }
.border-green   { border-color: var(--green) }
.border-kelly   { border-color: var(--kelly-green) }
.border-olive   { border-color: var(--olive) }
.border-lime    { border-color: var(--lime) }

.border-yellow  { border-color: var(--yellow) }
.border-orange  { border-color: var(--orange) }
.border-red     { border-color: var(--red) }
.border-fuchsia { border-color: var(--fuchsia) }
.border-purple  { border-color: var(--purple) }
.border-maroon  { border-color: var(--maroon) }

.border-darken-1 { border-color: var(--darken-1) }
.border-darken-2 { border-color: var(--darken-2) }
.border-darken-3 { border-color: var(--darken-3) }
.border-darken-4 { border-color: var(--darken-4) }

.border-lighten-1 { border-color: var(--lighten-1) }
.border-lighten-2 { border-color: var(--lighten-2) }
.border-lighten-3 { border-color: var(--lighten-3) }
.border-lighten-4 { border-color: var(--lighten-4) }

/*Hover-Border Colors */
.hover-border-transparent:hover  { border-color: transparent }

.hover-border-primary:hover         { border-color: var(--primary-darker) }
.hover-border-secondary:hover       { border-color: var(--secondary-darker) }
.hover-border-default:hover         { border-color: var(--default-lighter) }
.hover-border-warning:hover         { border-color: var(--warning-darker) }
.hover-border-error:hover           { border-color: var(--error-darker) }

.hover-border-black:hover  { border-color: var(--black) }
.hover-border-gray:hover   { border-color: var(--gray) }
.hover-border-silver:hover { border-color: var(--silver) }
.hover-border-white:hover  { border-color: var(--white) }

.hover-border-aqua:hover  { border-color: var(--aqua) }
.hover-border-blue:hover  { border-color: var(--blue) }
.hover-border-navy:hover  { border-color: var(--navy) }
.hover-border-teal:hover  { border-color: var(--teal) }
.hover-border-green:hover { border-color: var(--green) }
.hover-border-olive:hover { border-color: var(--olive) }
.hover-border-lime:hover  { border-color: var(--lime) }

.hover-border-yellow:hover  { border-color: var(--yellow) }
.hover-border-orange:hover  { border-color: var(--orange) }
.hover-border-red:hover     { border-color: var(--red) }
.hover-border-fuchsia:hover { border-color: var(--fuchsia) }
.hover-border-purple:hover  { border-color: var(--purple) }
.hover-border-maroon:hover  { border-color: var(--maroon) }

.hover-border-darken-1:hover { border-color: var(--darken-1) }
.hover-border-darken-2:hover { border-color: var(--darken-2) }
.hover-border-darken-3:hover { border-color: var(--darken-3) }
.hover-border-darken-4:hover { border-color: var(--darken-4) }

.hover-border-lighten-1:hover { border-color: var(--lighten-1) }
.hover-border-lighten-2:hover { border-color: var(--lighten-2) }
.hover-border-lighten-3:hover { border-color: var(--lighten-3) }
.hover-border-lighten-4:hover { border-color: var(--lighten-4) }