/*
 * Copyright IBM Corp. 2022, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
@use '@carbon/react/scss/spacing' as spacing;
@use '@carbon/react/scss/theme' as theme;
@use '@carbon/react/scss/type' as type;
@use '@carbon/react/scss/breakpoint' as breakpoint;
@use '@carbon/react/scss/motion' as motion;

@use '../utils' as *;

.#{with-prefix('anchor-links')} {
  margin-block-start: spacing.$spacing-07;

  + * {
    margin-block-start: calc(spacing.$spacing-11 - spacing.$spacing-03);
  }

  .#{with-prefix('anchor-link')} {
    @include type.type-style('fluid-heading-03', true);

    position: relative;
    display: inline-block;
    color: theme.$text-primary;
    margin-block-end: spacing.$spacing-03;
    margin-inline-start: spacing.$spacing-06;
    text-decoration: none;
    transition: color motion.$duration-fast-02;

    &:hover {
      color: theme.$link-primary;
    }

    &::before {
      position: absolute;
      color: currentColor;
      //"↳"
      content: '\21B3';
      cursor: pointer;
      inset-inline-start: -(spacing.$spacing-06);
    }

    &:focus {
      outline: 2px solid theme.$link-primary;
    }

    @media screen and (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .#{with-prefix('list--small')} .#{with-prefix('anchor-link')} {
    @include type.type-style('body-02');

    margin-block-end: 0;
  }

  // Multiple Columns
  .#{with-prefix('multiple-columns')} {
    @include breakpoint.breakpoint('md') {
      column-count: 2;
    }
  }
}