@import "../../variables/colors.scss";
@import "../../variables/fonts.scss";

.listView {
  position: relative;
  width: 100%;
}
.listView.scrollX {
  overflow-x: auto;
}

.listViewContainer.scrollX {
  overflow-x: auto;

  // When the user scrolls to the edge of the card table, show a shadow to indicate that they can
  // scroll either to the left, right, or in both directions.
  &.leftShadow { box-shadow: inset 30px 0 20px -30px $midnightOpaque20; }
  &.rightShadow { box-shadow: inset -30px 0 20px -30px $midnightOpaque20; }
  &.leftShadow.rightShadow {
    box-shadow: inset 30px 0 20px -30px $midnightOpaque20,
                inset -30px 0 20px -30px $midnightOpaque20;
  }
}

.listViewTable {
  width: 100%;
  border-collapse: collapse;
}
.listViewTable.fixedWidth { table-layout: fixed; }
.listViewTable th, .listViewTable td { padding: 0; }
.listViewTable th { font-weight: 500; }

.listViewTable tr,
.listViewRowHeader > .listViewHeader,
.listViewRowHeader > .listViewCell {
  border-bottom: 1px solid $gray200;
}


.listViewHeader {
  display: flex;
  align-items: center;
  height: 32px;
  padding-right: 24px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.listViewTable :last-child > .listViewHeader { padding-right: 0px; }
.listViewTable.padOuterColumns :first-child > .listViewHeader { padding-left: 24px; }
.listViewTable.padOuterColumns :last-child > .listViewHeader { padding-right: 24px; }

.listViewHeader.clickable { cursor: pointer; }

.listViewRowHeader {
  position: absolute;
  z-index: 1;
}

.listViewRow.clickable { cursor: pointer; }

.listViewCell {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-right: 24px;
  font-size: $fontSizeBase;
  color: $gray700;
}
.listViewCell:after{
  content:'';
  min-height:inherit;
  font-size:0;
}

.listViewTable :last-child > .listViewCell { padding-right: 0px; }
.listViewTable.padOuterColumns :first-child > .listViewCell { padding-left: 24px; }
.listViewTable.padOuterColumns :last-child > .listViewCell { padding-right: 24px; }

.listViewTable > tbody > tr:last-child,
.listViewTable > tbody > tr:last-child > .listViewRowHeader > .listViewCell {
  border-bottom: none;
}

.listViewCell.clickable { cursor: pointer; }


.listViewClickableLink {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: inherit;
  align-items: center;
  text-decoration: underline;
  font-weight: 500;
  color: $midnight;
  cursor: pointer;
}