/*------------------------------------
  Background Colors
------------------------------------*/
/* Basic Colors
------------------------------------*/
/* Main Colors */
.g-bg-main {
  background-color: $g-bg-color-main !important;
}

/* Main Secondary */
.g-bg-secondary {
  background-color: $g-bg-color-secondary !important;
}

/* Primary Colors */
.g-bg-primary {
  background-color: $g-color-primary !important;

  // Hover
  &--hover:hover {
    background-color: $g-color-primary !important;
  }

  .u-block-hover:hover &--hover {
    background-color: $g-color-primary;
  }

  &--parent-hover {
    .g-parent:hover & {
      background-color: $g-color-primary !important;
    }
  }

  // Active
  &--active {
    &.active,
    .active & {
      background-color: $g-color-primary !important;
    }
  }

  &--parent-active {
    .g-parent.active & {
      background-color: $g-color-primary !important;
    }
  }

  //Pseudo-elements background color
  &--before::before,
  &--after::after {
    background-color: $g-color-primary !important;
  }

  // Primary dark
  &-dark {
    &-v1 {
      background-color: $g-color-primary-dark-v1 !important;
    }
    &-v2 {
      background-color: $g-color-primary-dark-v2 !important;
    }
    &-v3 {
      background-color: $g-color-primary-dark-v3 !important;
    }
  }

  // Primary opacity
  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-primary, .1) !important;
    }
    &-0_2 {
      background-color: rgba($g-color-primary, .2) !important;

      &--hover:hover {
        background-color: rgba($g-color-primary, .2) !important;
      }

      &--hover--after:hover::after {
        background-color: rgba($g-color-primary, .2) !important;
      }

      &--active {
        .active & {
          background-color: rgba($g-color-primary, .2) !important;
        }
      }

      &--before::before,
      &--after::after {
        background-color: rgba($g-color-primary, .2) !important;
      }
    }
    &-0_3 {
      background-color: rgba($g-color-primary, .3) !important;

      &--hover:hover {
        background-color: rgba($g-color-primary, .3) !important;
      }

      &--hover--after:hover::after {
        background-color: rgba($g-color-primary, .3) !important;
      }

      &--active {
        .active & {
          background-color: rgba($g-color-primary, .3) !important;
        }
      }

      &--before::before,
      &--after::after {
        background-color: rgba($g-color-primary, .3) !important;
      }
    }

    &-0_4 {
      background-color: rgba($g-color-primary, .4) !important;

      &--hover:hover {
        background-color: rgba($g-color-primary, .4) !important;
      }
      &--hover--after:hover::after {
        background-color: rgba($g-color-primary, .4) !important;
      }
      &--after::after {
        background-color: rgba($g-color-primary, .4) !important;
      }
    }
    &-0_6 {
      background-color: rgba($g-color-primary, .6) !important;

      &--hover:hover {
        background-color: rgba($g-color-primary, .6) !important;
      }
      &--hover--after:hover::after {
        background-color: rgba($g-color-primary, .6) !important;
      }
      &--after::after {
        background-color: rgba($g-color-primary, .6) !important;
      }
    }
    &-0_8 {
      background-color: rgba($g-color-primary, .8) !important;

      &--hover:hover {
        background-color: rgba($g-color-primary, .8) !important;
      }
      &--hover--after:hover::after {
        background-color: rgba($g-color-primary, .8) !important;
      }

      &--before,
      &--after {
        &::after {
          background-color: rgba($g-color-primary, .8) !important;
        }

        &--hover:hover {
          &::after {
            background-color: rgba($g-color-primary, .8) !important;
          }
        }
      }
    }
    &-0_9 {
      background-color: rgba($g-color-primary, .9) !important;

      &--hover:hover {
        background-color: rgba($g-color-primary, .9) !important;
      }
      &--hover--after:hover::after {
        background-color: rgba($g-color-primary, .9) !important;
      }

      &--before,
      &--after {
        &::after {
          background-color: rgba($g-color-primary, .9) !important;
        }

        &--hover:hover {
          &::after {
            background-color: rgba($g-color-primary, .9) !important;
          }
        }
      }
    }
  }
}

