.#{$ns}List {
  border: $List-borderWidth solid $List-borderColor;
  border-radius: $List-borderRadius;
  background-color: $List-bg;
  margin-bottom: $gap-md;
  position: relative;

  &-toolbar {
    @include clearfix();
    display: flex;
    flex-wrap: wrap;
    padding: $List-toolbar-paddingY $List-toolbar-paddingX;
  }

  &-actions {
    display: inline-block;

    > * {
      margin-right: $Crud-toolbar-gap;
    }
  }

  &-header {
    padding: $List-toolbar-paddingY $List-toolbar-paddingX;

    > * + .#{$ns}Button,
    > * + .#{$ns}ButtonGroup,
    > * + .#{$ns}ButtonToolbar {
      margin-left: $Crud-toolbar-gap;
    }
  }

  &-header + &-toolbar {
    padding-top: 0;
  }

  &-heading {
    padding: $gap-xs 0;
  }

  &-fixedTop {
    position: absolute;
    background: $white;
    z-index: -1;
    opacity: 0;
    box-shadow: $List-fixedTop-boxShadow;
    padding: $gap-sm;

    &.in {
      position: fixed;
      opacity: 1;
      z-index: $zindex-affix;
    }

    .#{$ns}Cards-toolbar {
      margin-bottom: 0;
    }

    &:empty {
      display: none;
    }
  }

  &--unsaved &-heading {
    background: $List--unsaved-heading-bg;
    color: $List--unsaved-heading-color;
    padding: $gap-xs $gap-sm;
    margin-bottom: $gap-sm;
  }

  &-dragTip {
    width: 100%;
    color: $info;
    clear: both;
    margin-top: $gap-xs;
  }

  &-placeholder {
    color: $text--muted-color;
    text-align: center;
    height: $List-placeholder-height;
    line-height: $List-placeholder-height;
  }
}

.#{$ns}ListGroup {
  max-width: px2rem(400px);
  display: flex;
  flex-direction: column;

  &-item {
    position: relative;
    display: block;
    padding: $ListItem-paddingY $ListItem-paddingX;
    margin-bottom: px2rem(-1px);
    background-color: $white;
    border: $ListItem-borderWidth solid $List-borderColor;

    &:first-child {
      border-top-left-radius: $borderRadius;
      border-top-right-radius: $borderRadius;
    }

    &:last-child {
      border-bottom-left-radius: $borderRadius;
      border-bottom-right-radius: $borderRadius;
      margin-bottom: 0;
    }

    &:hover {
      // todo
      z-index: 1;
    }

    &.is-active {
      // todo
      z-index: 2;
    }

    &.is-disabled {
      color: $text--muted-color;
    }
  }

  &--expanded {
    .#{$ns}ListGroup-item {
      border-radius: $borderRadius;

      margin-bottom: $gap-sm;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.#{$ns}ListItem {
  @include clearfix();

  & + & {
    border-top: $ListItem-borderWidth solid $ListItem-borderColor;
  }

  position: relative;
  display: block;
  padding: $ListItem-paddingY $ListItem-paddingX;

  &:nth-child(even) {
    background-color: $ListItem--strip-bg;
  }

  &-checkBtn {
    float: left;
    margin-right: $gap-sm;
  }

  &-dragBtn {
    cursor: move;
    float: left;
    margin-right: $gap-sm;
  }

  &-actions {
    float: right;
  }

  &-title {
    margin: 0;
    padding: 0;
    font-size: $fontSizeBase;
    color: $text--loud-color;
    font-weight: $fontWeightNormal;
  }

  &-content {
    overflow: hidden;
  }

  &-field {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
  }

  &-fieldValue {
    position: relative;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-fieldLabel {
    width: px2rem(150px);
    color: $text--muted-color;
  }

  &.is-checked {
    background-color: $ListItem-onChecked-bg;
    border-color: $ListItem-onChecked-borderColor;
    color: $ListItem-onChecked-color;

    + .#{$ns}ListItem {
      border-color: $ListItem-onChecked-borderColor;
    }

    .#{$ns}ListItem-fieldLabel {
      color: lighten($ListItem-onChecked-color, 20%);
    }
  }

  &.is-modified,
  &.is-moved {
    background-color: $ListItem-onModified-bg;
    border-color: $ListItem-onModified-borderColor;
    color: $ListItem-onModified-color;

    + .#{$ns}ListItem {
      border-color: $ListItem-onModified-borderColor;
    }

    .#{$ns}ListItem-fieldLabel {
      color: lighten($ListItem-onModified-color, 20%);
    }
  }

  &.is-dragging {
    opacity: $ListItem-onDragging-opacity;
  }
}