@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &list-item{
    background-color:#fff;
    margin:0.25rem 0;
    display:block;
    line-height:1.4;
    color:inherit;
    text-decoration: none;
    &.vx-divider{
      margin:0;
      &:first-child{
        background-image:none;
      }
    }
    &.is-half-divider{
      margin:0;
      .vx-list-item{
        &--inner{
          padding:0;
        }
        &--image{
          margin:0.1rem 0 0.1rem 0.1rem;
          &:first-child{
            margin-left:0.2rem;
          }
        }
        &--content{
          display:flex;
          padding:0 0.1rem 0 0;
          &-inner{
            margin:auto;
            width: 100%;
          }
          &:last-child{
            padding-right:0.2rem;
          }
        }
      }
      &:first-child{
        .vx-list-item{
          &--content{
            background-image:none;
          }
        }
      }
    }
    &--prepend,&--append,&--append-action,&--inner{
      padding: 0.2rem;
    }
    &--inner{
      @include flexbox;
      &.is-arrow{
        position:relative;
        &:after{
          content: "";
          display: inline-block;
          width: .2rem;
          position: absolute;
          top: 50%;
          right: .3rem;
          height: .2rem;
          margin-top: -2px;
          border-top: 1px solid #999;
          border-right: 1px solid #999;
          transform: rotate(45deg) translateY(-50%);
        }
      }
      &.is-action{
        padding-right:0;
      }
      &.is-align-center{
        @include flexbox('center');
      }
    }
    &--image{
      width: 32vw;
      object-fit: contain;
      max-height: 32vw;
      vertical-align: middle;
    }
    &--content{
      line-height:1.75;
      @include flexbox-item;
      margin-left:8px;
    }
    &--append-action{
      padding: 0.15rem 0.2rem;
      button{
        min-width:1.2rem;
        height:0.58rem;
        margin-left:0.2rem;
        &.vx-btn--link{
          margin-left:0;
        }
      }
    }
    &--action{
      background:#fff;
      position:relative;
      z-index:10;
      padding:0.2rem;
      button{
        height:0.58rem;
        min-width:1rem;
      }
    }
  }
}