/* Black Colors */
.g-bg-black {
  background-color: $g-color-black !important;

  &--hover:hover {
    background-color: $g-color-black !important;
  }

  &--after::after {
    background-color: $g-color-black !important;
  }

  // Black opacity
  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-black, .1) !important;

      &--after::after {
        background-color: rgba($g-color-black, .1) !important;
      }
    }
    &-0_2 {
      background-color: rgba($g-color-black, .2) !important;

      &--after::after {
        background-color: rgba($g-color-black, .2) !important;
      }
    }
    &-0_3 {
      background-color: rgba($g-color-black, .3) !important;

      &--hover {
        &:hover {
          background-color: rgba($g-color-black, .3) !important;
        }
      }

      &--after::after,
      &--before::before {
        background-color: rgba($g-color-black, .3) !important;
      }
      &--hover--after:hover::after {
        background-color: rgba($g-color-black, .3) !important;
      }
    }
    &-0_4 {
      background-color: rgba($g-color-black, .4) !important;

      &--after::after {
        background-color: rgba($g-color-black, .4) !important;
      }
    }
    &-0_5 {
      background-color: rgba($g-color-black, .5) !important;

      &--hover {
        &:hover {
          background-color: rgba($g-color-black, .5) !important;
        }
      }

      &--after::after {
        background-color: rgba($g-color-black, .5) !important;
      }
    }
    &-0_6 {
      background-color: rgba($g-color-black, .6) !important;

      &--hover:hover {
        background-color: rgba($g-color-black, .7) !important;
      }

      &--after::after {
        background-color: rgba($g-color-black, .6) !important;
      }
    }
    &-0_7 {
      background-color: rgba($g-color-black, .7) !important;

      &--hover:hover {
        background-color: rgba($g-color-black, .7) !important;
      }

      &--after::after {
        background-color: rgba($g-color-black, .7) !important;
      }
    }
    &-0_8 {
      background-color: rgba($g-color-black, .8) !important;

      &--after::after {
        background-color: rgba($g-color-black, .8) !important;
      }

      &--hover {
        &:hover {
          background-color: rgba($g-color-black, .8) !important;
        }
      }
    }
    &-0_9 {
      background-color: rgba($g-color-black, .9) !important;

      &--after::after {
        background-color: rgba($g-color-black, .9) !important;
      }

      &--hover {
        &:hover {
          background-color: rgba($g-color-black, .9) !important;
        }
      }
    }
  }
}

/* White Colors */
.g-bg-white {
  background-color: $g-color-white !important;

  //Pseudo-elements background color
  &--before::before,
  &--after::after {
    background-color: $g-color-white !important;
  }

  &--hover:hover,
  &--active.active {
    background-color: $g-color-white !important;
  }

  &--parent-hover {
    .g-parent:hover & {
      background-color: $g-color-white !important;
    }
  }

  //Pseudo-elements background color
  &--before::before,
  &--after::after {
    background-color: $g-color-white !important;
  }

  // White opacity
  &-opacity {
    &-0--after {
      &--parent-hover::after {
        .g-parent:hover & {
          background-color: rgba($g-color-white, 0) !important;
        }
      }
    }

    &-0_05 {
      background-color: rgba($g-color-white, .05) !important;
    }
    &-0_1 {
      background-color: rgba($g-color-white, .1) !important;

      &--after::after {
        background-color: rgba($g-color-white, .1) !important;
      }
    }
    &-0_2 {
      background-color: rgba($g-color-white, .2) !important;

      &--hover:hover {
        background-color: rgba($g-color-white, .2) !important;
      }
    }
    &-0_3 {
      background-color: rgba($g-color-white, .3) !important;

      &--hover:hover {
        background-color: rgba($g-color-white, .3) !important;
      }

      &--after::after {
        background-color: rgba($g-color-white, .3) !important;
      }
    }
    &-0_4 {
      background-color: rgba($g-color-white, .4) !important;

      &--hover:hover {
        background-color: rgba($g-color-white, .4) !important;
      }
    }
    &-0_5 {
      background-color: rgba($g-color-white, .5) !important;

      &--after::after {
        background-color: rgba($g-color-white, .5) !important;
      }
    }
    &-0_7 {
      background-color: rgba($g-color-white, .7) !important;

      &--hover:hover {
        background-color: rgba($g-color-white, .7) !important;
      }

      &--after::after {
        background-color: rgba($g-color-white, .7) !important;
      }
    }
    &-0_8 {
      background-color: rgba($g-color-white, .8) !important;

      &--hover:hover {
        background-color: rgba($g-color-white, .8) !important;
      }

      &--after::after {
        background-color: rgba($g-color-white, .8) !important;
      }

      &--hover--after:hover::after {
        background-color: rgba($g-color-primary, .8) !important;
      }
    }
    &-0_9 {
      background-color: rgba($g-color-white, .9) !important;

      &--hover:hover {
        background-color: rgba($g-color-white, .9) !important;
      }

      &--after::after {
        background-color: rgba($g-color-white, .9) !important;
      }
    }
  }
}

