Refactor Claro's action-link stylesheet

Problem/Motivation

This is a child of #3324398: [META] Update Claro CSS with new coding standards and part of #3254529: [PLAN] Drupal CSS Modernization Initiative.

Steps to reproduce

The stylesheet at https://git.drupalcode.org/project/drupal/-/blob/10.0.x/core/themes/claro/css/components/action-link.pcss.css needs to be refactored to make use of modern CSS and Drupal core's PostCSS tooling.

Proposed resolution

Use CSS Logical Properties where appropriate
Use CSS nesting where appropriate

Proposed resolution

• Use CSS Logical Properties where appropriate.
• Use CSS nesting where appropriate.
• Use existing variables (variables.pcss.css) where appropriate. Follow the proposed Drupal CSS coding standards to name the variables.
  • Add a comment when there's a value where there is not a variable like font-size: 1.23rem; /* @todo One off value. */
  • When possible, set variables at the root of the component and then map them to global theme variables:
    

    .entity-meta {
      --entity-meta-title-font-size: var(--font-size-h5);
    
      ... more style
    }
    
    .entity-meta__title {
      font-size: var(--entity-meta-title-font-size);
    }
    

Out of scope

• Changing CSS classes
• Drupal 9 patches

User interface changes

None. There should be no visual differences.
Please post before/after screenshots and make sure they look the same.