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

$name: 'ivue-bottom-nav';

:root {
  // item
  --#{$name}-item-max-width: 168px;
  --#{$name}-item-min-width: 80px;

  // 导航缩放效果
  --#{$name}-scale-icon: translate3d(0, -2px, 0);
  --#{$name}-scale-content: scale(1.2);

  // color
  --#{$name}-shadow: rgba(0, 0, 0, 0.12);
  --#{$name}-no-active: rgba(0, 0, 0, 0.54);
}

.#{$name} {
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  box-shadow: 0 3px 14px 2px var(--#{$name}-shadow);
  width: 100%;
  transition: all $ivue-transition-stand;

  &-item {
    margin: 0 !important;
    max-width: var(--#{$name}-item-max-width);
    min-width: var(--#{$name}-item-min-width);
    width: 100%;
    height: 100%;
  }

  &--absolute {
    position: absolute;
  }

  &--fixed {
    position: fixed;
    z-index: 4;
  }

  &--active {
    transform: translate3d(0, 0, 0);

    // 导航缩放效果
    &__scale {
      .ivue-button--active {
        .ivue-icon {
          transform: var(--#{$name}-scale-icon) !important;
        }

        .ivue-button-content {
          span {
            transform: var(--#{$name}-scale-content) !important;
          }
        }
      }
    }
  }

  &--is-color {
    // 没有激活时的状态
    .ivue-button:not(.ivue-button--active) {
      opacity: 0.5;
      color: currentColor;
    }
  }

  // 没有激活时的状态
  &:not(.ivue-bottom-nav--is-color) {
    .ivue-button:not(.ivue-button--active) {
      color: var(--#{$name}-no-active) !important;
    }
  }

  .ivue-button {
    flex-shrink: 1;
    margin: 0 !important;
    text-transform: none;
    max-width: var(--#{$name}-item-max-width);
    min-width: var(--#{$name}-item-min-width);
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent !important;

    .ivue-ripple {
      padding: 8px 12px 10px;
      transition: padding $ivue-transition-stand;
    }

    .ivue-button-content {
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      font-size: 12px;
      white-space: nowrap;
      height: 100%;
      transition: all $ivue-transition-stand;

      span {
        line-height: 1;
        transform: scale(1);
        transition: all 0.15s $ivue-transition-stand-timing;
      }
    }

    .ivue-icon {
      margin-top: 0;
      color: inherit;
      margin-bottom: 4px;
      transition: all 0.15s $ivue-transition-stand-timing;
    }

    // 激活
    &--active {
      opacity: 1;

      &:before {
        background-color: transparent;
      }
    }
  }

  &--shift {
    .ivue-button {
      transition: 0.3s $ivue-transition-default-timing;
      transition-property: min-width, max-width;
      will-change: min-width, max-width;

      &--active {
        min-width: 96px;
        max-width: 168px;
      }

      .ivue-button-content {
        span {
          will-change: transform, opacity;
        }
      }
    }
  }
}

// shift
.#{$name}--shift {
  .ivue-button:not(.ivue-button--active) .ivue-button-content {
    .ivue-icon {
      transform: scale(1, 1) translate(0, 8px);
    }

    span {
      opacity: 0;
    }
  }
}