@import '../animation/variables.scss';

$name: 'ivue-tabs';

:root {
  // container
  --#{$name}-container-height: 36px;

  // fixed-tabs
  --#{$name}-fixed-width-min-width: 72px;

  // fixed-tabs media
  --#{$name}-fixed-width-media-min-width: 160px;

  // tab
  --#{$name}-tab-max-width: 264px;
  --#{$name}-tab-padding: 8px 12px;

  // slider
  --#{$name}-slider-height: 4px;

  // icon
  --#{$name}-icon-width: 32px;
  --#{$name}-icon-position: 4px;
}

.#{$name} {
  user-select: none;

  // 导航
  &-bar {
    position: relative;
  }

  &-wrapper {
    overflow: hidden;
    display: flex;
    border-bottom: 1px solid var(--ivue-border-color);
    transition: all 0.6s cubic-bezier(0.86, 0, 0.07, 1);
  }

  &-container {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    height: var(--#{$name}-container-height);
    list-style-type: none;
    white-space: nowrap;
    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1);

    &--fixed-width {
      .#{$name}-tab {
        min-width: var(--#{$name}-fixed-width-min-width);
      }

      @media only screen and (min-width: 600px) {
        .#{$name}-tab {
          min-width: var(--#{$name}-fixed-width-media-min-width);
        }
      }

      .#{$name}-tab {
        justify-content: center;
        user-select: none;
        white-space: normal;
        text-align: center;
        vertical-align: middle;
      }
    }

    &--auto-width {
      .#{$name}-tab {
        flex: 1;
        justify-content: center;
      }
    }
  }

  &-container--centered &-slider-wrapper + &-tab {
    margin-left: auto;
  }

  &-container--centered > &-tab:first-child {
    margin-left: auto;
  }

  &-container--centered > &-tab:last-child {
    margin-right: auto;
  }

  &-container--right > &-tab:first-child {
    margin-left: auto;
  }

  &-container--right &-slider-wrapper + &-tab {
    margin-left: auto;
  }

  &-container--overflow &-tab {
    flex: 1 0 auto;
  }

  &-tab {
    position: relative;
    padding: var(--#{$name}-tab-padding);
    align-items: center;
    display: inline-flex;
    flex: 0 1 auto;
    max-width: var(--#{$name}-tab-max-width);
    box-sizing: border-box;
    width: auto;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    transition: color $ivue-transition-default;
    color: var(--ivue-title-color);
    opacity: 0.7;
    font-size: var(--ivue-font-base-size);
    font-weight: 500;

    &-disabled {
      pointer-events: none;
      color: var(--ivue-disabled-color);
    }

    &-active {
      opacity: 1;
      color: var(--ivue-title-color);
    }
  }

  &-slider-wrapper {
    position: absolute;
    bottom: 0;
    margin: 0;
    transition: $ivue-transition-default;
  }

  &-slider {
    width: 100%;
    height: var(--#{$name}-slider-height);
    border-radius: var(--#{$name}-slider-height);
    background: currentColor;
  }

  &-content {
    width: 100%;
    transition: transform $ivue-transition-default;
  }

  &-items {
    overflow: hidden;
    position: relative;
  }

  .#{$name}-icon {
    position: absolute;
    top: 0;
    display: inline-flex;
    align-content: center;
    height: 100%;
    user-select: none;
    cursor: pointer;
    width: var(--#{$name}-icon-width);
    color: var(--ivue-title-color);
    transition: $ivue-transition-default;

    &--prev {
      left: var(--#{$name}-icon-position);
    }

    &--next {
      right: var(--#{$name}-icon-position);
    }
  }
}

.tab-reverse-transition {
  &-enter-from {
    position: absolute;
    top: 0;
    transform: translate(-100%, 0);
  }

  &-leave,
  &-leave-to {
    top: 0;
    position: absolute;
    transform: translate(100%, 0);
  }
}

.tab-transition {
  &-enter-from {
    transform: translate(100%, 0);
  }

  &-leave,
  &-leave-active {
    position: absolute;
    top: 0;
  }

  &-leave-to {
    position: absolute;
    transform: translate(-100%, 0);
  }
}

.fade-transition-enter-active,
.fade--transition-leave-active {
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

.fade-transition-enter-from,
.fade-transition-leave-to {
  opacity: 0;
}