//------------------------
//  Background Colors   ||
//------------------------

//------------
//  THEME   ||
//------------
@each $key, $val in $theme-colors {
    .bg-#{$key},
    .hover\:bg-#{$key}:hover
    {
        background-color: #{$val} !important;
        color: fgColor($val);
    }
}

//------------
//  AMBER   ||
//------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-amber,
        .hover\:bg-amber:hover {
            background-color: darken($amber-base, $i * $color-offset) !important;
            color: fgColor(darken($amber-base, $i * $color-offset));
        }
        .bg-amber-#{$i*100},
        .hover\:bg-amber-#{$i*100}:hover {
            background-color: darken($amber-base, $i * $color-offset) !important;
            color: fgColor(darken($amber-base, $i * $color-offset));
        }
    }

    @else {

        .bg-amber-#{$i*100},
        .hover\:bg-amber-#{$i*100}:hover {
            background-color: darken($amber-base, $i * $color-offset) !important;
            color: fgColor(darken($amber-base, $i * $color-offset));
        }
    }

}


//-----------
//  AQUA   ||
//-----------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-aqua,
        .hover\:bg-aqua:hover {
            background-color: darken($aqua-base, $i * $color-offset) !important;
            color: fgColor(darken($aqua-base, $i * $color-offset));
        }
        .bg-aqua-#{$i*100},
        .hover\:bg-aqua-#{$i*100}:hover {
            background-color: darken($aqua-base, $i * $color-offset) !important;
            color: fgColor(darken($aqua-base, $i * $color-offset));
        }
    }

    @else {

        .bg-aqua-#{$i*100},
        .hover\:bg-aqua-#{$i*100}:hover {
            background-color: darken($aqua-base, $i * $color-offset) !important;
            color: fgColor(darken($aqua-base, $i * $color-offset));
        }
    }

}

//-----------
//  BLUE   ||
//-----------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-blue,
        .hover\:bg-blue:hover {
            background-color: darken($blue-base, $i * $color-offset) !important;
            color: fgColor(darken($blue-base, $i * $color-offset));
        }
        .bg-blue-#{$i*100},
        .hover\:bg-blue-#{$i*100}:hover {
            background-color: darken($blue-base, $i * $color-offset) !important;
            color: fgColor(darken($blue-base, $i * $color-offset));
        }
    }

    @else {

        .bg-blue-#{$i*100},
        .hover\:bg-blue-#{$i*100}:hover {
            background-color: darken($blue-base, $i * $color-offset) !important;
            color: fgColor(darken($blue-base, $i * $color-offset));
        }
    }

}


//------------
//  BROWN   ||
//------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-brown,
        .hover\:bg-brown:hover {
            background-color: darken($brown-base, $i * $color-offset * .9) !important;
            color: fgColor(darken($brown-base, $i * $color-offset * .9));
        }
        .bg-brown-#{$i*100},
        .hover\:bg-brown-#{$i*100}:hover {
            background-color: darken($brown-base, $i * $color-offset * .9) !important;
            color: fgColor(darken($brown-base, $i * $color-offset * .9));
        }
    }

    @else {

        .bg-brown-#{$i*100},
        .hover\:bg-brown-#{$i*100}:hover {
            background-color: darken($brown-base, $i * $color-offset * .9) !important;
            color: fgColor(darken($brown-base, $i * $color-offset * .9));
        }
    }

}


//-----------
//  CYAN   ||
//-----------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-cyan,
        .hover\:bg-cyan:hover {
            background-color: darken($cyan-base, $i * $color-offset) !important;
            color: fgColor(darken($cyan-base, $i * $color-offset));
        }
        .bg-cyan-#{$i*100},
        .hover\:bg-cyan-#{$i*100}:hover {
            background-color: darken($cyan-base, $i * $color-offset) !important;
            color: fgColor(darken($cyan-base, $i * $color-offset));
        }
    }

    @else {

        .bg-cyan-#{$i*100},
        .hover\:bg-cyan-#{$i*100}:hover {
            background-color: darken($cyan-base, $i * $color-offset) !important;
            color: fgColor(darken($cyan-base, $i * $color-offset));
        }
    }

}


//----------------
//  BLUE-GREY   ||
//----------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-blue-grey,
        .hover\:bg-blue-grey:hover {
            background-color: darken($blue-grey-base, $i * $color-offset) !important;
            color: fgColor(darken($blue-grey-base, $i * $color-offset));
        }
        .bg-blue-grey-#{$i*100},
        .hover\:bg-blue-grey-#{$i*100}:hover {
            background-color: darken($blue-grey-base, $i * $color-offset) !important;
            color: fgColor(darken($blue-grey-base, $i * $color-offset));
        }
    }

    @else {

        .bg-blue-grey-#{$i*100},
        .hover\:bg-blue-grey-#{$i*100}:hover {
            background-color: darken($blue-grey-base, $i * $color-offset) !important;
            color: fgColor(darken($blue-grey-base, $i * $color-offset));
        }
    }

}


