.navbar {
  --_op-navbar-background-color: var(--op-color-neutral-plus-max);
  --_op-navbar-text-color: var(--op-color-neutral-on-plus-max);

  border-radius: var(--op-radius-2x-large);
  padding: var(--op-space-small);

  .navbar__brand {
    display: flex;
    align-items: center;

    color: var(--_op-navbar-text-color);
    text-decoration: none;

    h1 {
      margin: 0;
      font-weight: var(--op-font-weight-extra-bold);
    }
  }
}

.navbar--login {
  box-shadow: none;
  padding: var(--op-space-small) var(--op-space-2x-large);
  background-color: transparent;
  display: flex;
  justify-content: space-between;
}

.navbar--mobile {
  box-shadow: none;
  padding: 0 var(--op-space-x-large);
  background-color: transparent;
  display: flex;
  justify-content: center;

  .header__logo {
    z-index: -10;
  }
}