theme.scss

//-- scss:defaults --*/
// GRASS Theme
/* GRASS Variables
Use these variables to customize the GRASS theme.
----------------------------------------------------------------------------- */
/* GRASS Font */
$gs-grass-font: 'Fira Sans Regular', sans-serif;
$gs-grass-font--medium: 'Fira Sans Medium', sans-serif;
$gs-grass-font--bold: 'Fira Sans Bold', sans-serif;
$gs-grass-font--light: 'Fira Sans ExtraLight', sans-serif;
$gs-grass-font--mono: 'Fira Mono', monospace;

/* Primary Color */
$gs-primary-color: rgb(76, 176, 91);
$gs-primary-color--light: rgba(76, 176, 91, 0.541);
$gs-primary-color--lighter: rgba(76, 176, 91, 0.322);
$gs-primary-color--lightest: rgba(76, 176, 91, 0.071);

/* Primary Alt Color */
$gs-primary-alt-color: rgb(110, 208, 121);
$gs-primary-alt-color--light: rgba(110, 208, 121, 0.541);
$gs-primary-alt-color--lighter: rgba(110, 208, 121, 0.322);
$gs-primary-alt-color--lightest: rgba(110, 208, 121, 0.071);

/* Primary Light Color */
$gs-primary-light-color: rgb(135, 233, 145);
$gs-primary-light-color--light: rgba(135, 233, 145, 0.541);
$gs-primary-light-color--lighter: rgba(138, 233, 145, 0.322);
$gs-primary-light-color--lightest: rgba(138, 233, 145, 0.071);

/* Primary Dark Color */
$gs-primary-dark-color: rgb(8, 139, 54);
$gs-primary-dark-color--light: rgba(8, 139, 54, 0.541);
$gs-primary-dark-color--lighter: rgba(8, 139, 54, 0.322);
$gs-primary-dark-color--lightest: rgba(8, 139, 54, 0.071);

/* Secondary Color */
$gs-secondary-color: rgb(0, 57, 63);
$gs-secondary-color--light: rgba(0, 57, 63, 0.541);
$gs-secondary-color--lighter: rgba(0, 57, 63, 0.322);
$gs-secondary-color--lightest: rgba(0, 57, 63, 0.071);

/* Secondary Alt Color */
$gs-secondary-alt-color: rgb(39, 87, 92);
$gs-secondary-alt-color--light: rgba(39, 87, 92, 0.541);
$gs-secondary-alt-color--lighter: rgba(39, 87, 92, 0.322);
$gs-secondary-alt-color--lightest: rgba(39, 87, 92, 0.071);

/* Secondary Light Color */
$gs-secondary-light-color: rgb(74, 120, 125);
$gs-secondary-light-color--light: rgba(74, 121, 127, 0.541);
$gs-secondary-light-color--lighter: rgba(74, 121, 127, 0.322);
$gs-secondary-light-color--lightest: rgba(74, 121, 127, 0.071);

/* Secondary Dark Color */
$gs-secondary-dark-color: rgb(0, 32, 36);
$gs-secondary-dark-color--light: rgba(0, 32, 36, 0.541);
$gs-secondary-dark-color--lighter: rgba(0, 32, 36, 0.322);
$gs-secondary-dark-color--lightest: rgba(0, 32, 36, 0.071);

/* White */
$gs-white-base-color: rgb(255, 255, 255);
$gs-white-color: rgb(247, 247, 247);
$gs-white-color--light: rgba(247, 247, 247, 0.541);
$gs-white-color--lighter: rgba(247, 247, 247, 0.322);
$gs-white-color--lightest: rgba(247, 247, 247, 0.071);

/* Black */
$gs-black-base-color: rgb(0, 0, 0);
$gs-black-color: rgb(2, 25, 5);
$gs-black-color--light: rgba(2, 25, 5, 0.541);
$gs-black-color--lighter: rgba(2, 25, 5, 0.322);
$gs-black-color--lightest: rgba(2, 25, 5, 0.071);

/* Grey */
$gs-grey-color: rgb(145, 144, 143);
$gs-grey-color--light: rgba(145, 144, 143, 0.541);
$gs-grey-color--lighter: rgba(145, 144, 143, 0.322);
$gs-grey-color--lightest: rgba(145, 144, 143, 0.071);

