/**
 * @file
 * Replaces Drupal core's system.menus.css.
 */

@import "base";
@import "ux_styleguide/drupal/seven/system/system.menus";

#branding {
  %tabs-primary,
  %tabs-secondary {
    a {
        color: #aaa; /* todo: change in ux styleguide and remove here */
      }
    margin: {
      top: 0;
      bottom: 0;
    }

    > [class*="active"],
    > :hover {
      a {
        color: $color-text-reverse;
      }
    }
  }

  %tabs-secondary {
    margin: 0 (-$inset-space);
    padding: .5em $inset-space;
    background-color: tint($color-background-reverse, 24);
  }
}