
/*
Resets the style of the listbuilder list.

Use other css classes to apply styles.
*/
.cradmin-legacy-listbuilder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    margin: 0;
    padding: 0;
  }
}

/*
Styles for the RowList.

Note that the RowList also uses the ``cradmin-legacy-listbuilder-list`` class.
*/
.cradmin-legacy-listbuilder-rowlist {
}


/*
Styles for the FloatGridList.

Note that the FloatGridList also uses the ``cradmin-legacy-listbuilder-list`` class.
*/
.cradmin-legacy-listbuilder-floatgridlist {
  .clearfix();
  clear: both;
  &>li {
    display: block;
  }

  &.cradmin-legacy-listbuilder-floatgridlist-md {
    &>li {
      float: left;

      @media (max-width: @screen-xs-max) {
        width: (100%/2);
        &:nth-child(2n+3) {
          clear: left;
        }
      }
      @media (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
        width: (100%/4);
        &:nth-child(4n+5) {
          clear: left;
        }
      }
      @media (min-width: @screen-lg-min) {
        width: (100%/5);
        &:nth-child(5n+6) {
          clear: left;
        }
      }
    }
  }

  &.cradmin-legacy-listbuilder-floatgridlist-lg {
    &>li {
      @media (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
        float: left;
        width: (100%/2);
        &:nth-child(2n+3) {
          clear: left;
        }
      }
      @media (min-width: @screen-lg-min) {
        float: left;
        width: (100%/3);
        &:nth-child(3n+4) {
          clear: left;
        }
      }
    }
  }
}
