@use "design";
@use "m";

.button {
  overflow: hidden;
  // position: relative;
  text-align: center;

  cursor: pointer;
  user-select: none;

  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 85ms;

  &:not(.ghost) {
    &:not(:disabled) {
      &:focus-visible {
        @include m.focusRingWithSpace;
      }
    }
  }

  &:disabled {
    cursor: not-allowed;

    &:not(.loading) {
      opacity: design.$disabledOpacity;
    }
  }

  &.noWrap {
    white-space: nowrap;
  }

  &.maxHitArea {
    &::after {
      content: "";
      position: absolute;
      inset: 0;
    }
  }

  &.autoWidthButton {
    display: inline-flex;
  }

  &.fullWidthButton {
    width: 100%; // Stupid button elements
    display: flex;
  }

  &.smallButton {
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: design.$weight-display-bold;
    line-height: 1.2;
    min-height: design.px-to-rem(40);
    padding: design.$space-50 design.$space-125;

    &:not(.ghost) {
      min-width: design.px-to-rem(115);
    }
  }

  &.normalButton {
    align-items: center;
    justify-content: center;
    min-width: design.px-to-rem(130);
    min-height: design.px-to-rem(47);
    padding: design.$space-75 design.$space-200;

    border-radius: 1000px;
    font-size: 17px;
    letter-spacing: -0.03em;
    line-height: 1.2;
    font-family: design.$font-brand;
    font-weight: design.$weight-brand-bold;
  }
}

@mixin _createButtonColorStyles(
  $text,
  $bg,
  $hover,
  $active,
  $ghost-text,
  $ghost-hover,
  $ghost-active
) {
  // This mixin should define colors of things only:

  &:not(.ghost) {
    color: $text;
    background-color: $bg;

    &:not(:disabled) {
      @include m.hover {
        background-color: $hover;
      }

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

  &.ghost {
    color: $ghost-text;

    &:not(:disabled) {
      @include m.hover {
        background-color: $ghost-hover;
      }

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

// Create button classes for each color in $buttonColors

@each $color in design.$buttonColors {
  .#{$color}Button {
    &.forceColor {
      @include _createButtonColorStyles(
        $text: var(--#{$color}-forced-button-text),
        $bg: var(--#{$color}-forced-button-bg),
        $hover: var(--#{$color}-forced-button-hover, var(--#{$color}-forced-button-bg)),
        $active: var(--#{$color}-forced-button-active, var(--#{$color}-forced-button-bg)),
        $ghost-text: var(--#{$color}-forced-button-ghost-text),
        $ghost-hover: var(--#{$color}-forced-button-ghost-hover),
        $ghost-active: var(--#{$color}-forced-button-ghost-active)
      );
    }

    // Buttons with `forceColor` are always the color they are set as
    // and don't respond to higher-level changes. Output the styles again
    // with a second set of variables to accomplish this:

    &:not(.forceColor) {
      @include _createButtonColorStyles(
        $text: var(--#{$color}-button-text),
        $bg: var(--#{$color}-button-bg),
        $hover: var(--#{$color}-button-hover, var(--#{$color}-button-bg)),
        $active: var(--#{$color}-button-active, var(--#{$color}-button-bg)),
        $ghost-text: var(--#{$color}-button-ghost-text),
        $ghost-hover: var(--#{$color}-button-ghost-hover),
        $ghost-active: var(--#{$color}-button-ghost-active)
      );
    }
  }
}