zarm/lib/style/index.css

基于 React 的移动端UI库

:root {
  --za-theme-default: hsl(0, 0%, 90%);
  --za-theme-default-h: 0;
  --za-theme-default-s: 0%;
  --za-theme-default-l: 90%;
  --za-theme-default-light: hsl(0, 0%, 94%);
  --za-theme-default-light-h: 0;
  --za-theme-default-light-s: 0%;
  --za-theme-default-light-l: 94%;
  --za-theme-default-lighter: hsl(0, 0%, 95%);
  --za-theme-default-lighter-h: 0;
  --za-theme-default-lighter-s: 0%;
  --za-theme-default-lighter-l: 95%;
  --za-theme-default-dark: hsl(0, 0%, 86%);
  --za-theme-default-dark-h: 0;
  --za-theme-default-dark-s: 0%;
  --za-theme-default-dark-l: 86%;
  --za-theme-default-darker: hsl(0, 0%, 20%);
  --za-theme-default-darker-h: 0;
  --za-theme-default-darker-s: 0%;
  --za-theme-default-darker-l: 20%;
  --za-theme-primary: hsl(156, 100%, 36.9%);
  --za-theme-primary-h: 156;
  --za-theme-primary-s: 100%;
  --za-theme-primary-l: 36.9%;
  --za-theme-primary-light: hsl(156, 100%, 40.9%);
  --za-theme-primary-light-h: 156;
  --za-theme-primary-light-s: 100%;
  --za-theme-primary-light-l: 40.9%;
  --za-theme-primary-lighter: hsl(156, 100%, 95%);
  --za-theme-primary-lighter-h: 156;
  --za-theme-primary-lighter-s: 100%;
  --za-theme-primary-lighter-l: 95%;
  --za-theme-primary-dark: hsl(156, 100%, 32.9%);
  --za-theme-primary-dark-h: 156;
  --za-theme-primary-dark-s: 100%;
  --za-theme-primary-dark-l: 32.9%;
  --za-theme-primary-darker: hsl(156, 100%, 20%);
  --za-theme-primary-darker-h: 156;
  --za-theme-primary-darker-s: 100%;
  --za-theme-primary-darker-l: 20%;
  --za-theme-success: hsl(156, 100%, 36.9%);
  --za-theme-success-h: 156;
  --za-theme-success-s: 100%;
  --za-theme-success-l: 36.9%;
  --za-theme-success-light: hsl(156, 100%, 40.9%);
  --za-theme-success-light-h: 156;
  --za-theme-success-light-s: 100%;
  --za-theme-success-light-l: 40.9%;
  --za-theme-success-lighter: hsl(156, 100%, 95%);
  --za-theme-success-lighter-h: 156;
  --za-theme-success-lighter-s: 100%;
  --za-theme-success-lighter-l: 95%;
  --za-theme-success-dark: hsl(156, 100%, 32.9%);
  --za-theme-success-dark-h: 156;
  --za-theme-success-dark-s: 100%;
  --za-theme-success-dark-l: 32.9%;
  --za-theme-success-darker: hsl(156, 100%, 20%);
  --za-theme-success-darker-h: 156;
  --za-theme-success-darker-s: 100%;
  --za-theme-success-darker-l: 20%;
  --za-theme-warning: hsl(31, 83.1%, 55.9%);
  --za-theme-warning-h: 31;
  --za-theme-warning-s: 83.1%;
  --za-theme-warning-l: 55.9%;
  --za-theme-warning-light: hsl(31, 83.1%, 59.9%);
  --za-theme-warning-light-h: 31;
  --za-theme-warning-light-s: 83.1%;
  --za-theme-warning-light-l: 59.9%;
  --za-theme-warning-lighter: hsl(31, 83.1%, 95%);
  --za-theme-warning-lighter-h: 31;
  --za-theme-warning-lighter-s: 83.1%;
  --za-theme-warning-lighter-l: 95%;
  --za-theme-warning-dark: hsl(31, 83.1%, 51.9%);
  --za-theme-warning-dark-h: 31;
  --za-theme-warning-dark-s: 83.1%;
  --za-theme-warning-dark-l: 51.9%;
  --za-theme-warning-darker: hsl(31, 83.1%, 20%);
  --za-theme-warning-darker-h: 31;
  --za-theme-warning-darker-s: 83.1%;
  --za-theme-warning-darker-l: 20%;
  --za-theme-danger: hsl(0, 100%, 65.7%);
  --za-theme-danger-h: 0;
  --za-theme-danger-s: 100%;
  --za-theme-danger-l: 65.7%;
  --za-theme-danger-light: hsl(0, 100%, 69.7%);
  --za-theme-danger-light-h: 0;
  --za-theme-danger-light-s: 100%;
  --za-theme-danger-light-l: 69.7%;
  --za-theme-danger-lighter: hsl(0, 100%, 95%);
  --za-theme-danger-lighter-h: 0;
  --za-theme-danger-lighter-s: 100%;
  --za-theme-danger-lighter-l: 95%;
  --za-theme-danger-dark: hsl(0, 100%, 61.7%);
  --za-theme-danger-dark-h: 0;
  --za-theme-danger-dark-s: 100%;
  --za-theme-danger-dark-l: 61.7%;
  --za-theme-danger-darker: hsl(0, 100%, 20%);
  --za-theme-danger-darker-h: 0;
  --za-theme-danger-darker-s: 100%;
  --za-theme-danger-darker-l: 20%;
  --za-color-text: #343434;
  --za-color-text-inverse: #fff;
  --za-color-text-placeholder: rgba(128, 128, 132, 0.3);
  --za-color-text-disabled: #bcbcbc;
  --za-color-text-caption: #909090;
  --za-color-link: var(--za-theme-primary);
  --za-color-shadow: rgba(56, 56, 56, 0.15);
  --za-background-color: #fff;
  --za-background-active: rgba(0, 0, 0, 0.15);
  --za-background-disabled: #f2f2f2;
  --za-border-color: rgba(60, 60, 67, 0.36);
  --za-border-disabled: #e6e6e6;
  --za-radius-xs: 4px;
  --za-radius-sm: 4px;
  --za-radius-md: 4px;
  --za-radius-lg: 8px;
  --za-radius-xl: 8px;
  --za-radius-round: 1000px;
  --za-radius-circle: 50%;
  --za-padding-h-xs: 8px;
  --za-padding-h-sm: 12px;
  --za-padding-h-md: 16px;
  --za-padding-h-lg: 20px;
  --za-padding-h-xl: 24px;
  --za-padding-v-xs: 6px;
  --za-padding-v-sm: 8px;
  --za-padding-v-md: 12px;
  --za-padding-v-lg: 16px;
  --za-padding-v-xl: 18px;
  --za-height-xs: 28px;
  --za-height-sm: 36px;
  --za-height-md: 44px;
  --za-height-lg: 52px;
  --za-height-xl: 60px;
  --za-font-size-xs: 14px;
  --za-font-size-sm: 14px;
  --za-font-size-md: 17px;
  --za-font-size-lg: 20px;
  --za-font-size-xl: 22px;
  --za-zindex-mask: 1000;
  --za-zindex-popup: 1100;
  --za-zindex-tooltip: 1700;
  --za-opacity-disabled: 0.5;
  --za-opacity-mask: 0.4;
  --za-opacity-toast: 0.8;
  --za-animation-duration: 0.3s;
  --za-arrow-color: rgba(0, 0, 0, 0.2);
  --za-arrow-size: 10px;
  --za-arrow-width: 2px;
}