/* Gray Colors */
.g-bg-gray {
  // Dark Gray
  &-dark {
    &-v1 {
      background-color: $g-color-gray-dark-v1 !important;

      &--hover:hover {
        background-color: $g-color-gray-dark-v1 !important;
      }
    }
    &-v2 {
      background-color: $g-color-gray-dark-v2 !important;

      &--hover:hover {
        background-color: $g-color-gray-dark-v2 !important;
      }
    }
    &-v3 {
      background-color: $g-color-gray-dark-v3 !important;

      &--hover:hover {
        background-color: $g-color-gray-dark-v3 !important;
      }
    }
    &-v4 {
      background-color: $g-color-gray-dark-v4 !important;

      &--hover:hover {
        background-color: $g-color-gray-dark-v4 !important;
      }
    }
    &-v5 {
      background-color: $g-color-gray-dark-v5 !important;

      &--hover:hover {
        background-color: $g-color-gray-dark-v5 !important;
      }
    }
  }

  // Light Gray
  &-light {
    &-v1 {
      background-color: $g-color-gray-light-v1 !important;

      &--hover:hover {
        background-color: $g-color-gray-light-v1 !important;
      }
    }
    &-v2 {
      background-color: $g-color-gray-light-v2 !important;

      &--hover:hover {
        background-color: $g-color-gray-light-v2 !important;
      }
    }
    &-v3 {
      background-color: $g-color-gray-light-v3 !important;

      &--hover:hover {
        background-color: $g-color-gray-light-v3 !important;
      }
    }
    &-v4 {
      background-color: $g-color-gray-light-v4 !important;

      &--hover:hover {
        background-color: $g-color-gray-light-v4 !important;
      }
    }
    &-v5 {
      background-color: $g-color-gray-light-v5 !important;

      &--hover:hover {
        background-color: $g-color-gray-light-v5 !important;
      }

      // Active
      &--active {
        &.active,
        .active & {
          background-color: $g-color-gray-light-v5 !important;
        }
      }
    }
  }
}

/* Transparent */
.g-bg-transparent {
  background-color: transparent !important;

  &--hover:hover {
    background-color: transparent !important;
  }

  &--hover--after:hover::after {
    background-color: transparent !important;
  }

  &--parent-hover {
    .g-parent:hover & {
      background-color: transparent !important;
    }
  }
}

/* Complementary Colors
------------------------------------*/
/* Beige Colors */
.g-bg-beige {
  background-color: $g-color-beige !important;
}

/* Color Green */
.g-bg-green {
  background-color: $g-color-green !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-green, .1) !important; // R
    }
  }

  &--hover:hover {
    background-color: $g-color-green !important; // J
  }
}

/* Color Blue */
.g-bg-blue {
  background-color: $g-color-blue !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-blue, .1) !important; // R
    }
    &-0_7 {
      background-color: rgba($g-color-blue, .7) !important; // J
    }
    &-0_9 {
      background-color: rgba($g-color-blue, .9) !important; // Z
    }
  }

  &--hover:hover {
    background-color: $g-color-blue !important; // J
  }
}

/* Color Light Blue */
.g-bg-lightblue {
  background-color: $g-color-lightblue !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-lightblue, .1) !important; // R
    }
  }
}

.g-bg-lightblue-v1 {
  background-color: $g-color-lightblue-v1 !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-lightblue-v1, .1) !important; // R
    }
  }
}

/* Color Dark Blue */
.g-bg-darkblue {
  background-color: $g-color-darkblue !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-darkblue, .1) !important; // R
    }
  }
}

/* Color Indigo */
.g-bg-indigo {
  background-color: $g-color-indigo !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-indigo, .1) !important; // R
    }
  }
}

/* Color Red */
.g-bg-red {
  background-color: $g-color-red !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-red, .1) !important; // R
    }
    &-0_2 {
      background-color: rgba($g-color-red, .2) !important; // O
    }
    &-0_5 {
      background-color: rgba($g-color-red, .5) !important; // J
    }
    &-0_8 {
      background-color: rgba($g-color-red, .8) !important; // P
    }
  }

  &--hover:hover {
    background-color: $g-color-red !important; // J
  }
}

/* Color Light Red */
.g-bg-lightred {
  background-color: $g-color-lightred !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-lightred, .1) !important; // R
    }
  }

  &--hover:hover {
    background-color: $g-color-lightred !important; // Z
  }
}

/* Color Dark Red */
.g-bg-darkred {
  background-color: $g-color-darkred !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-darkred, .1) !important; // R
    }
  }
}

