// Hydrogen / Components / Blockquote
@use "sass:color";

@mixin h2-component-blockquote-reset() {}

@mixin h2-component-blockquote-generic() {}

@mixin h2-component-blockquote-color(
  $color
) {
  background-color: rgba($color, .2);
  border-color: darken($color, 10%);
}

@mixin h2-component-blockquote-gradient(
  $gradient,
  $color
) {
  background-image: $gradient;
  border-color: darken($color, 10%);
  position: relative;
  &:before {
    background: transparentize(mix(white, $color, 75%), .25);
    content: "";
    display: block;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  * {
    position: relative;
  }
}

@mixin h2-component-blockquote-width(
  $width, 
  $border-thickness-thin, 
  $border-thickness-thick
) {

  @if ($width == "thin") {
    border-left-style: solid;
    border-left-width: $border-thickness-thin;
  }

  @if ($width == "thick") {
    border-left-style: solid;
    border-left-width: $border-thickness-thick;
  }

}