@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "../../styles/color";
@import "../../styles/type";

$ca-navigation-bar__height: 2.5 * $ca-grid;

%ca-navigation-bar {
  display: flex;
  flex-direction: row;
  background-color: #4b4d68; // DST-TODO: Replace this with $kz-color-wisteria-700 once kaizen-design-tokens is installed
  height: $ca-navigation-bar__height;
  width: 100%;
  position: fixed;

  @media print {
    display: none;
  }
}

%ca-navigation-bar__menu-item-focus {
  :global(.js-focus-visible) & {
    // hide native focus ring when :focus but not :focus-visible
    &:focus {
      outline: none;
    }

    // show custom focus ring when :focus-visible
    &:global(.focus-visible) {
      color: #fff;
      outline: 2px solid #0168b3; // DST-TODO: Replace this with $kz-color-cluny-500 once kaizen-design-tokens is installed
    }
  }
}