/* Color Purple */
.g-bg-purple {
  background-color: $g-color-purple !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-purple, .1) !important; // R
    }
    &-0_7 {
      background-color: rgba($g-color-purple, .7) !important; // P
    }
    &-0_9 {
      background-color: rgba($g-color-purple, .9) !important; // Z

      &--after::after {
        background-color: rgba($g-color-purple, .9) !important; // J
      }
    }
  }

  &--hover:hover {
    background-color: $g-color-purple !important; // J
  }
}

/* Color Dark Purple */
.g-bg-darkpurple {
  background-color: $g-color-darkpurple !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-darkpurple, .1) !important; // R
    }
  }
}

/* Color Pink */
.g-bg-pink {
  background-color: $g-color-pink !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-pink, .1) !important; // R
    }
    &-0_9 {
      background-color: rgba($g-color-pink, .9) !important; // Z
    }
  }

  &--hover:hover {
    background-color: $g-color-pink !important; // J
  }

  &--before,
  &--after {
    &::after {
      background-color: $g-color-pink !important;
    }

    &--hover:hover {
      &::after {
        background-color: $g-color-pink !important;
      }
    }
  }
}

/* Color Orange */
.g-bg-orange {
  background-color: $g-color-orange !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-orange, .1) !important; // R
    }
  }

  &-opacity {
    &-0_2 {
      background-color: rgba($g-color-orange, .2) !important; // O
    }
  }

  &--hover:hover {
    background-color: $g-color-orange !important; // J
  }
}

/* Color Deep Orange */
.g-bg-deeporange {
  background-color: $g-color-deeporange !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-deeporange, .1) !important; // R
    }
  }

  &--hover:hover {
    background-color: $g-color-deeporange !important; // J
  }
}

/* Color Yellow */
.g-bg-yellow {
  background-color: $g-color-yellow !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-yellow, .1) !important; // R
    }
    &-0_7 {
      background: rgba($g-color-yellow, .7) !important; // J
    }
  }

  &--hover:hover {
    background-color: $g-color-yellow !important; // J
  }
}

/* Color Aqua */
.g-bg-aqua {
  background-color: $g-color-aqua !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-aqua, .1) !important; // R
    }
    &-0_9 {
      background-color: rgba($g-color-aqua, .9) !important; // Z
    }
  }

  &--hover:hover {
    background-color: $g-color-aqua !important; // J
  }
}

/* Color Cyan */
.g-bg-cyan {
  background-color: $g-color-cyan !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-cyan, .1) !important; // R
    }

    &-0_9 {
      background-color: rgba($g-color-cyan, .9) !important;

      &--after::after {
        background-color: rgba($g-color-cyan, .9) !important; // J
      }
    }
  }

  &--hover:hover {
    background-color: $g-color-cyan !important; // J
  }
}

/* Color Teal */
.g-bg-teal {
  background-color: $g-color-teal !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-teal, .1) !important; // R
    }

    &-0_9 {
      background-color: rgba($g-color-teal, .9) !important; // J

      &--after::after {
        background-color: rgba($g-color-teal, .9) !important; // J
      }
    }
  }

  &--hover:hover {
    background-color: $g-color-teal !important; // J
  }
}

/* Color Brown */
.g-bg-brown {
  background-color: $g-color-brown !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-brown, .1) !important; // R
    }
  }

  &--hover:hover {
    background-color: $g-color-brown !important; // Z
  }
}

/* Color Blue Gray */
.g-bg-bluegray {
  background-color: $g-color-bluegray !important;

  &-opacity {
    &-0_1 {
      background-color: rgba($g-color-bluegray, .1) !important; // R
    }
    &-0_2 {
      &--before::before,
      &--after::after {
        background-color: rgba($g-color-bluegray, .2) !important; // Z
      }
    }
    &-0_3 {
      &--before::before,
      &--after::after {
        background-color: rgba($g-color-bluegray, .3) !important; // Z
      }
    }
    &-0_5 {
      background-color: rgba($g-color-bluegray, .5) !important; // Z
    }
    &-0_7 {
      background-color: rgba($g-color-bluegray, .7) !important; // Z
    }
  }

  &--hover:hover {
    background-color: $g-color-bluegray !important; // J
  }
}

//Grayscale
.g-grayscale {
  &-100x {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray;
    -webkit-filter: grayscale(100%);
  }

  &-0 {
    &--parent-hover {
      .g-parent:hover & {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(0%);
      }
    }

    &--hover:hover {
      filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
      -webkit-filter: grayscale(0%);
    }
  }
}