/* Grey Alt */
$gs-grey-alt-color: rgb(216, 216, 216);
$gs-grey-alt-color--light: rgba(216, 216, 216, 0.541);
$gs-grey-alt-color--lighter: rgba(216, 216, 216, 0.322);
$gs-grey-alt-color--lightest: rgba(216, 216, 216, 0.071);

/* Grey Light */
$gs-grey-light-color: rgb(240, 240, 241);
$gs-grey-light-color--light: rgba(240, 240, 241, 0.541);
$gs-grey-light-color--lighter: rgba(240, 240, 241, 0.322);
$gs-grey-light-color--lightest: rgba(240, 240, 241, 0.071);

/* Grey Dark */
$gs-grey-dark-color: rgb(78, 77, 76);
$gs-grey-dark-color--light: rgba(78, 77, 76, 0.541);
$gs-grey-dark-color--lighter: rgba(78, 77, 76, 0.322);
$gs-grey-dark-color--lightest: rgba(78, 77, 76, 0.071);

/* Special Colors */
$gs-support-color: rgb(243, 57, 138);
$gs-support-color--dark: rgba(243, 57, 138, 0.541);
$gs-support-color--light: rgba(243, 57, 138, 0.322);
$gs-yard-sign-color: rgb(116, 93, 2);

/* Bootstrap Mapping Colors */
// $gs-primary-color: $gs-primary-color; Defined above
// $gs-secondonary-color: $gs-secondary-color; Defined above
$gs-danger-color: rgb(176, 76, 76);
$gs-warning-color: rgb(176, 154, 76);
$gs-success-color: $gs-primary-alt-color;
$gs-info-color: $gs-secondary-alt-color;
$gs-light-color: $gs-grey-light-color;
$gs-dark-color: $gs-grey-dark-color;

/* Images */
$gs-images-base-path: 'images';
$gs-images-logos-small-path: $gs-images-base-path + '/logos/small';
$gs-svg-logos-base-path: $gs-images-base-path + '/logos/large';
$gs-icons-base-path: $gs-images-base-path + '/icons';


/* Icons */
$gs-grass-logo-white-simple: url($gs-images-logos-small-path + '/grass-logo-green-simple@05x.png');
$gs-grass-logo-simple-svg: url($gs-svg-logos-base-path + '/grass-green-no-text.svg');
$gs-grass-icon: url($gs-icons-base-path + '/grass-icon.svg');

// Description: This file defines Bootstrap theme variables by mapping them 
//              to custom color variables. These variables are used to 
//              customize the appearance of the Bootstrap framework.
// Bootstrap Variables: https: //github.com/twbs/bootstrap/blob/main/scss/_variables.scss
// Variables:
// - $primary: Primary theme color, mapped to $gs-primary-color.
// - $secondary: Secondary theme color, mapped to $gs-secondary-color.
// - $success: Success state color, mapped to $gs-success-color.
// - $info: Informational state color, mapped to $gs-info-color.
// - $warning: Warning state color, mapped to $gs-warning-color.
// - $danger: Danger/error state color, mapped to $gs-danger-color.
// - $light: Light theme color, mapped to $gs-grey-light-color.
// - $dark: Dark theme color, mapped to $gs-grey-dark-color.
// Bootstrap Variables
/*---------------------------------------------------------------------------*/
$primary: $gs-primary-color;
$secondary: $gs-secondary-color;
$success: $gs-success-color;
$info: $gs-info-color;
$warning: $gs-warning-color;
$danger: $gs-danger-color;
$light: $gs-grey-light-color;
$dark: $gs-grey-dark-color;

// Control the color of the active tab in a tabset
$nav-tabs-link-active-color: $gs-secondary-alt-color;

// Control listing card title color
$card-title-color: $gs-grey-dark-color;

// ---------------------------------------------------------------------------
// Quarto Variables
// ---------------------------------------------------------------------------
// This section defines the primary variables used throughout the theme,
// including body background, text color, link color, font families, and root
// font size.

// Navbar
// ---------------------------------------------------------------------------
// Variables for styling the navigation bar, including foreground and highlight
// colors.

// Footer
// ---------------------------------------------------------------------------
// Variables for styling the footer, including background, foreground, and link
// highlight colors.

