// Delay animations, used in drawers

.appear-animation {
    opacity: 0;
    -webkit-transform: translateY(60px);
            transform: translateY(60px);
  }
  
  @for $i from 1 to 20 {
    .appear-delay-#{$i} {
      transition: opacity 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) cart-animation-iteration($i, 0.15s),
                  -webkit-transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) cart-animation-iteration($i, 0.075s);
      transition: transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) cart-animation-iteration($i, 0.075s),
                  opacity 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) cart-animation-iteration($i, 0.15s);
      transition: transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) cart-animation-iteration($i, 0.075s),
                  opacity 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) cart-animation-iteration($i, 0.15s),
                  -webkit-transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) cart-animation-iteration($i, 0.075s);
    }
  }
  
  .js-drawer-open .appear-animation {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  
  .js-drawer-closing .appear-animation {
    transition-duration: 0s;
    transition-delay: 0.5s;
  }