.rewind-logo {
  height: 40px;

  &.-light {
    display: none;
  }

  &.-dark {
    display: block;
  }

  @media (prefers-color-scheme: dark) {
    &.-light {
      display: block;
    }

    &.-dark {
      display: none;
    }
  }

  @if is-dark-color-scheme() {
    &.-dark {
      display: none;
    }
    &.-light {
      display: block;
    }
  }
}

.rewind__header {
  padding: 1em 0 1em 1em;
  background-color: var(--primary);
  position: sticky;
  top: 0;
  z-index: 1;
  .rewind-logo {
    margin-bottom: 5px;
  }

  p {
    margin: 0 0.5em 0 0;
    text-transform: uppercase;
    font-size: var(--font-up-1);
  }
}

.rewind-notification-active #toggle-current-user::after {
  width: 48px;
  height: 48px;
  position: absolute;
  left: -4px;
  top: -4px;
  content: "";
  background-image: absolute-image-url(
    "/plugins/discourse-rewind/images/rewind-avatar-2-shimmer.gif"
  );
  display: block;
  background-size: cover;
}