// Inputs
// ---------------------------------------------------------------------------
// Variables for input field styling, such as background color.

// Popover
// ---------------------------------------------------------------------------
// Variables for popover styling, including background color.

// Table of Contents
// ---------------------------------------------------------------------------
// Variables for styling the table of contents, such as font size.

// Code
// ---------------------------------------------------------------------------
// Variables for code block styling, including text color, background color,
// and syntax highlighting for keywords and strings.

// Callouts
// ---------------------------------------------------------------------------
// Variables for callout box styling, with specific colors for different types
// of callouts (e.g., note, warning, tip, caution, important).

// Mermaid Theme
// ---------------------------------------------------------------------------
// Variables for Mermaid diagram styling, including background, edge, node,
// and label colors, as well as font family and transparency settings.
/* Quarto Variables

---------------------------------------------------------------------------*/

$body-bg: $gs-white-color;
$body-color: $gs-black-color;
$link-color: $primary;
$font-family-sans-serif: $gs-grass-font;
$font-family-monospace: $gs-grass-font--mono;
$font-size-root: 16px;

/* Navbar
-----------------------------------------------------------------------------*/
$navbar-fg: $gs-white-color;
$navbar-hl: $gs-secondary-alt-color;

/* Footer
-----------------------------------------------------------------------------*/
$footer-bg: $gs-secondary-color;
$footer-fg: $gs-white-base-color;
$footer-link-hl: $gs-white-color--light;

/* Inputs
-----------------------------------------------------------------------------*/
$input-bg: $gs-white-base-color;

/* Popover
-----------------------------------------------------------------------------*/
$popover-bg: $body-bg;

/* Table of Contents
-----------------------------------------------------------------------------*/
$toc-font-size: 1rem;

/* Code
-----------------------------------------------------------------------------*/
$code-color: $gs-secondary-color;
$code-bg: $gs-grey-light-color;
$code-block-bg: $gs-grey-light-color;
$code-keyword-color: $gs-primary-color;
$code-string-color: $gs-primary-color;

/* Code Copy
-----------------------------------------------------------------------------*/
$btn-code-copy-color: $gs-secondary-alt-color;
$btn-code-copy-color-active: $gs-secondary-color;

/* Callouts
Quarto Docs: https: //quarto.org/docs/authoring/callouts.html
-----------------------------------------------------------------------------*/
$callout-color-note: $gs-primary-light-color;
$callout-color-warning: $gs-warning-color;
$callout-color-tip: $gs-info-color;
$callout-color-caution: $gs-danger-color;
$callout-color-important: $gs-primary-dark-color;

/* Mermaid Theme
Quarto Docs: https: //quarto.org/docs/authoring/diagrams.html
-----------------------------------------------------------------------------*/
$mermaid-bg-color: $body-bg;
$mermaid-edge-color: $secondary;
$mermaid-node-fg-color: $body-color;
$mermaid-fg-color: $body-color;
$mermaid-fg-color--lighter: lighten($body-color, 10%);
$mermaid-fg-color--lightest: lighten($body-color, 20%);
$mermaid-font-family: $gs-grass-font;
$mermaid-label-bg-color: $body-bg;
$mermaid-label-fg-color: $primary;
$mermaid-node-bg-color: rgba($primary, 0.1);
$mermaid-node-fg-color: $gs-primary-dark-color;

/*-- scss:mixins --*/
/* Mixin for custom button styles */

/// @mixin box-shadow-default
/// This mixin applies a default box-shadow styling to an element.
/// 
/// The box-shadow consists of:
/// - A larger, softer shadow with a light black color.
/// - A smaller, sharper shadow with a lighter black color.
/// 
/// Variables used:
/// - `$gs-black-color--light`: Represents the light black color for the larger shadow.
/// - `$gs-black-color--lightest`: Represents the lightest black color for the smaller shadow.
@mixin box-shadow-default {
  box-shadow: 0 0.2rem 0.5rem $gs-black-color--light, 0 0 0.05rem $gs-black-color--lightest;
}

