.list-reset,
.list-unstyled {
    .list-reset;
}

/*********************************************************
* For button lists
*/
.list-btns {
    .list-reset;
    li {
        margin-bottom: 15px;
        &:last-child {
            margin-bottom: 0;
        }
    }
}


/*********************************************************
* For cell-styled lists, such as the 'My apps' list on profile
* or the AppCell component
*/
.list-cell {
    .list-reset;
    li {
        background-color: white;
        border-bottom: 1px solid @lightGrey;
        line-height: 1.4;
      &:first-child {
        border-top: 1px solid @lightGrey;
      }
    }

    lh {
        .section-heading();
    }

}

// Can be an <a> or <div>
.cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: inherit;

    .disable {
        opacity: 0.4;
    }

    .btn.btn-cell {
      line-height: 0.8;
      padding: @list-cell-padding;
      padding-bottom: 12px;
    }

    // For left and right sections
    .left, .right {
        padding: @list-cell-padding;
        &.no-padding {
          padding: 0;
        }
    }

    // Typography styles
    .title {
        display: block;
        .text-truncate;
    }
    .description {
      font-size: 0.8em; // to replace with small
      font-weight: 400;
      color: @mediumGrey;
    }

    // Icons
    .icon {
        width: 50px;
        height: 50px;
        display: block;
        float: left;
    }

    .app-icon,
    .author-icon {
      width: 50px;
      height: 50px;
      display: block;
      position: relative;
    }
    .app-icon-image {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .app-icon {
      border-radius: 50%;
    }
}