.header {
  background-color: var(--beaver-c-bg);
  border-bottom: 1px solid var(--beaver-c-divider-light);
}

.nav {
  box-sizing: border-box;
}

.titleBlock {
  padding-left: var(--beaver-layout-offset-x);
  padding-right: var(--beaver-layout-padding-x);
  width: var(--beaver-sidebar-width);
  box-sizing: content-box;
}

.menu {
  padding-right: var(--beaver-layout-offset-x);
}

.link:hover {
  color: var(--beaver-c-brand);
  transition: color 0.2s;
}

.link {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.social-link-icon {
  display: flex;
  fill: currentColor;
  transition: color 0.2s;
  color: var(--beaver-c-text-2);
  &:hover {
    color: var(--beaver-c-text-1);
  }
}

.headerDoc {
  background-color: var(--beaver-c-bg-alt);
  border-bottom: none;

  .title {
    border-bottom: 1px solid var(--beaver-c-divider-light);
  }

  .menu {
    border-bottom: 1px solid var(--beaver-c-divider-light);
  }
}