zarm/dist/zarm.css

基于 React 的移动端UI库

/*!
 * 
 *     zarm
 *
 *     Github: https://github.com/ZhongAnTech/zarm
 *
 *     Copyright (c) 2013-present, ZhonganTech, Inc.
 *
 *     This source code is licensed under the MIT license found in the
 *     LICENSE file in the root directory of this source tree.
 *
 */
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../../node_modules/resolve-url-loader/index.js!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!../../node_modules/normalize.css/normalize.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../../node_modules/resolve-url-loader/index.js!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./src/style/entry.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************/
: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 {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

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

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

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

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

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

@-webkit-keyframes za-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

@-webkit-keyframes za-door-in {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0, 1, 1);
            transform: scale3d(0, 1, 1);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 0.1);
            transform: scale3d(1, 1, 0.1);
  }
}

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

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

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

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

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

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

@-webkit-keyframes za-flip-in {
  from {
    opacity: 0;
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    opacity: 1;
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

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

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

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

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

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

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

@-webkit-keyframes za-rotate-in {
  from {
    opacity: 0;
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
            transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@-webkit-keyframes za-slide-up-in {
  from {
    -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

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

.za-menu-slide-up-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          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 {
  -webkit-animation-name: za-menu-slide-up-in;
          animation-name: za-menu-slide-up-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

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

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

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

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

.za-menu-slide-down-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          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 {
  -webkit-animation-name: za-menu-slide-down-in;
          animation-name: za-menu-slide-down-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

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

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

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

@-webkit-keyframes za-menu-slide-up-in {
  0% {
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}

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

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

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

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

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

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

@-webkit-keyframes za-zoom-in {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

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

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

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

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

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

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

@-webkit-keyframes za-zoom-fade-in {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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