@import '../../../src/styles/colors-v2.css';
@import '../../../src/styles/spacing.css';
@import "../../../src/styles/typography-v2.css";

.header {
  background-color: var(--white);
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  border-bottom: 1px solid var(--mds-grey-12);
  background-color: var(--mds-grey-3);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--spacing-large);
}

.section {
  align-items: center;
  display: inline-flex;
}

.title {
  flex-shrink: 0;
  font: var(--mds-type-page-title);
  text-transform: uppercase;
}

.title2 {
  composes: title;
  color: var(--mds-grey-54);
}

.github {
  composes: section;
  color: var(--mds-grey-87);
  font: var(--mds-type-subhead-2);
  height: 100%;
  padding: 0 var(--spacing-small);
  text-decoration: none;
  transition: background-color 150ms linear;
}

.github:hover {
  background-color: var(--mds-grey-12);
}