@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) { &::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: 1; } &.not-empty::before { background: linear-gradient(to right, var(--home-base-color) 40%, rgba(0, 0, 0, 0) 100%); left: -2px; } &.not-empty::after { background: linear-gradient(to left, var(--home-base-color) 40%, rgba(0, 0, 0, 0) 100%); right: -2px; } &.scroll-top::before, &.scroll-bottom::after { width: 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; }