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

.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',
  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)
);