/** 
 * Icons.css
 * - FontAwesome7
 * - Google Fonts ('Material Symbols Outlined')
 */
ul:has(li[class^="icon-"]) {
  padding: 0;
  margin: 0;
}

li[class^="icon-"] {
  list-style-type: none;
  padding: 0.25rem 0;

  /**
   * FontAwesome7 (free)
   */
  &::before {
    content: '';
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    font-size: 2rem;
    color: var(--mid-green);
    margin-right: 0.5rem;
    display: inline-block;
    width: 2rem;
    text-align: center;
  }

  &.icon-home::before        { content: '\f015'; }
  &.icon-compass::before     { content: '\f14e'; }
  &.icon-exclamation::before { content: '\f071'; }
  &.icon-listing::before     { content: '\f0cb'; }
  &.icon-globe::before       { content: '\f0ac'; }
  &.icon-map::before         { content: '\f279'; }
  &.icon-earth::before       { content: '\e47b'; }
  &.icon-location::before    { content: '\f3c5'; }
  &.icon-anchor::before      { content: '\f13d'; }
  &.icon-linked::before      { content: '\f0c1'; }
  &.icon-paw::before         { content: '\f1b0'; }
  &.icon-paper-plane::before { content: '\f1d8'; }
  &.icon-calendar::before    { content: '\f133'; }
  &.icon-seedling::before    { content: '\f4d8'; }
  &.icon-copy::before        { content: '\f0c5'; }
  &.icon-info::before        { content: '\f05a'; }
  &.icon-question::before    { content: '\f059'; }
  /* icon-comment f075 used in Have your say banner */
}

/**
 * GoogleFont
 */
.gicon {

  &::after {
    font-family: 'Material Symbols Outlined';
    content: '';
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    font-size: 1.25rem;
    margin-left: 0.25rem;
  }

  /**
   * List of imported Google Icons
   * - account_balance [e84f]
   * - api [f1b7]
   * - arrow_back [e5c4]
   * - arrow_downward [e5db]
   * - arrow_drop_down [e5c5]
   * - arrow_upward_alt [e984]
   * - calendar_today [e935]
   * - check [e5ca]
   * - close [e5cd]
   * - content_copy [e14d]
   * - description [e873]
   * - download [f090]
   * - edit_square [f88d]
   * - feedback [e87f]
   * - filter_alt [ef4f]
   * - help [e887]
   * - image [e3f4]
   * - info [e88e]
   * - ios_share [e6b8]
   * - keyboard_arrow_down [e313]
   * - keyboard_arrow_left [e314]
   * - keyboard_arrow_right [e315]
   * - keyboard_arrow_up [e316]
   * - landslide [ebd7]
   * - link_2 [fffb5]
   * - list_alt_add [f756]
   * - location_on [e0c8]
   * - menu [e5d2]
   * - replay [e042]
   * - search [e8b6]
   * - schedule [e8b5]
   * - summarize [f071]
   * - warning [e002]
   */
  &.download::after  { content: '\f090'; }
  &.cite-this::after { content: '\e14d'; transition: 0.2s; }
  &.cite-this.is-copied::after { content: '\e5ca'; transition: 0.2s; }
  &.show-documents::after { content: '\e313'; transition: 0.8s; }
  &.show-documents.is-active::after { content: '\e316'; }

}

/**
 * New design allows icons before h3 on some homepage card styles
 * They vary, so added via "Styles" dropdown in site
 */
.paragraph--type--card {

  h3 {
    &[class^="icon-"] {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 1.25rem;
      align-items: center;
    }
    &[class^="icon-"]::before {
      font-family: 'Material Symbols Outlined';
      content: '';
      color: white;
      font-style: normal;
      font-weight: 400;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      font-size: 2.25rem;
      background-color: var(--dark-purple);
      padding: 0.35rem 0.5rem;
      border-radius: 6px;
      height: 42px;
      width: 42px;
    }
    &.icon-description::before { content: '\e873'; }
    &.icon-edit_square::before { content: '\f88d'; }
    &.icon-landslide::before { content: '\ebd7'; }
    &.icon-location_on::before { content: '\e0c8'; }
    &.icon-warning::before { content: '\e002'; }
    &.icon-account_balance::before { content: '\e84f'; }
    &.icon-api::before { content: '\f1b7'; }
    &.icon-list_alt_add::before { content: '\f756'; }
    &.icon-summarize::before { content: '\f071'; }
  }

  &.highlight {
    h3 {
      &[class^="icon-"] {
        grid-template-columns: 1fr;
      }
      &[class^="icon-"]::before {
        background-color: var(--mid-green);
      }
    }
  }
}