// // overlay.scss // Theme utility //

.overlay {

position: relative;
&::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
}

}

// Colors

@each $color, $value in $theme-colors {

// Solid
.overlay-#{$color} {
  @include overlay($value);
}
// Gradient
.overlay-gradient-#{$color}-right {
  @include overlay-gradient($value, right);
}
.overlay-gradient-#{$color}-down {
  @include overlay-gradient($value, bottom);
}
.overlay-gradient-#{$color}-left {
  @include overlay-gradient($value, left);
}

}

// Opacity

@for $i from 1 through 9 {

.overlay-#{$i * 10} {
  &::before {
    opacity: #{$i / 10};
  }
  .bg-white {
    background: rgba(255, 255, 255, 0) !important;
  }
  &.active {
    &::before {
      opacity: 0;
    }
    h5 {
      color: $light !important;
      &.bg-white {
        background: rgba(0, 0, 0, 0.276) !important;
      }
    }
    // .badge {
    //   display: block;
    // }
  }
}

}