@import '../colors';
@import '../variables'; //global variables
@import './variables'; //Tabs variables

.tix-tab-pane.v4 {
  width: 50%;
  vertical-align: top;
  max-width: 0;
  max-height: 0;
  display: inline-block;
  overflow: hidden;

  & > * {
    margin-left: $tab-edge-padding;
    margin-right: $tab-edge-padding;
  }

  &:first-child {
    padding-left: 0;
  }

  &:last-child {
    padding-right: 0;
  }

  &.visible,
  &.selected {
    max-width: 50%;
    max-height: max-content;
  }

  &.slide-left.animating {
    transition: $content-transition;
    transform: translateX(-100%);
  }

  &.slide-right {
    transform: translateX(-100%);

    &.animating {
      transition: $content-transition;
      transform: translateX(0%);
    }
  }
}