.sidebar-back-button {
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  width: 100%;
  padding: 16px 20px 8px 12px;
  display: flex;
  align-items: center;

  /* not supported in IE11 & Edge; 'left' as fallback */
  text-align: left;
  text-align: start;

  &--skin-dark {
    background: #23263c;
  }

  &--skin-light {
    background: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
  }

  &:focus {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  & &__arrow {
    transition: transform 0.5s;
    position: relative;
    color: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
  }

  &--skin-light &__arrow {
    color: var(--wds-color-black-200, var(--wsr-color-D20, #333853));
  }

  &:focus-visible &__arrow {
    transition: transform 0.5s;
    transform: translateX(-5px);
  }

  &:not(:hover) &__arrow--animated {
    animation-name: sidebar-back-button-back-and-forth;
    animation-duration: 4s;
    animation-delay: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

  @media (hover: hover) {
    &:hover &__arrow {
      transition: transform 0.5s;
      transform: translateX(-5px);
    }
  }
}

@keyframes sidebar-back-button-back-and-forth {
  0% {
    transform: translateX(0px);
  }

  8% {
    transform: translateX(-5px);
  }

  16% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(0px);
  }
}