<commit_before>/*doc
---
title: "Customizing links"
name: links-variables
category: elements - links
---

*Overwrite these variables in `_custom_variables.scss` to change these defaults.*

```
$link-color:               $base-blue !default;
$link-hover-color:         $base-blue-soft !default;
$link-active-color:        $base-blue !default;
$link-visited-color:       $base-blue !default;
$link-light-color:         $base-blue-soft !default;
$link-light-hover-color:   $base-blue-light !default;
$link-light-active-color:  $base-blue-soft !default;
$link-light-visited-color: $base-blue-soft !default;

$link-transition-speed:    $transition-speed-base !default;

--- Optional customizations ---
$link-underline-option:        false !default;
$link-border-underline-option: false !default;
$link-transition-option:       true !default;
$link-underline-hover-option:  false !default;
```

*/

// Options

$link-underline-option:        false !default;
$link-border-underline-option: false !default;
$link-transition-option:       true !default;
$link-underline-hover-option:  false !default;


/*doc
---
title: Links
name: links
category: elements - links
---

Links have basic styling for `:hover` `:active` and `:visited` by default. There's
also a couple of classes you can use to make links more universally useful.

```html_example
<div class="p1">
  <p> <a href="#">Standard link</a> </p>
  <p class="link"> Style something else to look like a link </p>
  <p> <a href="#" class="u">Use .u to force an underline</a> </p>
</div>
<div class="p1" style="background-color: #666;">
  <p> <a href="#" class="light">"Light" link for dark backgrounds</a> </p>
  <p> <a href="#" class="link-white">Forced white text link</a> </p>
</div>
```
*/

@mixin links_styles {
  %link,
  .link,
  a:link {
    color: $link-color;

    @if $link-underline-option {
      text-decoration: underline;

      @if $link-border-underline-option {
        text-decoration: none;
        border-bottom: 1px solid;
      }
    } @else {
      text-decoration: none;
    }

    @if $link-transition-option {
      -webkit-transition: color, $link-transition-speed;
         -moz-transition: color, $link-transition-speed;
          -ms-transition: color, $link-transition-speed;
           -o-transition: color, $link-transition-speed;
              transition: color, $link-transition-speed;
    }

    &:visited {
      color: $link-visited-color;
    }

    &.light {
      color: $link-light-color;

      &:visited {
        color: $link-light-visited-color;
      }
      &:hover {
        color: $link-light-hover-color;<commit_msg>Fix for odd white links<commit_after>/*doc
---
title: "Customizing links"
name: links-variables
category: elements - links
---

*Overwrite these variables in `_custom_variables.scss` to change these defaults.*

```
$link-color:               $base-blue !default;
$link-hover-color:         $base-blue-soft !default;
$link-active-color:        $base-blue !default;
$link-visited-color:       $base-blue !default;
$link-light-color:         $base-blue-soft !default;
$link-light-hover-color:   $base-blue-light !default;
$link-light-active-color:  $base-blue-soft !default;
$link-light-visited-color: $base-blue-soft !default;

$link-transition-speed:    $transition-speed-base !default;

--- Optional customizations ---
$link-underline-option:        false !default;
$link-border-underline-option: false !default;
$link-transition-option:       true !default;
$link-underline-hover-option:  false !default;
```

*/

// Options

$link-underline-option:        false !default;
$link-border-underline-option: false !default;
$link-transition-option:       true !default;
$link-underline-hover-option:  false !default;

/*doc
---
title: Links
name: links
category: elements - links
---

Links have basic styling for `:hover` `:active` and `:visited` by default. There's
also a couple of classes you can use to make links more universally useful.

```html_example
<div class="p1">
  <p> <a href="#">Standard link</a> </p>
  <p class="link"> Style something else to look like a link </p>
  <p> <a href="#" class="u">Use .u to force an underline</a> </p>
</div>
<div class="p1" style="background-color: #666;">
  <p> <a href="#" class="light">"Light" link for dark backgrounds</a> </p>
  <p> <a href="#" class="link-white">Forced white text link</a> </p>
</div>
```
*/

@mixin links_styles {
  %link,
  .link,
  a {
    color: $link-color;

    @if $link-underline-option {
      text-decoration: underline;

      @if $link-border-underline-option {
        text-decoration: none;
        border-bottom: 1px solid;
      }
    } @else {
      text-decoration: none;
    }

    @if $link-transition-option {
      -webkit-transition: color, $link-transition-speed;
         -moz-transition: color, $link-transition-speed;
              transition: color, $link-transition-speed;
    }

    &:visited {
      color: $link-visited-color;
    }

    &.light {
      color: $link-light-color;

      &:visited {
        color: $link-light-visited-color;
      }
      &:hover {
        color: $link-light-hover-color;
{'fraction_non_alphanumeric': 0.1623046875, 'fraction_numerical': 0.00234375, 'mean_word_length': 2.960556844547564, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4430078', 'n_tokens_mistral': 1722, 'n_tokens_neox': 1669, 'n_words': 413}