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

//
// Button link
//

/*
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;
    }

    &:focus,
    &.focus {
      text-decoration-style: solid;
      background-color: transparent;
      outline: 1px dotted $f;
      color: $f;
    }

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

.a-btn--link {
  // Padding added so the focus rectangle falls below the underline.
  padding: 1.5px 0;
  border-radius: 0;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-underline-offset: 4.5px;

  &:has(svg) {
    // Button links should be closer to their icon.
    gap: math.div(5px, $base-font-size-px) + rem;

    // Button links shouldn't have a divider.
    &::before {
      display: none;
    }
  }
}

@include u-btn-link-states(
  '.a-btn--link',
  $link-text,
  $link-text-hover,
  $link-text,
  $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',
  $btn-warning-bg,
  $btn-warning-bg-hover,
  $btn-warning-bg,
  $btn-warning-bg-active
);