/**
 * mini_icons
 */

// Most icons are embedded SVG. Icons are embedded using Grunticon. We are using
// the original SVG icons from Drupal core, however the width and height
// attribute have been replaced with a viewBox attribute so we can scale them
// properly with CSS. Embedded SVG has the advantage of being styled with CSS,
// and by using Grunticon JS loading we negate most of the bloat and overhead
// associated with embedding SVG files. For the buttons (orientation toggles &
// menu click handles), and for sub-menu indicators we use a custom font icon
// that is tiny and only includes four icons. We rotate and color these in CSS
// as required.

#toolbar-administration {

  i.toolbar-icon {}

  // Top level icons.
  .toolbar-tab__items-wrapper {
    .toolbar-icon {
      fill: #bebebe;
      top: .07em;
    }

    .toolbar-icon-menu {
      width: 0.875em;
    }

    a,
    button {
      &:hover,
      &:active,
      &.is-active {
        .toolbar-icon {
          fill: #ffffff;
        }
      }
    }
  }

  @media only screen and (max-width: 24em) {
    // Toolbar-themes module cannot hide the text, so instead we remove the
    // icons and other redundant tabs in narrow screens.
    .home-toolbar-tab,
    .tour-toolbar-tab,
    .toolbar-tab__items-wrapper .toolbar-icon {
      display: none;
    }
  }


  // Main menu icons.
  .toolbar-menu {
    a {
      fill: #6f6f6f;

      &:hover,
      &:focus,
      &:active,
      &.is-active {
        fill: #494949;
      }

      &.is-active[href="/"] {
        fill: #6f6f6f;
      }

      &:hover,
      &:focus,
      &:active {
        &[href="/"] {
          fill: #494949;
        }
      }
    }
  }
}


