@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &carousel{
    height:1.4rem;
    transition: background 0.5s ease 0s;
    &--inner{
      position:relative;
      margin:0 auto;
      height:100%;
    }
    &--item{
      transition: opacity 0.5s ease 0s;
      display:block;
      opacity:0;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      text-align:center;
      img{
        max-width:100%;
        max-height:100%;
      }
      overflow:hidden;
    }
    &--nav{
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      height:0;
      text-align:center;
      z-index:10;
      span{
        font-size:0;
        display:inline-block;
        border:0;
        background:#f5f5f5;
        outline:none;
        height:0.16rem;
        width:0.16rem;
        border-radius:50%;
        top:-0.4rem;
        position:relative;
        margin:0 0.08rem;
        box-shadow:0 0 2px rgba(0,0,0,0.1);
        &.active{
          @include var-background-color();
        }
      }
    }
  }
}