.Header-title {
  width: 455px;
}

.Header-title-name {
  font-size: 1.24em;
  color: var(--color-text-dark);
}

.Header-attribution {
  display: none; /* disabled */
  color: var(--color-text-medium);
  margin-bottom: 0.5em;
}

.Header-buttonSection {
  padding-right: 1em;
  margin-right: 1em;
  border-right: 1px solid color(var(--color-accent2) alpha(-80%));
}

.Header-buttonSection:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: none;
}

.Header-button {
  margin-right: 1.5em;
}

.Header-button:last-child {
  margin-right: 0;
}

.EditHeader {
  background-color: color(var(--color-bg-white) alpha(-85%));
  position: relative;
}

/* a bit of a hack to fade out the edit header */
.EditHeader:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--color-brand);
}

.EditHeader.EditHeader--admin:after {
  background-color: var(--color-accent7);
}

.EditHeader-title {
  font-weight: 700;
  color: white;
}

.EditHeader-subtitle {
  color: color(var(--color-text-white) alpha(-50%));
}

.EditHeader .Button {
  color: white;
  border: none;
  font-size: 1em;
  text-transform: capitalize;
  background-color: color(var(--color-bg-white) alpha(-90%));
  margin-left: 0.75em;
}

.EditHeader .Button--primary {
  background-color: white;
  color: var(--color-brand);
}

.EditHeader.EditHeader--admin .Button--primary {
  background-color: white;
  color: var(--color-text-dark);
}

.EditHeader .Button:hover {
  color: white;
  background-color: var(--color-brand);
}

.EditHeader.EditHeader--admin .Button:hover {
  background-color: var(--color-bg-dark);
}
