xrpl-dev-portal/shared/components/Link/_link-icons.scss

// Link Arrow Icon Styles and Animations
// -----------------------------------------------------------------------------
// Styles for link arrow icons with hover animations that transform arrow to chevron
// Animation: 150ms with custom cubic-bezier per Figma specs

@import "../../../styles/_colors.scss";

// Animation timing per Figma
$bds-link-transition-duration: 150ms;
$bds-link-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);

// Base styles for link icons
.bds-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  svg {
    display: block;

    path {
      stroke: currentColor; // Inherits color from parent link
    }

    .arrow-horizontal {
      transition: transform $bds-link-transition-duration $bds-link-transition-timing;
    }
  }
}

// Internal arrow: horizontal line shrinks from left toward right (toward the chevron)
.bds-link-icon--internal svg .arrow-horizontal {
  transform-origin: right center;
}

// External arrow: diagonal line shrinks toward top-right corner (leaving just the bracket)
.bds-link-icon--external svg .arrow-horizontal {
  transform-origin: 19px 2px; // Top-right corner where diagonal starts
}

// Hover state - shrink/hide the horizontal line to create chevron effect
// Applies to both internal and external icons when not disabled

// Internal: scale the horizontal line from right
a:hover .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal,
a:focus .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal {
  transform: scaleX(0);
}

// External: scale the diagonal line toward the corner (uniform scale for diagonal)
a:hover .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal,
a:focus .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal {
  transform: scale(0);
}

// Disabled state
.bds-link-icon--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  
  svg {
    path {
      // Disabled icons use gray color from theme
      stroke: currentColor;
    }
    
    .arrow-horizontal {
      transition: none; // Disable animation when disabled
    }
  }
}

// Theme-specific disabled colors
html.light,
.light {
  .bds-link-icon--disabled svg path {
    stroke: $gray-400;
  }
}

html.dark,
.dark,
html:not(.light) {
  .bds-link-icon--disabled svg path {
    stroke: $gray-500;
  }
}

// Size variants for internal arrows (wider aspect ratio)
// Responsive: Mobile/Tablet (xs-md, lg) → Desktop (xl)
// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
.bds-link-icon--internal {
  &.bds-link-icon--small {
    // Mobile/Tablet: 14x13
    width: 14px;
    height: 13px;

    // Desktop (xl): 15x14
    @include media-breakpoint-up(xl) {
      width: 15px;
      height: 14px;
    }
  }

  &.bds-link-icon--medium {
    // Mobile/Tablet: 17x14
    width: 17px;
    height: 14px;

    // Desktop (xl): 17x16
    @include media-breakpoint-up(xl) {
      height: 16px;
    }
  }

  &.bds-link-icon--large {
    // Mobile/Tablet: 20x16
    width: 20px;
    height: 16px;

    // Desktop (xl): 26x22
    @include media-breakpoint-up(xl) {
      width: 26px;
      height: 22px;
    }
  }
}

// Size variants for external arrows (square aspect ratio)
// Responsive: Mobile/Tablet (xs-md, lg) → Desktop (xl)
// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
.bds-link-icon--external {
  &.bds-link-icon--small {
    // Same at all breakpoints
    width: 14px;
    height: 14px;
  }

  &.bds-link-icon--medium {
    // Same at all breakpoints
    width: 16px;
    height: 16px;
  }

  &.bds-link-icon--large {
    // Mobile/Tablet: 17x17
    width: 17px;
    height: 17px;

    // Desktop (xl): 21x21
    @include media-breakpoint-up(xl) {
      width: 21px;
      height: 21px;
    }
  }
}