@import (once) "../include/vars";

.bg-transparent {
    background-color: @transparent !important;
}

.bg-hover:hover {background-color: @hoverBackground !important;}
.bg-hover2:hover {background-color: @hoverBackground2 !important;}
.bg-hover-light:hover {background-color: @hoverBackgroundLight !important;}
.bg-hover-light1:hover {background-color: @hoverBackgroundLight1 !important;}
.bg-hover-light2:hover {background-color: @hoverBackgroundLight2 !important;}
.bg-hover-light3:hover {background-color: @hoverBackgroundLight3 !important;}

.bg-facebook {background-color: #4267b2;}
.bg-twitter {background-color: #1DA1F2 ;}
.bg-github {background-color: #24292e;}
.bg-bootstrap {background-color: #563d7c;}
.bg-gitlab {background-color: #e65328;}
.bg-amazon {background-color: #232f3e;}

each(@colorList, {
    .bg-@{value} {background-color: @@value !important;}
    .bg-@{value}-active {&:active {background-color: @@value !important;}}
    .bg-@{value}-hover {&:hover {background-color: @@value !important;}}
    .bg-@{value}-focus {&:focus {background-color: @@value !important;}}
})