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

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

@mixin h2-component-alert-generic(
  $padding
) {

  [data-h2-alert] {
    box-sizing: border-box;
    padding: calc(#{$padding} / 2);
    position: relative;
    &:not(:last-child) {
      margin-bottom: calc(#{$padding} / 2);
    }
    &.h2-dismissed {
      display: none;
    }
  }

  // Dismissal Trigger
  [data-h2-alert-dismissal-trigger] {
    float: right;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: calc((#{$padding} / 2) * -1);
    margin-right: calc((#{$padding} / 2) * -1);
    min-width: 1rem;
    padding: calc(#{$padding} / 2) $padding;
    position: relative;
  }

}

@mixin h2-component-alert-static() {
  position: relative;
  width: 100%;
}

@mixin h2-component-alert-toast($mqm) {
  margin: 0 auto;
  max-width: 90vw;
  position: fixed;
  right: 5vw;
  bottom: 5vw;
  z-index: 100000;
  @media #{$mqm} {
    max-width: 35rem;
    right: 2rem;
    bottom: 2rem;
  }
}

@mixin h2-component-alert-color($color) {
  background: mix(white, $color, 75%);
  border: 1px solid darken($color, 25%);
  color: darken($color, 25%);
  * {
    color: darken($color, 25%);
  }
}

@mixin h2-component-alert-gradient(
  $gradient,
  $color
) {
  background-image: $gradient;
  border: 1px solid darken(color.scale($color, $lightness: -15%, $saturation: -10%), 25%);
  color: darken(color.scale($color, $lightness: -15%, $saturation: -10%), 25%);
  overflow: hidden;
  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%;
  }
  [data-h2-alert-content] {
    position: relative;
  }
  * {
    color: darken(color.scale($color, $lightness: -15%, $saturation: -10%), 25%);
  }
}