//------------
//  GREEN   ||
//------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-green,
        .hover\:bg-green:hover {
            background-color: darken($green-base, $i * $color-offset) !important;
            color: fgColor(darken($green-base, $i * $color-offset));
        }
        .bg-green-#{$i*100},
        .hover\:bg-green-#{$i*100}:hover {
            background-color: darken($green-base, $i * $color-offset) !important;
            color: fgColor(darken($green-base, $i * $color-offset));
        }
    }

    @else {

        .bg-green-#{$i*100},
        .hover\:bg-green-#{$i*100}:hover {
            background-color: darken($green-base, $i * $color-offset) !important;
            color: fgColor(darken($green-base, $i * $color-offset));
        }
    }

}


//-------------
//  INDIGO   ||
//-------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-indigo,
        .hover\:bg-indigo:hover {
            background-color: darken($indigo-base, $i * $color-offset) !important;
            color: fgColor(darken($indigo-base, $i * $color-offset));
        }
        .bg-indigo-#{$i*100},
        .hover\:bg-indigo-#{$i*100}:hover {
            background-color: darken($indigo-base, $i * $color-offset) !important;
            color: fgColor(darken($indigo-base, $i * $color-offset));
        }
    }

    @else {

        .bg-indigo-#{$i*100},
        .hover\:bg-indigo-#{$i*100}:hover {
            background-color: darken($indigo-base, $i * $color-offset) !important;
            color: fgColor(darken($indigo-base, $i * $color-offset));
        }
    }

}



//-------------
//  KHAKI   ||
//-------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-khaki,
        .hover\:bg-khaki:hover {
            background-color: darken($khaki-base, $i * $color-offset) !important;
            color: fgColor(darken($khaki-base, $i * $color-offset));
        }
        .bg-khaki-#{$i*100},
        .hover\:bg-khaki-#{$i*100}:hover {
            background-color: darken($khaki-base, $i * $color-offset) !important;
            color: fgColor(darken($khaki-base, $i * $color-offset));
        }
    }

    @else {

        .bg-khaki-#{$i*100},
        .hover\:bg-khaki-#{$i*100}:hover {
            background-color: darken($khaki-base, $i * $color-offset) !important;
            color: fgColor(darken($khaki-base, $i * $color-offset));
        }
    }

}



//-------------
//  LIME   ||
//-------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-lime,
        .hover\:bg-lime:hover {
            background-color: darken($lime-base, $i * $color-offset) !important;
            color: fgColor(darken($lime-base, $i * $color-offset));
        }
        .bg-lime-#{$i*100},
        .hover\:bg-lime-#{$i*100}:hover {
            background-color: darken($lime-base, $i * $color-offset) !important;
            color: fgColor(darken($lime-base, $i * $color-offset));
        }
    }

    @else {

        .bg-lime-#{$i*100},
        .hover\:bg-lime-#{$i*100}:hover {
            background-color: darken($lime-base, $i * $color-offset) !important;
            color: fgColor(darken($lime-base, $i * $color-offset));
        }
    }

}

//-------------
//  ORANGE   ||
//-------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-orange,
        .hover\:bg-orange:hover {
            background-color: darken($orange-base, $i * $color-offset) !important;
            color: fgColor(darken($orange-base, $i * $color-offset));
        }
        .bg-orange-#{$i*100},
        .hover\:bg-orange-#{$i*100}:hover {
            background-color: darken($orange-base, $i * $color-offset) !important;
            color: fgColor(darken($orange-base, $i * $color-offset));
        }
    }

    @else {

        .bg-orange-#{$i*100},
        .hover\:bg-orange-#{$i*100}:hover {
            background-color: darken($orange-base, $i * $color-offset) !important;
            color: fgColor(darken($orange-base, $i * $color-offset));
        }
    }

}



//-------------
//  PINK   ||
//-------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-pink,
        .hover\:bg-pink:hover {
            background-color: darken($pink-base, $i * $color-offset) !important;
            color: fgColor(darken($pink-base, $i * $color-offset));
        }
        .bg-pink-#{$i*100},
        .hover\:bg-pink-#{$i*100}:hover {
            background-color: darken($pink-base, $i * $color-offset) !important;
            color: fgColor(darken($pink-base, $i * $color-offset));
        }
    }

    @else {

        .bg-pink-#{$i*100},
        .hover\:bg-pink-#{$i*100}:hover {
            background-color: darken($pink-base, $i * $color-offset) !important;
            color: fgColor(darken($pink-base, $i * $color-offset));
        }
    }

}


