/* Theme: Tabs
 ***************************************/


.vTabs--default {
  margin-bottom: $v-tabs-spacing;

  v-tab {
    transition: color $v-tabs-hover-animation-duration;
    outline: none;

    &::after {
      content: '';
      position: absolute;
      display: block;
      left: 0;
      background-color: $v-tabs-default-color;
      transition: background-color $v-tabs-enter-animation-duration $v-tabs-leave-animation-duration;
    }

    &.is-active {
      &::after {
        background-color: $v-tabs-active-color;
      }
    }

    &.is-active-remove {
      &::after {
        transition: background-color $v-tabs-leave-animation-duration;
      }
    }

    &:focus {
      outline: none;
    }

    &:hover,
    &:focus {
      color: $v-tabs-active-color;
    }

    &[disabled] {
      opacity: $v-tabs-disabled-opacity;

      &:hover,
      &:focus {
        color: inherit;
      }
    }
  }

  &[horizontal] v-tab {
    padding: $v-tabs-spacing / 2;

    &::after {
      width: 100%;
      height: 2px;
      bottom: 0;
    }
  }

  &[vertical] v-tab {
    padding: $v-tabs-spacing / 2 $v-tabs-spacing;

    &::after {
      width: 2px;
      height: 100%;
      top: 0;
      bottom: auto;
    }
  }
}



/* Theme: Pages
 ***************************************/


.vPages--default {
  margin-bottom: $v-tabs-spacing;

  v-page {
    will-change: transform, opacity;
    opacity: 0;
    transform: translateY(30px);

    &.is-active {
      opacity: 1;
      transform: translateY(0);
    }

    &.is-active-add {
      transition: all $v-pages-enter-animation-duration $v-pages-leave-animation-duration;
    }

    &.is-active-remove {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      transform: translateY(0);
      transition: all $v-pages-leave-animation-duration;
    }

    &.is-active-add,
    &.is-active-remove {
      display: block;
    }
  }
}