@import 'themes/default';

// Keyframe animations are used, rather than transitions, as Chrome seems to have a rendering
// bug when nesting multiple elements acting on the same transition
@keyframes swappableIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes swappableOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.Swappable-Content {
  position: relative;
  /* This timing value needs to stay in sync with the duration defined in the
     SwappableContent component */
  transition: height var(--timing--fade);

  &--transitioning {
    overflow: hidden;
  }

  & > .Swappable-Content__A,
  & > .Swappable-Content__B {
    margin-bottom: 0;
    opacity: 1;
    animation-duration: var(--timing--hover);
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-name: fadeAnimation;
  }

  &--show-B:not(.Swappable-Content--disable-animation) {
    & > .Swappable-Content__A {
      animation-name: swappableOut;
      position: absolute;
      top: 0;
      width: 100%;
    }

    & > .Swappable-Content__B {
      animation-name: swappableIn;
      animation-delay: var(--timing--hover);
    }
  }

  &--show-A:not(.Swappable-Content--disable-animation) {
    & > .Swappable-Content__A {
      animation-name: swappableIn;
      animation-delay: var(--timing--hover);
    }

    & > .Swappable-Content__B {
      animation-name: swappableOut;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  &--disable-animation {
    &.Swappable-Content--show-A > .Swappable-Content__A {
      opacity: 1;
      visibility: visible;
      animation: none;
    }

    &.Swappable-Content--show-B > .Swappable-Content__B {
      opacity: 1;
      visibility: visible;
      animation: none;
    }
  }
}