.Header {
  z-index: 32; // TODO: Figure out z-index system
  display: flex;
  padding: $spacer-3;
  font-size: $h5-size;
  line-height: $lh-default;
  color: var(--color-header-text);
  background-color: var(--color-header-bg);
  align-items: center;
  flex-wrap: nowrap;
}

.Header-item {
  display: flex;
  margin-right: $spacer-3;
  align-self: stretch;
  align-items: center;
  flex-wrap: nowrap;
}

.Header-item--full {
  flex: auto;
}

.Header-link {
  font-weight: $font-weight-bold;
  // stylelint-disable-next-line primer/colors
  color: var(--color-header-logo);
  white-space: nowrap;

  &:hover,
  &:focus {
    color: var(--color-header-text);
    text-decoration: none;
  }
}

.Header-input {
  color: var(--color-header-text);
  background-color: var(--color-header-search-bg);
  border: $border-width $border-style var(--color-header-search-border);
  box-shadow: none;

  &::placeholder {
    // stylelint-disable-next-line primer/colors
    color: rgba(255, 255, 255, 0.75);
  }
}