.za-fade-enter,
.za-fade-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-fade-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-fade-enter.za-fade-enter-active,
.za-fade-appear.za-fade-appear-active {
  animation-name: za-fade-in;
  animation-play-state: running;
}

.za-fade-leave.za-fade-leave-active {
  animation-name: za-fade-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-fade-enter,
.za-fade-appear {
  opacity: 0;
  animation-timing-function: linear;
}

.za-fade-leave {
  animation-timing-function: linear;
}

@keyframes za-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes za-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.za-door-enter,
.za-door-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-door-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-door-enter.za-door-enter-active,
.za-door-appear.za-door-appear-active {
  animation-name: za-door-in;
  animation-play-state: running;
}

.za-door-leave.za-door-leave-active {
  animation-name: za-door-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-door-enter,
.za-door-appear {
  opacity: 0;
  animation-timing-function: cubic-bezier(0.4, 0, 0, 0);
}

.za-door-leave {
  animation-timing-function: ease;
}

@keyframes za-door-in {
  from {
    opacity: 0;
    transform: scale3d(0, 1, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 0.1);
  }
}
@keyframes za-door-out {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  60% {
    transform: scale3d(0.01, 1, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(0, 1, 0.1);
  }
}
.za-flip-enter,
.za-flip-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-flip-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-flip-enter.za-flip-enter-active,
.za-flip-appear.za-flip-appear-active {
  animation-name: za-flip-in;
  animation-play-state: running;
}

.za-flip-leave.za-flip-leave-active {
  animation-name: za-flip-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-flip-enter,
.za-flip-appear {
  opacity: 0;
  animation-timing-function: cubic-bezier(0.4, 0, 0, 0);
  backface-visibility: visible !important;
}

.za-flip-leave {
  animation-timing-function: ease;
  backface-visibility: visible !important;
}

@keyframes za-flip-in {
  from {
    opacity: 0;
    transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
  }
  70% {
    transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px);
  }
}
@keyframes za-flip-out {
  from {
    opacity: 1;
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    opacity: 0;
    transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
  }
}
.za-rotate-enter,
.za-rotate-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-rotate-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-rotate-enter.za-rotate-enter-active,
.za-rotate-appear.za-rotate-appear-active {
  animation-name: za-rotate-in;
  animation-play-state: running;
}

.za-rotate-leave.za-rotate-leave-active {
  animation-name: za-rotate-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-rotate-enter,
.za-rotate-appear {
  animation-timing-function: ease;
}

.za-rotate-leave {
  animation-timing-function: ease;
}

@keyframes za-rotate-in {
  from {
    opacity: 0;
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    transform-origin: center;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes za-rotate-out {
  from {
    opacity: 1;
    transform-origin: center;
  }
  to {
    opacity: 0;
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
  }
}
.za-slide-up-enter,
.za-slide-up-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-up-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-up-enter.za-slide-up-enter-active,
.za-slide-up-appear.za-slide-up-appear-active {
  animation-name: za-slide-up-in;
  animation-play-state: running;
}

.za-slide-up-leave.za-slide-up-leave-active {
  animation-name: za-slide-up-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-slide-up-enter,
.za-slide-up-appear {
  animation-timing-function: ease-out;
}

.za-slide-up-leave {
  animation-timing-function: ease-in;
}

.za-slide-down-enter,
.za-slide-down-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-down-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-down-enter.za-slide-down-enter-active,
.za-slide-down-appear.za-slide-down-appear-active {
  animation-name: za-slide-down-in;
  animation-play-state: running;
}

.za-slide-down-leave.za-slide-down-leave-active {
  animation-name: za-slide-down-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-slide-down-enter,
.za-slide-down-appear {
  animation-timing-function: ease-out;
}

.za-slide-down-leave {
  animation-timing-function: ease-in;
}

.za-slide-left-enter,
.za-slide-left-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-left-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-left-enter.za-slide-left-enter-active,
.za-slide-left-appear.za-slide-left-appear-active {
  animation-name: za-slide-left-in;
  animation-play-state: running;
}

.za-slide-left-leave.za-slide-left-leave-active {
  animation-name: za-slide-left-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-slide-left-enter,
.za-slide-left-appear {
  animation-timing-function: ease-out;
}

.za-slide-left-leave {
  animation-timing-function: ease-in;
}

.za-slide-right-enter,
.za-slide-right-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-right-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-slide-right-enter.za-slide-right-enter-active,
.za-slide-right-appear.za-slide-right-appear-active {
  animation-name: za-slide-right-in;
  animation-play-state: running;
}

.za-slide-right-leave.za-slide-right-leave-active {
  animation-name: za-slide-right-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-slide-right-enter,
.za-slide-right-appear {
  animation-timing-function: ease-out;
}

.za-slide-right-leave {
  animation-timing-function: ease-in;
}

@keyframes za-slide-up-in {
  from {
    transform: translate3d(0, 100px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-up-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100px, 0);
  }
}
@keyframes za-slide-down-in {
  from {
    transform: translate3d(0, -100px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-down-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -100px, 0);
  }
}
@keyframes za-slide-left-in {
  from {
    transform: translate3d(-150px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-left-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-150px, 0, 0);
  }
}
@keyframes za-slide-right-in {
  from {
    transform: translate3d(150px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-right-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(150px, 0, 0);
  }
}
.za-menu-slide-up-enter,
.za-menu-slide-up-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-menu-slide-up-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-menu-slide-up-enter.za-menu-slide-up-enter-active,
.za-menu-slide-up-appear.za-menu-slide-up-appear-active {
  animation-name: za-menu-slide-up-in;
  animation-play-state: running;
}

.za-menu-slide-up-leave.za-menu-slide-up-leave-active {
  animation-name: za-menu-slide-up-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-menu-slide-up-enter,
.za-menu-slide-up-appear {
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.za-menu-slide-up-leave {
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.za-menu-slide-down-enter,
.za-menu-slide-down-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-menu-slide-down-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-menu-slide-down-enter.za-menu-slide-down-enter-active,
.za-menu-slide-down-appear.za-menu-slide-down-appear-active {
  animation-name: za-menu-slide-down-in;
  animation-play-state: running;
}

.za-menu-slide-down-leave.za-menu-slide-down-leave-active {
  animation-name: za-menu-slide-down-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-menu-slide-down-enter,
.za-menu-slide-down-appear {
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.za-menu-slide-down-leave {
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

@keyframes za-menu-slide-up-in {
  0% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes za-menu-slide-up-out {
  0% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}
@keyframes za-menu-slide-down-in {
  0% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}
@keyframes za-menu-slide-down-out {
  0% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
}
.za-zoom-enter,
.za-zoom-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-zoom-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-zoom-enter.za-zoom-enter-active,
.za-zoom-appear.za-zoom-appear-active {
  animation-name: za-zoom-in;
  animation-play-state: running;
}

.za-zoom-leave.za-zoom-leave-active {
  animation-name: za-zoom-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-zoom-enter,
.za-zoom-appear {
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}

.za-zoom-leave {
  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

@keyframes za-zoom-in {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes za-zoom-out {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.za-zoom-fade-enter,
.za-zoom-fade-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-zoom-fade-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-zoom-fade-enter.za-zoom-fade-enter-active,
.za-zoom-fade-appear.za-zoom-fade-appear-active {
  animation-name: za-zoom-fade-in;
  animation-play-state: running;
}

.za-zoom-fade-leave.za-zoom-fade-leave-active {
  animation-name: za-zoom-fade-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-zoom-fade-enter,
.za-zoom-fade-appear {
  opacity: 0;
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}

.za-zoom-fade-leave {
  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

@keyframes za-zoom-fade-in {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes za-zoom-fade-out {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}
.za-move-up-enter,
.za-move-up-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-up-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-up-enter.za-move-up-enter-active,
.za-move-up-appear.za-move-up-appear-active {
  animation-name: za-move-up-in;
  animation-play-state: running;
}

.za-move-up-leave.za-move-up-leave-active {
  animation-name: za-move-up-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-move-up-enter,
.za-move-up-appear {
  animation-timing-function: ease-out;
}

.za-move-up-leave {
  animation-timing-function: ease-in;
}

.za-move-down-enter,
.za-move-down-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-down-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-down-enter.za-move-down-enter-active,
.za-move-down-appear.za-move-down-appear-active {
  animation-name: za-move-down-in;
  animation-play-state: running;
}

.za-move-down-leave.za-move-down-leave-active {
  animation-name: za-move-down-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-move-down-enter,
.za-move-down-appear {
  animation-timing-function: ease-out;
}

.za-move-down-leave {
  animation-timing-function: ease-in;
}

.za-move-left-enter,
.za-move-left-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-left-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-left-enter.za-move-left-enter-active,
.za-move-left-appear.za-move-left-appear-active {
  animation-name: za-move-left-in;
  animation-play-state: running;
}

.za-move-left-leave.za-move-left-leave-active {
  animation-name: za-move-left-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-move-left-enter,
.za-move-left-appear {
  animation-timing-function: ease-out;
}

.za-move-left-leave {
  animation-timing-function: ease-in;
}

.za-move-right-enter,
.za-move-right-appear {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-right-leave {
  animation-play-state: paused;
  animation-duration: var(--za-animation-duration);
  animation-fill-mode: both;
}

.za-move-right-enter.za-move-right-enter-active,
.za-move-right-appear.za-move-right-appear-active {
  animation-name: za-move-right-in;
  animation-play-state: running;
}

.za-move-right-leave.za-move-right-leave-active {
  animation-name: za-move-right-out;
  animation-play-state: running;
  pointer-events: none;
}

.za-move-right-enter,
.za-move-right-appear {
  animation-timing-function: ease-out;
}

.za-move-right-leave {
  animation-timing-function: ease-in;
}

@keyframes za-move-up-in {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-up-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes za-move-down-in {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-down-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes za-move-left-in {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-left-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes za-move-right-in {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-right-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*[contenteditable] {
  user-select: auto !important;
}

*:focus {
  outline: none;
}

a {
  background: transparent;
  text-decoration: none;
  outline: none;
}