@import '~cartoassets/src/scss/cdb-variables/sizes';

// TODO: remove editor
$sMargin-elementInline: 12px; // To separate inline elements
$cStructure-mainLine: rgba(#DDD, 1);
$sCard-borderRadius: 4px;
$cStructure-mainBkg: rgba(#FFF, 1);
$cCard-selectedBorder: rgba(#9DC2E0, 1);
$cCard-selectedFill: rgba(#EFF6FC, 1);
$sMargin-group: 28px; // To separate groups inside a section
$cStructure-softLine: rgba(#000, 0.06);

.List {
  display: flex;
  flex-direction: column;
  font: normal 13px/20px "Lato", sans-serif;
}

.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;
}