@keyframes tail-wag {
  from {
    transform: rotate(-3deg);
  }

  to {
    transform: rotate(7deg);
  }
}

.logo {
  display: flex;
  align-items: center;
  padding: 0.6em 1.2em;
  color: #aaa;
  -webkit-font-smoothing: auto;
  position: relative;

  &:hover {
    color: $color-white;
  }

  @include media-breakpoint-up(sm) {
    display: block;
    margin: 2em auto;
    text-align: center;
  }
}

// Backwards-compatibility for branding_logo customisations in legacy sidebar.
//RemovedInWagtail218Warning Remove when removing the legacy sidebar.
.wagtail-logo-container__mobile {
  margin-inline-end: 10px;
  background-color: #555;
  border-radius: 50%;
  padding: 5px 7.5px;

  .wagtail-logo {
    width: 20px;
    float: left;
    border: 0;
  }
}

// Media for Windows High Contrast mode
@media (forced-colors: $media-forced-colours) {
  .wagtail-logo-container__desktop {
    background-color: $system-color-link-text;
  }
}