@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/abstracts/mixins-button' as *;

/*
  Link text and underline.
  $v: Link link and visited color.
  $h: Link hover color.
  $f: Link focus color.
  $a: Link active color.
  */
@mixin u-btn-link-states($selector, $v, $h, $f, $a) {
  #{$selector} {
    &,
    &:link,
    &:visited {
      text-decoration-color: $v;
      background-color: transparent;
      color: $v;
    }

    &:hover,
    &.hover {
      text-decoration-color: $h;
      text-decoration-style: solid;
      background-color: transparent;
      color: $h;
      box-shadow: none; // Added by secondary variant.
    }

    &:focus-visible,
    &.focus {
      background-color: transparent;
      outline: 1px dotted $f;
      color: $f;
    }

    &:active,
    &.active {
      text-decoration-color: $a;
      text-decoration-style: solid;
      background-color: transparent;
      color: $a;
    }
  }
}

//
// Button link
//

.a-btn--link {
  // Remove any border and background add by primary and secondary button.
  box-shadow: none;
  background-color: transparent !important;

  // Padding added so the focus rectangle falls below the underline.
  padding: 1.5px 0;
  border-radius: 0;
}

@include u-btn-link-states(
  '.a-btn--link',
  var(--link-text),
  var(--link-text-hover),
  var(--link-text),
  var(--link-text-active)
);

//
// Secondary button link
//

// The .a-btn--link.a-btn--secondary combo shouldn't be used,
// so we provide no styles.

//
// Destructive action button link
//

@include u-btn-link-states(
  '.a-btn--link.a-btn--warning',
  var(--btn-warning-bg),
  var(--btn-warning-bg-hover),
  var(--btn-warning-bg),
  var(--btn-warning-bg-active)
);