@mixin bounce-x($offset-in-px) {
  @keyframes bounce-x-#{$offset-in-px} {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(#{$offset-in-px}px);
    }
  }
  animation: bounce-x-#{$offset-in-px} 0.4s ease-out;
}
@mixin bounce-y($offset-in-px) {
  @keyframes bounce-y-#{$offset-in-px} {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(#{$offset-in-px}px);
    }
  }
  animation: bounce-y-#{$offset-in-px} 0.4s ease-out;
}
@mixin scroll-mask-x($mask-width: 24px, $base-color: #fff) {
  &::before,
  &::after {
    content: "";
    display: block;
    opacity: 0;
  }
  &.not-empty::before,
  &.not-empty::after {
    position: absolute;
    pointer-events: none;
    transition: .1s ease-out;
    width: $mask-width;
    opacity: 1;
    height: 100%;
    flex-shrink: 0;
    top: 0;
    z-index: 100;
  }
  &.not-empty::before {
    background: linear-gradient(to right, $base-color 40%, rgba(0, 0, 0, 0) 100%);
    left: -2px;
  }
  &.not-empty::after {
    background: linear-gradient(to left, $base-color 40%, rgba(0, 0, 0, 0) 100%);
    right: -2px;
  }
  &.scroll-top::before,
  &.scroll-bottom::after {
    width: 0;
  }
}
@mixin scroll-mask-y($mask-height: 24px, $base-color: #fff) {
  &::before,
  &::after {
    content: "";
    display: block;
    opacity: 0;
  }
  &.not-empty::before,
  &.not-empty::after {
    position: absolute;
    pointer-events: none;
    transition: .1s ease-out;
    height: $mask-height;
    opacity: 1;
    width: 100%;
    flex-shrink: 0;
    left: 0;
    z-index: 100;
  }
  &.not-empty::before {
    background: linear-gradient(to bottom, $base-color 40%, rgba(0, 0, 0, 0) 100%);
    top: -2px;
  }
  &.not-empty::after {
    background: linear-gradient(to top, $base-color 40%, rgba(0, 0, 0, 0) 100%);
    bottom: -2px;
  }
  &.scroll-top::before,
  &.scroll-bottom::after {
    height: 0;
  }
}
@mixin item-slides-y($offset: 48px) {
  @keyframes item-slides-y {
    0% {
      transform: translateY($offset);
    }
    100% {
      transform: translateY(0);
    }
  }
  animation: item-slides-y paused 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@mixin rotate() {
  transition-duration: .5s;
  &:hover {
    transform: rotate(1turn);
  }
}