@import "../../../styles/themes";
@import "../../../styles/typography";

.tab-panels--wrapper {
  .tab-panel {
    display: none;

    &.animation-direction-rtl {
      transform: translateX(8px);
      -webkit-transform: translateX(8px);
    }

    &.animation-direction-ltr {
      transform: translateX(-8px);
      -webkit-transform: translateX(-8px);
    }

    &.active {
      display: block;
      animation: panel-slide-in 150ms forwards cubic-bezier(0,0,0.35,1);
      -webkit-animation: panel-slide-in 150ms forwards cubic-bezier(0,0,0.35,1);
    }
  }

  @keyframes panel-slide-in {
    100% { transform: translateX(0%); }
  }

  @-webkit-keyframes panel-slide-in {
    100% { -webkit-transform: translateX(0%); }
  }
}