/// @mixin apply-color-filter
/// Applies a CSS filter to an element based on a given source color.
/// 
/// @param {Color} $source-color - The source color.
/// @param {Boolean} $important - If true, adds !important to the filter.
/// 
/// This mixin:
/// - Extracts HSL components from the source color.
/// - Uses hue, saturation, and an adjusted brightness in a CSS filter.
@mixin apply-color-filter($source-color,
$important: false) {
  $hue: hue($source-color);
  $saturation: saturation($source-color);
  $lightness: lightness($source-color);

  // Strip units from % values
  $saturation-value: $saturation / 1%;
  $lightness-value: $lightness / 1%;

  // Optional scaling to emphasize effect
  $saturation-factor: floor($saturation-value) * 2 / 100;
  $brightness-factor: floor($lightness-value) *2;

  // Check if the important flag is set
  $important-flag: if($important, ' !important', '');

  filter: hue-rotate(#{$hue}deg) saturate($saturation-factor) brightness(#{$brightness-factor})#{$important-flag}; 
}

@mixin sentence-case() {
  text-transform: lowercase;
  &::first-letter {
    text-transform: uppercase;
  }
  // Inserted by Lua filter protect-terms
  .no-transform,
  span.no-transform {
    text-transform: none !important;
  }
}

/*-- scss:rules --*/

/* Header Styles
-----------------------------------------------------------------------------*/
h1 {
  color: $gs-secondary-alt-color;
  font-family: $gs-grass-font--bold;
  font-weight: bold;
  font-size: 2.25em;
  line-height: 1.3;
  margin: 0 0 1em;
  // @include sentence-case;
}

h2 {
  font-family: $gs-grass-font--light;
  color: $gs-secondary-light-color;
  font-size: 2em;
  line-height: 1.4;
  margin: .64em 0 .64em;
  // @include sentence-case;
}

h3 {
  color: $gs-secondary-light-color;
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.5;
  margin: 1.6em 0 .8em;
  // @include sentence-case;
}

// h4, h5, h6 {
  // @include sentence-case;
// }

/* Code Styles
If we want more control the next step would be to create a custom theme
for the syntax highlighter using skylighting https: //github.com/jgm/skylighting
-----------------------------------------------------------------------------*/
code {
  span {
    .al {
      color: $gs-primary-color;
      font-style: inherit;
    }
    // Color of keywords in code blocks
    .im {
      color: $code-keyword-color;
      font-style: inherit;
    }
    // Color of strings in code blocks
    .st {
      color: $code-string-color;
      font-style: inherit;
    }
    // Color of titles in markdown code blocks
    .fu {
      color: $gs-secondary-alt-color;
    }
    // Color of pipes in markdown code blocks
    .pp {
      color: $code-keyword-color;
    }
    // Color of blockquotes in markdown code blocks and parameter names in R code blocks
    .at {
      color: $gs-secondary-color;
    }
  }
}

/* 
Button Styles
-----------------------------------------------------------------------------
Defines the styles for various button components used in the project. 
Each button style is designed with specific colors, borders, and hover/focus effects 
to match the theme's design system.

General Button Styles:
- `.btn`: Base button styles including font, padding, and border-radius.

Primary Buttons:
- `.btn-primary`: Primary button with theme's primary color.
- `.btn-outline-primary`: Outlined version of the primary button.

Secondary Buttons:
- `.btn-secondary`: Secondary button with theme's secondary color.
- `.btn-outline-secondary`: Outlined version of the secondary button.

Success Buttons:
- `.btn-success`: Success button with theme's success color.
- `.btn-outline-success`: Outlined version of the success button.

Warning Buttons:
- `.btn-warning`: Warning button with theme's warning color.
- `.btn-outline-warning`: Outlined version of the warning button.

Support Buttons:
- `.btn-support`: Support button with theme's support color.
- `.btn-outline-support`: Outlined version of the support button with icon support.

Light Buttons:
- `.btn-outline-light`: Outlined button with light/grey color scheme.

Link Buttons:
- `.btn-outline-link`: Outlined button styled as a link with underline.

Hover and Focus States:
- Each button includes hover and focus states to enhance interactivity.
- Colors are adjusted (e.g., darkened or lightened) to provide visual feedback.

Mixins and Utilities:
- `@include box-shadow-default`: Applied to certain buttons for shadow effects.
- `gap`: Used in `.btn-outline-support` for spacing between icon and text.
*/
/* Button Styles
-----------------------------------------------------------------------------*/
.btn {
  font-family: $gs-grass-font--medium;
  font-size: 1em;
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: .25rem;
}

.btn-primary {
  background-color: $gs-primary-color;
  border-color: $gs-primary-color;
  color: $gs-white-base-color;
  &:hover,
  &:focus {
    background-color: $gs-primary-alt-color;
    border-color: $gs-primary-alt-color;
    color: $gs-white-base-color;
  }
}

.btn-secondary {
  background-color: $gs-secondary-color;
  border-color: $gs-secondary-color;
  color: $gs-white-base-color;
  &:hover,
  &:focus {
    background-color: $gs-secondary-light-color;
    border-color: $gs-secondary-light-color;
    color: $gs-white-base-color;
  }
}

.btn-success {
  background-color: $gs-success-color;
  border-color: $gs-success-color;
  color: $gs-white-color;
  &:hover,
  &:focus {
    background-color: darken($gs-success-color, 10%);
    border-color: darken($gs-success-color, 10%);
    color: $gs-white-color;
  }
}

.btn-warning {
  background-color: $gs-warning-color;
  border-color: $gs-warning-color;
  color: $gs-white-color;
  &:hover,
  &:focus {
    background-color: darken($gs-warning-color, 10%);
    border-color: darken($gs-warning-color, 10%);
    color: $gs-white-color;
  }
}

.btn-support {
  background-color: $gs-support-color;
  border-color: $gs-support-color;
  color: $gs-white-base-color;
  &:hover,
  &:focus {
    @include box-shadow-default;
    background-color: $gs-support-color;
    border-color: $gs-support-color;
    color: $gs-white-base-color;
  }
}

.btn-outline-primary {
  background-color: $gs-white-base-color;
  border-color: $gs-primary-color;
  color: $gs-primary-color;
  &:hover,
  &:focus {
    background-color: $gs-primary-color;
    border-color: $gs-primary-alt-color;
    color: $gs-white-base-color;
  }
}

.btn-outline-secondary {
  background-color: $gs-white-base-color;
  border-color: $gs-secondary-color;
  color: $gs-secondary-color;
  &:hover,
  &:focus {
    background-color: $gs-secondary-light-color;
    border-color: $gs-secondary-light-color;
    color: $gs-white-base-color;
  }
}

.btn-outline-success {
  background-color: $gs-white-color;
  border-color: $gs-success-color;
  color: $gs-success-color;
  &:hover,
  &:focus {
    background-color: $gs-success-color;
    border-color: $gs-success-color;
    color: $gs-white-base-color;
  }
}

.btn-outline-warning {
  background-color: $gs-white-color;
  border-color: $gs-warning-color;
  color: $gs-warning-color;
  &:hover,
  &:focus {
    background-color: $gs-warning-color;
    border-color: $gs-warning-color;
    color: $gs-white-base-color;
  }
}

.btn-outline-light {
  background-color: $gs-white-base-color;
  border-color: $gs-grey-color;
  color: $gs-grey-color;
  &:hover,
  &:focus {
    background-color: $gs-grey-color;
    border-color: $gs-grey-color;
    color: $gs-white-base-color;
  }
}

.btn-outline-link {
  border-color: $gs-primary-color;
  color: $gs-primary-color;
  text-decoration: underline;
  &:hover,
  &:focus {
    border-color: $gs-primary-dark-color;
    color: $gs-primary-dark-color;
  }
}

.btn-outline-support {
  background-color: $gs-white-base-color;
  border-color: $gs-support-color;
  color: $gs-support-color;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; // Space between icon and text
  &:hover,
  &:focus {
    @include box-shadow-default;
    background-color: $gs-support-color;
    border-color: $gs-support-color;
    color: $gs-white-base-color;
  }
}

/* Listings
-----------------------------------------------------------------------------*/
ul.pagination li.disabled a,
ul.pagination li.active a {
  background-color: $gs-primary-color !important;
  color: $gs-white-base-color !important;
}

#quarto-margin-sidebar .quarto-listing-category-title {
  color: $gs-secondary-alt-color;
}

