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

.btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  font-weight: variables.$btn-font-weight;
  @include font-smoothing;
  border: 1px solid transparent;
  border-radius: variables.$btn-border-radius;
  user-select: none;
  @include mixins.button-size(
    variables.$btn-padding-y,
    variables.$btn-padding-x,
    variables.$btn-font-size-base,
    variables.$btn-line-height,
    variables.$btn-min-width-sm
  );
  transition: all 0.1s ease-in-out;
}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

@each $name, $color in variables.$btn-swatches {
  @if $name == "brand-yellow" {
    @include mixins.button-variants($name, $color-black, $color);
  } @else if color.channel(color.to-space($color, hsl), "lightness") > 68 {
    @include mixins.button-variants($name, $color-black, $color);
  } @else {
    @include mixins.button-variants($name, $color-white, $color);
  }
}

.round {
  border-radius: variables.$btn-round-border-radius;
}

.square {
  border-radius: 0;
}
//
// Button Sizes
//

.large {
  // line-height: ensure even-numbered height of button next to large input
  @include mixins.button-size(
    variables.$btn-padding-y-lg,
    variables.$btn-padding-x-lg,
    variables.$btn-font-size-lg,
    variables.$btn-line-height-lg,
    variables.$btn-min-width-lg
  );
}

.small {
  // line-height: ensure proper height of button next to small input
  @include mixins.button-size(
    variables.$btn-padding-y-sm,
    variables.$btn-padding-x-sm,
    variables.$btn-font-size-sm,
    variables.$btn-line-height-sm,
    variables.$btn-min-width-sm
  );
}

//
// Block buttovariables.n
//

.block {
  display: flex;
  width: 100%;
}

.caps {
  text-transform: uppercase;
}

.underline {
  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.block {
    width: 100%;
  }
}