@import url("../../indicators/attention-badge/attention-badge.css");

.ds-top-header {
  background: var(--ds-colour-header);
  border-bottom: 1px solid #353026;
  color: var(--ds-colour-surface-white);
}

.ds-top-header__inner {
  align-items: center;
  display: flex;
  gap: var(--ds-space-18);
  justify-content: space-between;
  margin: 0 auto;
  min-height: 64px;
  padding: 0 var(--ds-space-32);
}

.ds-top-header__brand {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--ds-space-10);
  min-width: 0;
}

.ds-top-header__wordmark {
  color: var(--ds-colour-gold);
  font-size: var(--ds-font-size-20);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--ds-line-height-solid);
  white-space: nowrap;
}

.ds-top-header__nav {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: var(--ds-space-22);
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
}

.ds-top-header__link,
.ds-top-header__action {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-pill);
  color: rgba(255, 255, 255, 0.78);
  display: inline-flex;
  font: inherit;
  font-size: var(--ds-font-size-15);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-solid);
  min-height: 36px;
  padding: 0 var(--ds-space-12);
  text-decoration: none;
}

.ds-top-header__action {
  gap: var(--ds-space-16);
}

.ds-top-header__link[aria-current="page"] {
  color: var(--ds-colour-surface-white);
}

.ds-top-header__link--with-attention {
  gap: var(--ds-space-attention-association);
}

.ds-top-header__link:hover,
.ds-top-header__action:hover {
  color: var(--ds-colour-surface-white);
}

.ds-top-header__link:focus-visible,
.ds-top-header__action:focus-visible,
.ds-top-header__avatar:focus-visible {
  box-shadow: var(--ds-shadow-focus);
  outline: 0;
}

.ds-top-header__avatar {
  align-items: center;
  background: #efe2d8;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--ds-radius-round);
  color: var(--ds-colour-deep-green);
  display: inline-flex;
  font-size: var(--ds-font-size-12);
  font-weight: var(--ds-font-weight-bold);
  height: 30px;
  justify-content: center;
  line-height: var(--ds-line-height-solid);
  width: 30px;
}

.ds-top-header__mobile-slot {
  display: none;
}

@media (max-width: 760px) {
  .ds-top-header__inner {
    flex-wrap: wrap;
    gap: var(--ds-space-12);
    padding: var(--ds-space-12) var(--ds-space-16);
  }

  .ds-top-header__nav {
    display: none;
  }

  .ds-top-header__mobile-slot {
    display: inline-flex;
  }
}