// Hydrogen / Components / Dialog

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

@mixin h2-component-dialog-generic(
  $focus-color,
  $dialogSmall,
  $dialogMedium,
  $dialogLarge,
  $padding,
  $mediumQuery,
  $largeQuery
) {
  display: none;
  height: 100vh;
  opacity: 0;
  outline: none;
  position: fixed;
  transform: translate(-200vw, 0%);
  transition: all 0s ease;
  width: 100vw;
  z-index: 1000000000;

  &.h2-dialog-height {
    display: block;
  }

  &.h2-dialog-contained {
    height: auto;
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    [data-h2-dialog-wrapper] {
      opacity: 1;
      transform: translate(0, 0);
      transition: transform .15s ease .1s, opacity .15s ease .1s;
    }

  }

  &.h2-dialog-overflowing {
    box-sizing: border-box;
    height: 100vh;
    opacity: 1;
    overflow: auto;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);

    [data-h2-dialog-wrapper] {
      margin-top: 10vh;
      margin-bottom: 10vh;
      opacity: 1;
      transform: translate(0, 0);
      transition: transform .15s ease .1s, opacity .15s ease .1s;
    }

  }

  [data-h2-dialog-wrapper] {
    background-color: white;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    opacity: 0;
    transform: translate(0, 5vh);
    width: $dialogSmall;
    @media #{$mediumQuery} {
      width: $dialogMedium;
    }
    @media #{$largeQuery} {
      width: $dialogLarge;
    }
  }

  [data-h2-dialog-title] {
    // padding-right: calc(#{$padding} * 2);
    position: relative;

    [data-h2-dialog-exit-trigger] {
      float: right;

      &:focus {
        box-shadow: -1px -1px 0 $focus-color, 0 -1px 0 $focus-color, 1px -1px 0 $focus-color, 1px 0 0 $focus-color, 1px 1px 0 $focus-color, 0 1px 0 $focus-color, -1px 1px 0 $focus-color, -1px 0 0 $focus-color;
        outline: none;
      }

    }

  }

  // [data-h2-dialog-content] {}

  // [data-h2-dialog-actions] {}

}

@mixin h2-component-dialog-overlay-generic() {
  height: 100vh;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-100vw, 0);
  transition: transform 0s linear .4s, opacity .1s ease .15s;
  width: 100vw;
  z-index: 100000000;

  &.h2-active {
    opacity: 1;
    transform: translate(0, 0);
    transition: transform 0s linear, opacity .1s ease;
  }

}

@mixin h2-component-dialog-overlay-color(
  $color
) {
  background-color: rgba($color, .9);
}

@mixin h2-component-dialog-overlay-opacity(
  $color,
  $opacity
) {
  background-color: rgba($color, $opacity);
}

@mixin h2-component-dialog-overlay-gradient(
  $gradient,
  $opacity
) {
  background-image: $gradient;
  &.h2-active {
    opacity: $opacity;
  }
}

@mixin h2-component-dialog-trigger-generic() {}