picocss/scss/content/_link.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "content/link") {
  /**
   * Link
   */

  a,
  [role="link"] {
    #{$✨}color: var(#{$✨}primary);
    #{$✨}background-color: transparent;
    #{$✨}underline: var(#{$✨}primary-underline);
    outline: none;
    background-color: var(#{$✨}background-color); // 1
    color: var(#{$✨}color);
    text-decoration: var(#{$✨}text-decoration);
    text-decoration-color: var(#{$✨}underline);
    text-underline-offset: 0.125em;

    @if $enable-transitions {
      transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
        text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
    }

    &:is([aria-current], :hover, :active, :focus) {
      #{$✨}color: var(#{$✨}primary-hover);
      #{$✨}underline: var(#{$✨}primary-underline-hover);
      #{$✨}text-decoration: underline;
    }

    &:focus-visible {
      box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
    }

    @if $enable-classes {
      // Secondary
      &.secondary {
        #{$✨}color: var(#{$✨}secondary);
        #{$✨}underline: var(#{$✨}secondary-underline);

        &:is([aria-current], :hover, :active, :focus) {
          #{$✨}color: var(#{$✨}secondary-hover);
          #{$✨}underline: var(#{$✨}secondary-underline-hover);
        }
      }

      // Contrast
      &.contrast {
        #{$✨}color: var(#{$✨}contrast);
        #{$✨}underline: var(#{$✨}contrast-underline);

        &:is([aria-current], :hover, :active, :focus) {
          #{$✨}color: var(#{$✨}contrast-hover);
          #{$✨}underline: var(#{$✨}contrast-underline-hover);
        }
      }
    }
  }

  a {
    &[role="button"] {
      display: inline-block;
    }
  }
}