//-------------
//  PURPLE   ||
//-------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-purple,
        .hover\:bg-purple:hover {
            background-color: darken($purple-base, $i * $color-offset) !important;
            color: fgColor(darken($purple-base, $i * $color-offset));
        }
        .bg-purple-#{$i*100},
        .hover\:bg-purple-#{$i*100}:hover {
            background-color: darken($purple-base, $i * $color-offset) !important;
            color: fgColor(darken($purple-base, $i * $color-offset));
        }
    }

    @else {

        .bg-purple-#{$i*100},
        .hover\:bg-purple-#{$i*100}:hover {
            background-color: darken($purple-base, $i * $color-offset) !important;
            color: fgColor(darken($purple-base, $i * $color-offset));
        }
    }

}



//-------------
//  RED   ||
//-------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-red,
        .hover\:bg-red:hover {
            background-color: darken($red-base, $i * $color-offset) !important;
            color: fgColor(darken($red-base, $i * $color-offset));
        }
        .bg-red-#{$i*100},
        .hover\:bg-red-#{$i*100}:hover {
            background-color: darken($red-base, $i * $color-offset) !important;
            color: fgColor(darken($red-base, $i * $color-offset));
        }
    }

    @else {

        .bg-red-#{$i*100},
        .hover\:bg-red-#{$i*100}:hover {
            background-color: darken($red-base, $i * $color-offset) !important;
            color: fgColor(darken($red-base, $i * $color-offset));
        }
    }

}



//-------------
//  TEAL   ||
//-------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-teal,
        .hover\:bg-teal:hover {
            background-color: darken($teal-base, $i * $color-offset) !important;
            color: fgColor(darken($teal-base, $i * $color-offset));
        }
        .bg-teal-#{$i*100},
        .hover\:bg-teal-#{$i*100}:hover {
            background-color: darken($teal-base, $i * $color-offset) !important;
            color: fgColor(darken($teal-base, $i * $color-offset));
        }
    }

    @else {

        .bg-teal-#{$i*100},
        .hover\:bg-teal-#{$i*100}:hover {
            background-color: darken($teal-base, $i * $color-offset) !important;
            color: fgColor(darken($teal-base, $i * $color-offset));
        }
    }

}


//-------------
//  YELLOW   ||
//-------------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-yellow,
        .hover\:bg-yellow:hover {
            background-color: darken($yellow-base, $i * $color-offset) !important;
            color: fgColor(darken($yellow-base, $i * $color-offset));
        }
        .bg-yellow-#{$i*100},
        .hover\:bg-yellow-#{$i*100}:hover {
            background-color: darken($yellow-base, $i * $color-offset) !important;
            color: fgColor(darken($yellow-base, $i * $color-offset));
        }
    }

    @else {

        .bg-yellow-#{$i*100},
        .hover\:bg-yellow-#{$i*100}:hover {
            background-color: darken($yellow-base, $i * $color-offset) !important;
            color: fgColor(darken($yellow-base, $i * $color-offset));
        }
    }

}


//----------
//  GREY  ||
//----------
@for $i from 1 to $color-shades {
    @if ($i==5) {
        .bg-grey,
        .hover\:bg-grey:hover {
            background-color: darken($grey-base, $i * $color-offset-grey) !important;
            color: fgColor(darken($grey-base, $i * $color-offset-grey));
        }
        .bg-grey-#{$i*100},
        .hover\:bg-grey-#{$i*100}:hover {
            background-color: darken($grey-base, $i * $color-offset-grey) !important;
            color: fgColor(darken($grey-base, $i * $color-offset-grey));
        }
    }

    @else {

        .bg-grey-#{$i*100},
        .hover\:bg-grey-#{$i*100}:hover {
            background-color: darken($grey-base, $i * $color-offset-grey) !important;
            color: fgColor(darken($grey-base, $i * $color-offset-grey));
        }
    }

}

//------------
//   DARK   ||
//------------
.bg-dark,
.hover\:bg-dark:hover {
    background-color: $dark !important;
    color: fgColor($dark);
}

//------------
//   BLACK   ||
//------------
.bg-black,
.hover\:bg-black:hover {
    background-color: $black !important;
    color: fgColor($black);
}

//-------------
//   WHITE   ||
//-------------
.bg-white,
.hover\:bg-white:hover,
.bg-light,
.hover\:bg-light:hover {
    background-color: $white !important;
    color: fgColor($white);
}

//-------------
//   WHITE   ||
//-------------
.bg-off-white,
.hover\:bg-off-white:hover {
    background-color: $off-white !important;
    color: fgColor($off-white);
}

//----------------
//   TRANSPARENT   ||
//----------------
.bg-transparent,
.hover\:bg-transparent:hover {
    background-color: transparent !important;
}