/* Hide description on tutorial pages */
.quarto-title-block .description {
  display: none;
}

/* Table of Contents
-----------------------------------------------------------------------------*/
.sidebar nav[role=doc-toc]>h2 {
  color: $gs-secondary-alt-color;
  font-weight: 700;
}

/* Navbar
-----------------------------------------------------------------------------*/
.navbar-brand:hover,
.navbar-brand:focus {
  color: $gs-white-base-color;
}

.quarto-title-banner {
  margin-bottom: 1em;
  color: $gs-secondary-alt-color;
  background: $gs-primary-dark-color--lightest;

  h1 {
    color: $gs-secondary-alt-color;
  }

  .code-tools-button {
    color: $gs-white-color;
    background-color: $gs-secondary-alt-color !important;
  }

  .dropdown-item {
    color: $gs-secondary-alt-color !important;
  }

  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: $gs-primary-alt-color !important;
    color: $gs-white-base-color !important;
  }

  .quarto-categories {
    color: $gs-secondary-alt-color !important;
  }
}

/* Cards
-----------------------------------------------------------------------------*/
.card {
  .card-body {
    background-color: $gs-white-base-color;
    color: $gs-black-color;
  }
}

/* Input Styles
-----------------------------------------------------------------------------*/

.input-group-text {
  background-color: $gs-primary-color;
  color: $gs-white-base-color;
  font-weight: 700;
}

