@import "../variables/mixins";
@import "../variables/colors";
@import "../variables/sizes";

.List {
  display: flex;
  flex-direction: column;
}

.List.List--selections {
  margin-bottom: $sMargin-elementInline;
  border: 1px solid $cStructure-mainLine;
  border-radius: $sCard-borderRadius;
  background-color: $cStructure-mainBkg;
}

.List-row {
  display: flex;

  // Makes sure prev border is overlapped but the is-selected one
  position: relative;
  box-sizing: content-box; // to make sure size is consistent w/ borders
  align-items: center;
  justify-content: space-between;
  margin-top: -2px;
  border: 1px solid transparent;
}

.List-row.is-selected {
  border: 1px solid $cCard-selectedBorder;
  border-radius: $sCard-borderRadius;
  background-color: $cCard-selectedFill;
}

.List-row.List-row.is-disabled {
  opacity: 0.4;
}

.List-row:last-child > .List-rowItem {
  // to have same height as the other items, w/o the visible border
  border-bottom: 1px solid transparent;
}

.List-rowItem {
  display: flex;
  box-sizing: content-box; // to make sure size is consistent w/ borders
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-right: $sMargin-element;
  margin-left: $sMargin-element;
  padding-top: $sMargin-group;
  padding-bottom: $sMargin-group;
  border-bottom: 1px solid $cStructure-mainLine;
}

.List-rowItem.List-rowItem--compact {
  padding-top: $sMargin-elementInline;
  padding-bottom: $sMargin-elementInline;
}

.List-rowItem.List-rowItem--withoutSideMargins {
  margin-right: 0;
  margin-left: 0;
}

.List-rowItem.List-rowItem--withoutBottomBorder {
  border-bottom: 0;
}

.List-rowItem.List-rowItem--withoutBottomPadding {
  padding-bottom: 0;
}

.List-row.is-selected > .List-rowItem {
  border-bottom: 1px solid transparent;
}