$start-alpha: 0.5;

:host {
  @extend %component-host;
  align-items: stretch;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .frame {
    align-items: stretch;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: column;
    position: relative;
  }

  .frame--advancing {
    animation: calcite-flow-item-advance var(--calcite-app-animation-time) var(--calcite-app-easing-function);
  }

  .frame--retreating {
    animation: calcite-flow-item-retreat var(--calcite-app-animation-time) var(--calcite-app-easing-function);
  }

  @keyframes calcite-flow-item-advance {
    0% {
      opacity: $start-alpha;
      transform: translate3d(50px, 0, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes calcite-flow-item-retreat {
    0% {
      opacity: $start-alpha;
      transform: translate3d(-50px, 0, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}

@import "../../scss/includes/_component";
