/* stylelint-disable declaration-no-important, selector-attribute-name-disallowed-list */

$logo-size: 110px;

@use '../../../../scss/tools' as *;
@use '../../../../scss/settings' as *;

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

  to {
    transform: rotate(20deg) translate(30%, -25%) scale(1.1);
  }
}

.sidebar-wagtail-branding {
  $root: &;
  position: relative;
  display: block;
  align-items: center;
  -webkit-font-smoothing: auto;
  margin: theme('spacing.slim-header') auto theme('spacing.11');
  text-align: center;
  width: $logo-size;
  height: $logo-size;
  transition:
    transform 150ms cubic-bezier(0.28, 0.15, 0, 2.1),
    width $menu-transition-duration ease,
    height $menu-transition-duration ease,
    padding-top $menu-transition-duration ease;
  border-radius: 100%;

  @include media-breakpoint-up(sm) {
    margin-top: 0.5rem;
  }

  // Reduce overall size when in slim mode
  .sidebar--slim & {
    @include show-focus-outline-inside();
    width: 40px;
    height: 110px;
  }

  // Remove background on 404 page
  .page404__bg & {
    background-color: transparent;
  }

  // Set wagging styles
  &--wagging {
    &:hover {
      transition: transform 1.2s ease;

      [data-part='tail'] {
        animation: tail-wag 0.1s alternate;
        animation-iteration-count: infinite;
      }

      [data-part='eye--open'] {
        display: none !important;
      }

      [data-part='eye--closed'] {
        display: inline !important;
      }
    }
  }

  // Bird wrapper
  &__icon-wrapper {
    @apply w-bg-white-15 w-relative w-overflow-hidden hover:w-overflow-visible;
    margin: auto;
    width: $logo-size;
    height: $logo-size;
    border-radius: 50%;

    .sidebar--slim & {
      width: 40px;
      height: 40px;
    }

    .page404__bg & {
      width: auto;
      height: auto;
      position: static;
    }
  }
}

.sidebar-custom-branding {
  display: block;
  align-items: center;
  -webkit-font-smoothing: auto;
  position: relative;
  margin: 2em auto;
  text-align: center;
  padding: 10px 0;
  transition: padding $menu-transition-duration ease;

  &:hover {
    color: theme('colors.text-label-menus-active');
  }

  @at-root .sidebar--slim #{&} {
    padding: 40px 0;
  }
}
