@nav-icon-width: .24rem;

.app-nav{
  // &:extend(.absolute-position);
  position: fixed;
  bottom: 0;
  left: 0;
  height: .7rem;
  width: 100%;
  z-index: 1;
  display: none;

  .nav-inner{
    &:extend(.absolute-position);
    top: auto;
    bottom: 0;
    height: @foot-height;
    background-color: @white;
    z-index: 10;
    border-top: 1px solid @gray-light-2l;
    position: fixed;
    
    .cell{
      width: 33.33333%;
      text-decoration: none;
      color: @black-dark;
      display: block;
      float: left;
      height: 100%;
  
      span{
        display: block;
        text-align: center;
        font-size: @font-xxs;
  
        &.nav-icons{
          width: @nav-icon-width;
          height: @nav-icon-width;
          margin: .1rem auto .02rem auto;
          background: transparent url('../../../assets/images/nav-icons.png') no-repeat;
          background-size: @nav-icon-width*3 auto;
          .transition(all 0.3s ease-in-out);
        }
  
        &.icon-direction{
          background-position: 0 -@nav-icon-width;
        }
  
        &.icon-search-new{
          background-position: -@nav-icon-width*2 -@nav-icon-width;
        }
  
        &.icon-person-simple{
          background-position: -@nav-icon-width -@nav-icon-width;
        }
      }
  
      &.nav-actived{
        span{
          &.icon-direction{
            background-position: 0 0;
          }
    
          &.icon-search-new{
            background-position: -@nav-icon-width*2 0;
          }
    
          &.icon-person-simple{
            background-position: -@nav-icon-width 0;
          }
        }
      }
    }
  }

  &.show{
    display: block
  }
}