@use "@sass-palette/hope-config";
.vp-nav-logo {
  vertical-align: top;
  height: var(--navbar-line-height);
  margin-inline-end: 0.8rem;

  &.light {
    display: inline-block;
  }

  &.dark {
    display: none;
  }

  [data-theme="dark"] & {
    &.light {
      display: none;
    }

    &.dark {
      display: inline-block;
    }
  }
}

.vp-site-name {
  position: relative;
  color: var(--vp-c-text);
  font-size: 1.25rem;

  @media (max-width: hope-config.$tablet) {
    overflow: hidden;
    width: calc(100vw - 9.4rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vp-brand:hover & {
    color: var(--vp-c-accent);
  }
}