/* Background  */

.ahvr-bg-primary,
.ahvr-bg-primary .overlay {
  background: $ahvr-primary-color !important;
}

.ahvr-bg-secondary,
.ahvr-bg-secondary .overlay {
  background: $ahvr-secondary-color !important;
}

.ahvr-bg-primary-light,
.ahvr-bg-primary-light .overlay {
  background: $ahvr-primary-light-color !important;
}

.ahvr-bg-primary-dark,
.ahvr-bg-primary-dark .overlay {
  background: $ahvr-primary-dark-color !important;
}

.ahvr-bg-ahvr-black,
.ahvr-bg-ahvr-black .overlay {
  background: $ahvr-black !important;
}

.ahvr-bg-ahvr-white,
.ahvr-bg-ahvr-white .overlay {
  background: $ahvr-white !important;

  >* {
    color: $ahvr-black !important;
  }
}

/* Background Transparent - 50  */

.ahvr-bg-primary-50,
.ahvr-bg-primary-50 .overlay {
  background: rgba($ahvr-primary-color, .5) !important;
}

.ahvr-bg-secondary-50,
.ahvr-bg-secondary-50 .overlay {
  background: rgba($ahvr-secondary-color, .5) !important;
}

.ahvr-bg-ahvr-black-50,
.ahvr-bg-ahvr-black-50 .overlay {
  background: rgba($ahvr-black, .5) !important;
  color: $ahvr-white;
}

.ahvr-bg-ahvr-white-50,
.ahvr-bg-ahvr-white-50 .overlay {
  background: rgba($ahvr-white, .5) !important;
  color: $ahvr-black !important;

  .middle {
    color: $ahvr-black;
  }
}

/* Background Transparent - 75  */

.ahvr-bg-primary-75,
.ahvr-bg-primary-75 .overlay {
  background: rgba($ahvr-primary-color, .75) !important;
}

.ahvr-bg-secondary-75,
.ahvr-bg-secondary-75 .overlay {
  background: rgba($ahvr-secondary-color, .75) !important;
}

.ahvr-bg-ahvr-black-75,
.ahvr-bg-ahvr-black-75 .overlay {
  background: rgba($ahvr-black, .75) !important;
  color: $ahvr-white;
}

.ahvr-bg-ahvr-white-75,
.ahvr-bg-ahvr-white-75 .overlay {
  background: rgba($ahvr-white, .75) !important;
  color: $ahvr-black !important;

  .middle {
    color: $ahvr-black;
  }
}

/* colors combination */

.ahvr-bg-ahvr-black-primary-50 {
  background: rgba($ahvr-black, .5) !important;

  &:hover .overlay {
    background: rgba($ahvr-primary-color, .5) !important;
  }
}

.ahvr-bg-ahvr-black-primary-75 {
  background: rgba($ahvr-black, .75) !important;

  &:hover .overlay {
    background: rgba($ahvr-primary-color, .75) !important;
  }
}

/* bg-opacities box ======================================== */

.ahvr-bg-primary-box {
  .overlay {
    background-color: rgba($ahvr-primary-color, .75) !important;
  }

  &:hover .overlay {
    background-color: rgba($ahvr-primary-color, .45) !important;
  }
}

.ahvr-bg-secondary-box {
  .overlay {
    background-color: rgba($ahvr-secondary-color, .75) !important;
  }

  &:hover .overlay {
    background-color: rgba($ahvr-secondary-color, .45) !important;
  }
}

.ahvr-bg-ahvr-white-box {
  .overlay {
    background-color: rgba($ahvr-white, .75) !important;
  }

  &:hover .overlay {
    background-color: rgba($ahvr-white, .45) !important;
  }

  .middle {
    color: $ahvr-black;
  }
}

/* bg-opacities circle ======================================== */

.ahvr-bg-primary-circle {
  .spinner {
    background-color: rgba($ahvr-primary-color, 0.25) !important;
  }

  &:hover .spinner {
    background-color: rgba($ahvr-primary-color, 0.6) !important;
  }
}

.ahvr-bg-secondary-circle {
  .spinner {
    background-color: rgba($ahvr-secondary-color, 0.25) !important;
  }

  &:hover .spinner {
    background-color: rgba($ahvr-secondary-color, 0.6) !important;
  }
}

.ahvr-bg-ahvr-white-circle {
  .spinner {
    background-color: rgba($ahvr-white, 0.25) !important;
  }

  &:hover .spinner {
    background-color: rgba($ahvr-white, 0.6) !important;
  }

  .middle {
    color: $ahvr-black !important;
  }
}