@use 'sass:math';
@use './vars.scss' as *;
@use '@cfpb/cfpb-design-system/src/abstracts' as *;

//
// Default button
//

button.a-btn::-moz-focus-inner,
input.a-btn::-moz-focus-inner {
  // Fixes inconsistent button.btn height in Firefox.
  // Helps with inconsistent input.btn height in Firefox but not completely.
  border: 0;
}

@mixin u-btn-divider() {
  content: '';
  border-left: 1px solid $btn-divider;
  order: 2;
  place-self: normal;
}

@mixin a-btn() {
  appearance: none;
  display: flex;
  gap: math.div(10px, $base-font-size-px) + rem;

  box-sizing: border-box;
  padding: math.div($btn-v-padding, $btn-font-size) + em
    math.div($btn-h-padding, $btn-font-size) + em;
  border: 0;
  margin: 0;
  border-radius: math.div($btn-border-radius-size, $btn-font-size) + em;
  cursor: pointer;
  font-size: math.div($btn-font-size, $base-font-size-px) + em;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.1s;
  width: fit-content;
  height: fit-content;
  justify-content: center;
  align-items: center;

  &,
  &:link,
  &:visited {
    background-color: $btn-bg;
    color: $btn-text;
  }

  &:hover,
  &.hover,
  &:focus,
  &.focus {
    background-color: $btn-bg-hover;
    color: $btn-text;
  }

  &:focus,
  &.focus {
    outline: 1px dotted $btn-bg;

    // The outline-offset property is not supported everywhere (e.g. IE)
    // but it adds a nice touch in browsers where it is.
    outline-offset: 1px;
  }

  &:active,
  &.active {
    background-color: $btn-bg-active;
  }

  //
  // Secondary button
  //

  &--secondary {
    &,
    &:link,
    &:visited {
      background-color: $btn-secondary-bg;
      color: $btn-secondary-text;
      box-shadow: 0 0 0 1px $btn-secondary-border inset;
    }

    &:hover,
    &.hover,
    &:focus,
    &.focus {
      background-color: $btn-secondary-bg-hover;
      color: $btn-secondary-text-hover;
      box-shadow: 0 0 0 1px $btn-secondary-border-hover inset;
    }

    &:focus,
    &.focus {
      outline-color: $btn-secondary-border;
    }

    &:active,
    &.active {
      background-color: $btn-secondary-bg-active;
      color: $btn-secondary-text-active;
      box-shadow: 0 0 0 1px $btn-secondary-border-active inset;
    }
  }

  //
  // Destructive action button
  //

  &--warning {
    &,
    &:link,
    &:visited {
      background-color: $btn-warning-bg;
      color: $btn-warning-text;
    }

    &:hover,
    &.hover,
    &:focus,
    &.focus {
      background-color: $btn-warning-bg-hover;
    }

    &:focus,
    &.focus {
      outline-color: $btn-warning-bg;
    }

    &:active,
    &.active {
      background-color: $btn-warning-bg-active;
    }
  }

  //
  // Disabled button
  //

  &--disabled,
  &[disabled],
  &[aria-disabled='true'] {
    &,
    &:link,
    &:visited,
    &:hover,
    &.hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: $btn-disabled-bg;
      color: $btn-disabled-text;
      cursor: default; // Fallback for IE/Opera
      cursor: not-allowed;
    }

    &:focus,
    &.focus {
      outline-color: $btn-disabled-outline;
    }
  }

  //
  // Full width button on x-small screens
  //
  &--full-on-xs {
    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      width: 100%;
    }
  }

  // Set either the text or icon as the last item in the button.
  &:has(svg + span) {
    span {
      order: 3;
    }
  }

  &:has(span + svg) {
    svg {
      order: 3;

      // Prevent icon from shrinking when button wraps.
      flex: none;
    }
  }

  // Handle button with icon divider logic.
  &:not(.a-btn--hide-icon):has(svg + span)::before,
  &:not(.a-btn--hide-icon):has(span + svg)::before {
    @include u-btn-divider;
  }

  // Handle different coloring in divider.
  &--secondary:has(svg)::before {
    border-color: $btn-secondary-divider !important;
  }

  &--warning:has(svg)::before {
    border-color: $btn-warning-divider !important;
  }

  &--disabled:has(svg)::before,
  &[disabled]:has(svg)::before,
  &[aria-disabled='true']:has(svg)::before {
    border-color: $btn-disabled-divider !important;
  }

  // Hide the icon if the a-btn--hide-icon modifier is set.
  // Useful for showing and hiding a loading icon, for example.
  &--hide-icon {
    svg {
      display: none;
    }
  }
}

.a-btn {
  @include a-btn;
}