:host {
  color: rgb(var(--dark-primary-text));
  display: block;

  a {
    color: rgb(var(--dark-primary-text));
  }

  .mat-card {
    &.changelog {
      ::ng-deep {
        markdown {
          h1,
          p {
            display: none;
          }

          h2 {
            font-size: 18px;

            &:not(:first-of-type) {
              margin-top: 2rem;
            }
          }

          h3 {
            font-size: 15px;
          }
        }
      }
    }

    a {
      color: rgba(var(--palette-primary-500), 1);
      font-weight: bold;

      &:hover {
        color: rgba(var(--palette-primary-300), 1);
      }
    }

    .independent-and-bootstrapped-logo {
      background-image: url('/assets/bootstrapped-dark.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      height: 2rem;
      opacity: 0.87;
      width: 10rem;
    }
  }
}

:host-context(.is-dark-theme) {
  color: rgb(var(--light-primary-text));

  a {
    color: rgb(var(--light-primary-text));
  }

  .mat-card {
    .independent-and-bootstrapped-logo {
      background-image: url('/assets/bootstrapped-light.svg');
      opacity: 1;
    }
  }
}