input[type=checkbox] {
  appearance: none; // Ensure custom styles apply
  height: 0.9rem;
  border: 2px solid $gs-primary-color;
  border-radius: 0.2rem;
  background-color: $gs-white-base-color;
  padding: 0.2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &:checked {
    background-color: $gs-primary-color;
    border-color: $gs-primary-color;

    &::after {
      font-family: 'Font Awesome 6 Free'; // Ensure Font Awesome is loaded
      content: '\f00c'; // Add a checkmark when selected
      color: $gs-white-base-color;
      font-size: 0.75rem; // Adjust size of the checkmark
    }
  }

  &:disabled {
    background-color: $gs-primary-light-color;
    border-color: $gs-primary-light-color;
    cursor: not-allowed;
  }
  &:disabled:checked {
    background-color: $gs-primary-light-color;
    border-color: $gs-primary-light-color;
  }
}

.form-control:focus {
  color: $gs-black-color;
  background-color: $gs-white-base-color;
  border-color: $gs-primary-alt-color;
  outline: 0;
  box-shadow: 0 0 0 .05rem $gs-primary-color--lighter;
}

/* Callouts
-----------------------------------------------------------------------------*/
.callout {
  &.callout-style-default {
    @include box-shadow-default;
    transition: box-shadow 125ms;
    border-radius: .2rem;
  
    >div.callout-header {
        font-weight: 700;
    }
  }
}

.callout-note {
  border-color: $callout-color-note;
  
  &.callout-titled {
    color: $gs-primary-dark-color;
    .callout-icon {
      &::before {
        background-image: $gs-grass-logo-white-simple !important;
      }
    }
    .callout-body {
      color: $gs-black-color;
    }
  }
}

.callout-tip {
  border-color: $callout-color-tip;
  color: $callout-color-tip;

  &.callout-titled {
    .callout-icon {
      &::before {
        background-image: $gs-grass-logo-white-simple !important;
      }
    }
    .callout-body {
      color: $gs-black-color;
    }
  }
}

.callout-warning {
  border-color: $callout-color-warning;
  color: $callout-color-warning;

  &.callout-titled {
    .callout-body {
      color: $gs-black-color;
    }
  }
}

.callout-important {
  border-color: $callout-color-important;
  color: $callout-color-important;

  &.callout-titled {
    .callout-body {
      color: $gs-black-color;
    }
  }
}

.callout-caution {
  border-color: $callout-color-caution;
  color: $callout-color-caution;

  &.callout-titled {
    .callout-body {
      color: $gs-black-color;
    }
  }
}

.highlight {
  color: $primary;
  font-weight: bold;
}

// Front Matter
.quarto-title .quarto-categories {
  color: $gs-primary-dark-color;
}

.quarto-title-meta-heading {
  color: $gs-primary-dark-color;
  font-family: $gs-grass-font--medium;
  font-weight: 700;
}

/* Footer
-----------------------------------------------------------------------------*/
footer {

  a, i {

    &:hover,
    &:focus {
      color: $footer-link-hl;
      text-decoration: underline;
    }
  }
}