:root {
  --yd-yellow-500: #fab842;
  --yd-grey-100: #e9ebec;
  --yd-grey-800: #33383d;
  --yd-grey-900: #23262a;
  --yd-blue-500: #0a59ad;
  --docs-bar-height: 1.75rem;
}

.docs-header {
  font-family: Arial, sans-serif;
  background: var(--yd-grey-800);
  color: var(--yd-grey-100);
  display: flex;
  font-size: 0.75rem;
  gap: 1rem;
  height: var(--docs-bar-height);
  justify-content: space-between;
  left: 0;
  padding-inline: 0.5rem;
  position: fixed;
  top: 0;
  white-space: nowrap;
  width: 100%;
  z-index: 1;

  a {
    color: var(--yd-grey-100) !important;
    font-weight: bold;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.docs-header-links {
  align-items: center;
  display: flex;
  gap: 1rem;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 500px) {
  .docs-header-menu {
    background-color: var(--yd-grey-800);
    display: none;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: var(--docs-bar-height);
    right: 0;
    width: 100%;
    padding-bottom: 1rem;
  }
}

.docs-header-menu-visible {
  display: flex;
}

.docs-header-menu-button {
  border: none;
  background: transparent;
  color: var(--yd-grey-100);
  font-weight: bold;
  padding: 0;
}

@media screen and (min-width: 501px) {
  .docs-header-menu-button {
    display: none;
  }
}