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

@mixin h2-component-button-reset() {
  padding: 0;
}

@mixin h2-component-button-generic(
  $font-default,
  $focus-color, 
  $gray, 
  $hover-bg-color, 
  $hover-font-color
) {
  background: none;
  border: none;
  cursor: pointer;
  font-family: $font-default;
  outline: none;
  text-align: center;
  transition: all .2s ease;
  vertical-align: middle;

  &: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;
  }

}

@mixin h2-component-button-anchor(
  $font-default,
  $focus-color
) {
  display: inline-block;
  font-family: $font-default;
  max-width: 100%;
  text-decoration: underline;
  vertical-align: middle;

  &: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;
  }

}

@mixin h2-component-button-color(
  $color,
  $gray
) {
  border-color: $color;

  &:disabled,
  &.disabled {
    border-color: lighten($gray, 30%);
  }

}

@mixin h2-component-button-radius(
  $radius
) {
  border-radius: $radius;
  overflow: hidden;
}

@mixin h2-component-button-size(
  $font-small,
  $font-medium,
  $font-large,
  $padding,
  $size
) {
    
  @if $size == "small" {
    font-size: $font-small;
    padding: calc((#{$padding} / 2) * .5) calc(#{$padding} / 2);
  }

  @if $size == "medium" {
    font-size: $font-medium;
    padding: calc(#{$padding} * .5) $padding;
  }

  @if $size == "large" {
    font-size: $font-large;
    padding: calc((#{$padding} * 1.5) * .5) calc(#{$padding} * 1.5);
  }

}

@mixin h2-component-button-style(
  $color,
  $solid-font-color,
  $gray,
  $hover-bg-color,
  $hover-font-color,
  $style
) {

  @if $style == "solid" {
    background: $color;
    border-color: $color;
    border-style: solid;
    border-width: 1px;
    color: $solid-font-color;
  }

  @if $style == "outline" {
    background: none;
    border-color: $color;
    border-style: solid;
    border-width: 1px;
    color: $color;
  }

  @if $style == "clear" {
    background: none;
    border: none;
    color: $color;

    @media (hover: hover) {
      &:hover {
        background: none;
        border: none;
        color: $hover-font-color;
        transition: all .2s ease;
      }
    }

  }

  &:disabled,
  &.disabled {
    background: lighten($gray, 30%);
    border-color: lighten($gray, 30%);
    color: $gray;
    pointer-events: none;
  }

  @media (hover: hover) {
    &:hover {
      background: rgba($hover-bg-color, .2);
      border-color: $hover-bg-color;
      color: $hover-font-color;
      transition: all .2s ease;
    }
  }

}

@mixin h2-component-button-gradient(
  $gradient,
  $color,
  $solid-font-color,
  $gray,
  $hover-bg-color,
  $hover-font-color,
  $style
) {

  @if $style == "solid" {
    background: none;
    border-width: 0;
    color: $solid-font-color;
    position: relative;
    &:before {
      background-image: $gradient;
      content: "";
      display: block;
      height: 100%;
      opacity: 1;
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      transition: all .2s ease;
      width: 100%;
    }
    * {
      position: relative;
    }
    @media (hover: hover) {
      &:hover {
        background: rgba($hover-bg-color, .2);
        color: $hover-font-color;
        transition: all .2s ease;
        &:before {
          opacity: 0;
          transition: all .2s ease;
        }
      }
    }
  }

  @if $style == "outline" {
    background: none;
    border-color: $color;
    border-style: solid;
    border-width: 1px;
    color: $color;
  }

  @if $style == "clear" {
    background: none;
    border: none;
    color: $color;

    @media (hover: hover) {
      &:hover {
        background: none;
        border: none;
        color: $hover-font-color;
        transition: all .2s ease;
      }
    }

  }

  &:disabled,
  &.disabled {
    background: lighten($gray, 30%);
    border-color: lighten($gray, 30%);
    color: $gray;
    pointer-events: none;
  }

  @media (hover: hover) {
    &:hover {
      background: rgba($hover-bg-color, .2);
      border-color: $hover-bg-color;
      color: $hover-font-color;
      transition: all .2s ease;
    }
  }

}