@use "sass:color";
@use "~@codecademy/gamut-styles/utils" as *;
@use "variables";

// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-variant($color, $background, $border: transparent) {
  $active-background: color.mix($color-black, $background);

  @if $border == transparent {
    $active-border: transparent;
    $active-border-hover: transparent;
  }

  color: $color;
  background-color: $background;
  border-color: $border;

  &:hover {
    box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
  }

  &:focus-visible {
    box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $background;
  }

  &:focus-visible,
  &:hover {
    text-decoration: none;
    color: $color;

    &:active {
      box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
    }
  }

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

  &:disabled {
    background-color: variables.$btn-disabled-color;

    &:hover {
      box-shadow: none;
    }
  }
}

@mixin button-flat-variant($color) {
  color: $color;
  background-color: transparent;

  &:hover,
  &:active {
    box-shadow: none;
  }

  &:focus-visible {
    box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color;
  }

  &:disabled {
    color: variables.$btn-disabled-color;
    background-color: transparent;
  }
}

// Button sizes
@mixin button-size(
  $padding-y,
  $padding-x,
  $font-size,
  $line-height,
  $min-width
) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  line-height: $line-height;
  min-width: $min-width;

  &.fit-text {
    min-width: 0;
    min-height: 0;
  }
}

@mixin button-variants($name, $color, $background, $border: transparent) {
  .btn-#{$name} {
    @include button-variant($color, $background, $border);
    &.flat {
      @include button-flat-variant($background);
    }
    @content;
  }
  .link-#{$name} {
    font-weight: bold;
    @include font-smoothing;
    color: $background;
    text-decoration: underline;

    &:disabled {
      color: variables.$btn-disabled-color;
    }
  }
}