/**
* Mixins to buttons.
*/

@mixin btn-base {
  @include text-button;

  position: relative;
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  min-height: multiple(11);
  min-width: 136px;
  padding: $spacing-8 $spacing-32;
  font-weight: $font-weight-semibold;
  text-align: center;
  text-decoration: none;
  font-family: $font-general-sans;
  font-size: 14px;
  font-style: normal;
  color: $color-black;
  transition: color $transition-default;
  z-index: 0;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(101%);
    transition: transform $transition-default;
    z-index: -1;
  }

  @include media-up(lg) {
    &:hover {
      &::before {
        transform: translateY(0);
      }
    }
  }

  span {
    margin: auto;
    position: relative;
    z-index: 1;
  }

  &[disabled],
  &.disabled {
    opacity: 0.6;
  }
}

@mixin btn-primary {
  @include btn-base;

  color: $color-black;
  border: 1px solid $color-black;
  background-color: transparent;

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

  @include media-up(lg) {
    &:hover {
      color: $color-white;
    }
  }

  &:focus {
    outline: 1px dashed $color-black;
  }
}

@mixin btn-primary-active {
  color: $color-white;

  &::before {
    transform: translateY(0);
  }
}

@mixin btn-secondary {
  @include btn-base;

  color: $color-white;
  border: 1px solid $color-white;
  background-color: transparent;

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

  @include media-up(lg) {
    &:hover {
      color: $color-black;
    }
  }

  &:focus {
    outline: 1px dashed $color-white;
  }
}

/**
* Pass a $color and $background-color property to change styling.
* Can only be used with @include.
*/
@mixin btn-color($color: $color-black, $backgroundColor: $color-gray-warm) {
  @include btn-base;

  color: $color;
  border: 1px solid $color;
  background-color: transparent;

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

  @include media-up(lg) {
    &:hover {
      color: $backgroundColor;
    }
  }

  &:focus {
    outline: 1px dashed $color;
  }
}

/**
* Pass a $icon, $color and $hoverColor to setup different icons and colors.
* $icon: make sure the icons exists on @/assets/icons/*.svg
* $color: default $colo-black
* $hoverColor: default $color-black
*/
@mixin btn-icon(
  $icon: 'close',
  $color: $color-black,
  $hoverColor: $color-black
) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  // padding: $spacing-12;
  // background-color: $color-gray-warm;

  &::before {
    display: block;
    flex-shrink: 0;
    width: $spacing-16;
    height: $spacing-16;
    content: '';
    background-color: $color;
    transition:
      background-color $transition-default,
      transform $transition-default;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-origin: content-box;
    mask-image: url('@/assets/icons/#{$icon}.svg');
  }

  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    box-sizing: content-box;
    display: block;
    width: 100%;
    height: 100%;
    padding: 3px;
    pointer-events: none;
    content: '';
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: $spacing-4;
    transition: border-color $transition-default;
    transform: translate(-50%, -50%);
  }

  &:hover,
  &:active {
    &::before {
      background-color: $hoverColor;
    }
  }

  &:active,
  &:focus-visible {
    &::before {
      background-color: $hoverColor;
    }

    &::after {
      border-color: $hoverColor;
    }
  }

  &[disabled],
  &.disabled {
    opacity: 0.6;

    &:focus-visible {
      &::after {
        border-color: $color-gray-warm;
      }
    }
  }

  span {
    @include screen-reader;
  }
}