// Hydrogen / Component / Styles

// This reset mixin is used to specify component level style resets if they're needed. These styles only apply to the versioned instance of the component.
@mixin h2-component-overlay-reset() {}

// This mixin specifies generic styles that apply to all variations/combinations of this component.
@mixin h2-component-overlay-generic() {
  position: relative;

  &::before {
    content: " ";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  * {
    position: relative;
  }

}

// Load your custom mixins here.
@mixin h2-component-overlay-image() {
  background-position: center center;
  background-size: cover;
}

@mixin h2-component-overlay-pattern() {
  background-position: center center;
  background-repeat: repeat;
}

@mixin h2-component-overlay(
  $color,
  $opacity
) {

  &::before {
    background-color: $color;
    opacity: $opacity;
  }

}

@mixin h2-component-overlay-gradient(
  $gradient,
  $opacity
) {

  &::before {
    background-image: $gradient;
    opacity: $opacity;
  }

}