@import 'xtend-library/src/core/javascript/_javascript.less';

/**
 * vars
 */

@backdrop-opacity: 1;

/**
 * backdrop
 */

.backdrop {
  background: fade(@shade-700, 20%);
}

// animation

.backdrop {
  opacity: 0;
  &.in {
    animation-name: anim-backdrop-in;
    animation-duration: inherit;
    animation-timing-function: @ease-in;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  &.out {
    animation-name: anim-backdrop-out;
    animation-duration: inherit;
    animation-timing-function: @ease-out;
    animation-fill-mode: forwards;
    opacity: 1;
  }
}

@keyframes anim-backdrop-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: @backdrop-opacity;
  }
}

@keyframes anim-backdrop-out {
  0% {
    opacity: @backdrop-opacity;
  }
  100% {
    opacity: 0;
  }
}

/**
 * toggle
 */

.initial {
  // instant classInitial on init and reinit
  * {
    .duration-none() !important;
  }
}