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

//
// Jump link
//

@mixin u-jump-link(
  $jump-link-class: 'a-link--jump',
  $jump-link-text-class: 'a-link__text',
  $is-gold: false
) {
  .#{$jump-link-class} {
    @if $is-gold {
      font-size: math.div(14px, $base-font-size-px) + rem;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--gold-80);
      letter-spacing: 1px;

      .#{$jump-link-class}__text {
        color: var(--gray);

        /* TODO: `word-break: break-word` is deprecated should be converted to
           `overflow-wrap: anywhere` combined with `word-break: normal` */
        /* stylelint-disable declaration-property-value-keyword-no-deprecated */
        word-break: break-word;
        /* stylelint-enable declaration-property-value-keyword-no-deprecated */
      }
    } @else {
      font-weight: 500;
    }

    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      position: relative;
      display: flex;
      align-items: center;
      gap: math.div(5px, $base-font-size-px) + rem;

      box-sizing: border-box;
      padding-top: math.div(10px, $base-font-size-px) + em;
      padding-bottom: math.div(10px, $base-font-size-px) + em;

      // 100% width is needed when block or jump link are applied to a <button>.
      width: 100%;

      // Only right-hand align arrow icons.
      .cf-icon-svg--right {
        margin-left: auto;
      }

      .#{$jump-link-text-class} {
        text-decoration: none;

        // Arbitrary high value for flex-shrink to prevent squeezing of the icon
        // when the link text is very long.
        flex-shrink: 10;
      }
    }
  }

  // We need to separate out the jump link.
  a.#{$jump-link-class} {
    @if $is-gold {
      border-color: var(--gold-80);

      @include u-link-colors(var(--gold-80));

      .#{$jump-link-class}__text {
        border-bottom-color: var(--gold-80);
      }
    }

    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      text-decoration: none;
      border-top-style: dotted;
      border-bottom-style: dotted;
      border-top-width: 1px;
      border-bottom-width: 1px;

      &:hover {
        border-top-style: solid;
        border-bottom-style: solid;
      }

      // We create a faux focus rectangle in the ::after pseudoelement to better
      // control the positioning of the focus rectangle, which would overwise
      // overlap the top border of the jumplink when it appears in a group.
      &:focus {
        outline: none;

        &::after {
          content: '';
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          outline: 1px dotted var(--gray);
          outline-offset: 2px;
        }
      }
    }
  }
}

@mixin u-jump-link-group($jump-link-class: 'a-link--jump') {
  // Mobile only.
  @include respond-to-max($bp-xs-max) {
    // Handle the borders of jump links that are adjacent in a list.
    li:has(.#{$jump-link-class}) + li:has(.#{$jump-link-class}) {
      .#{$jump-link-class} {
        position: relative;
        border-top: none;
      }

      a.#{$jump-link-class}:hover::before,
      a.#{$jump-link-class}:focus::before {
        position: absolute;
        top: -1px;
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        border-top: 1px solid currentcolor;
      }
      a.#{$jump-link-class}:focus::before {
        border-top-style: dotted;
      }
    }
  }
}