.app-brand {
  display: flex;
  justify-content: center;
  padding: var(--spacing-app-brand);

  &__link,
  &__link:hover {
    color: var(--color-page-text);
    text-decoration: none;
  }

  &__logo {
    max-width: var(--sizing-app-brand-max-width);
    max-height: var(--sizing-app-brand-max-height);

    &[src*=".svg"] {
      width: 100%;
    }
  }

  &__name {
    margin: 0;
  }

  &__logo + &__name {
    display: none;
  }

  // Helper classes for Dark Mode support on image-based logos
  &__logo--dark-mode {
    display: none;
  }

  @media (prefers-color-scheme: dark) {
    &__logo--light-mode {
      display: none;
    }

    &__logo--dark-mode {
      display: block;
    }
  }
}

.silverstripe-brand {
  color: var(--color-page-text);
  display: flex;
  justify-content: center;
  padding: var(--spacing-silverstripe-brand);
}