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

//
// Button link
//

// TODO: Refactor the rule combos for simplicity

.a-btn--link {
  padding: 0;

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

  &,
  &:link,
  &:visited {
    text-decoration-color: $link-underline;
    background-color: transparent;
    color: $link-text;
  }

  &:hover,
  &.hover {
    text-decoration-color: $link-underline-hover;
    text-decoration-style: solid;
    background-color: transparent;
    color: $link-text-hover;
  }

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

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

  //
  // Secondary button link
  //

  &.a-btn--secondary {
    &,
    &:link,
    &:visited {
      text-decoration-color: $btn-secondary-bg;
      background-color: transparent;
      color: $btn-secondary-bg;
    }

    &:hover,
    &.hover {
      text-decoration-color: $btn-secondary-bg-hover;
      color: $btn-secondary-bg-hover;
    }

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

    &:active,
    &.active {
      text-decoration-color: $btn-secondary-bg-active;
      color: $btn-secondary-bg-active;
    }
  }

  //
  // Destructive action button link
  //

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

    &:hover,
    &.hover {
      text-decoration-color: $btn-warning-bg-hover;
      color: $btn-warning-bg-hover;
    }

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

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