MCLRenderer.css

/* stylelint-disable no-descending-specificity */

.mclContainer {
  display: flex;
  flex-direction: column;

  &:focus {
    outline: none;
  }
}

.mclHeightSpacer {
  position: relative;
}

.mclRowContainer {
  position: absolute;
  min-width: 100%;

  /* first descendants all display: block for height measurment */
  & > * {
    display: block;
  }
}

/* Row is interactive (clickable, hoverable and focusable etc.) */
.mclIsInteractive {
  composes: interactionStyles noPointer hasDot focusDotPositionStart from "../sharedStyles/interactionStyles.css";

  &:hover .mclSticky::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--color-fill-hover);
    opacity: 0.7;
  }

  &:active .mclSticky {
    background-color: var(--color-fill-active);
  }
}

.mclRowFormatterContainer {
  position: absolute;
  width: 100%;
}

.mclRow {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  color: var(--color-text);
  text-decoration: none;
  outline: none;
  background-color: var(--color-fill-table-row-even);

  &:focus-within {
    z-index: 2;
  }

  &:not(:focus-within) {
    z-index: 0;
  }

  &:visited {
    color: var(--color-text);
  }

  /* Different bg on odd rows */
  &.mclIsOdd:not(.mclSelected) {
    background-color: var(--color-fill-table-row-odd);

    & .mclSticky::before {
      content: "";
      background-color: var(--color-fill-table-row-odd);
    }
  }

  &::before {
    border-radius: 0;
  }

  &:focus {
    z-index: 2;
  }

  /* Selected style */
  &.mclSelected {
    color: #fff;
    background-color: var(--color-fill-current);

    /** For universal interaction styling */
    &::after {
      background-color: #fff;
    }

    & a {
      color: var(--color-link-current);
    }

    & .mclSticky::before {
      background-color: var(--color-fill-current);
    }
  }

  &.mclClickableRow:hover {
    cursor: pointer;

    & .mclSticky::after {
      background-color: var(--color-fill-focus);
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
  }

  &.mclWrappedCells {
    flex-wrap: wrap;
  }

  & .mclSticky {
    position: sticky;
    left: 0;
    top: 0;
    background-color: var(--bg);
    box-shadow: 3px 0 4px rgba(0 0 0 / 5%);
    z-index: 3;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: var(--color-fill-table-row-even);
    }

    &.mclStickyEnd {
      right: 0;
      left: initial;
      box-shadow: -3px 0 4px rgba(0 0 0 / 5%);
    }
  }
}

.mclRowsBody {
  padding: 0 6px 3px;

  /* Use monospaced numbers, aka Tabular Numerals (tnum) */
  font-feature-settings: 'tnum';
}

.mclHeaderContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
  width: 100%;
}

.mclHeaderRow {
  display: flex;
  justify-content: flex-start;
  border-bottom: 5px solid var(--primary);

  &.mclHScroll {
    overflow: auto;
  }
}

.mclHeader {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  flex-grow: 0;
  padding: var(--gutter-static-two-thirds) var(--gutter-static-two-thirds) var(--gutter-static-one-third) var(--gutter-static-two-thirds);
  overflow-wrap: break-word;
  font-weight: var(--text-weight-bold);
  font-size: var(--font-size-medium);
  color: var(--color-text);

  &:focus-within {
    box-shadow: inset 0 -5px 0 0 var(--color-fill-focus);
  }

  &.mclClickable {
    cursor: pointer;
  }

  & .mclHeaderInner {
    display: flex;
    padding: 2px 0;
    align-items: center;

    &::after {
      content: '';
      flex: 1 0 var(--gutter-static);
      width: var(--gutter-static);
      margin: 0 2px;
    }

    &:active,
    &:focus {
      outline: none;
    }
  }

  &.mclSticky {
    position: sticky;
    left: 0;
    background-color: var(--bg);
    z-index: 3;
    box-shadow: 3px 0 4px rgba(0 0 0 / 5%);
    border-right: 1px solid var(--color-border-p2);

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
    }

    &.mclStickyEnd {
      right: 0;
      left: initial;
      box-shadow: -3px 0 4px rgba(0 0 0 / 5%);
      border-left: 1px solid var(--color-border-p2);
      border-right: 0;
    }
  }

  &.mclAscending .mclHeaderInner::after {
    content: '';
    flex: 1 0 var(--gutter-static);
    height: var(--gutter-static);
    width: var(--gutter-static);
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20class%3D%22stripes__icon%22%20d%3D%22M7%202.9l5.77%206.92-1.54%201.28L7%206.02%202.77%2011.1%201.23%209.82%207%202.9z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    margin: 0 2px;
  }

  &.mclDescending .mclHeaderInner::after {
    content: '';
    flex: 1 0 var(--gutter-static);
    height: var(--gutter-static);
    width: var(--gutter-static);
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20class%3D%22stripes__icon%22%20d%3D%22M7%2011.1L1.23%204.18%202.77%202.9%207%207.98l4.23-5.08%201.54%201.28L7%2011.1z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    margin: 0 2px;
  }

  &.mclSorted .mclHeaderInner {
    text-decoration: underline;
  }

  &.mclSortIndicator .mclHeaderInner::after {
     content: '';
     width: var(--gutter-static);
     height: 18px;
     background:
       url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23888%22%20class%3D%22stripes__icon%22%20d%3D%22M7%202.9l5.77%206.92-1.54%201.28L7%206.02%202.77%2011.1%201.23%209.82%207%202.9z%22/%3E%3C/svg%3E') no-repeat center top,
       url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23888%22%20class%3D%22stripes__icon%22%20d%3D%22M7%2011.1L1.23%204.18%202.77%202.9%207%207.98l4.23-5.08%201.54%201.28L7%2011.1z%22/%3E%3C/svg%3E') no-repeat center 8px;
     background-size: 10px;
  }
}

.mclHeaderOuter:active,
.mclHeaderOuter:focus {
  outline: none;
}

/**
* Functional cell styles
*/
.mclCell {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  overflow: hidden;
  text-align: left;
  word-break: break-word;

  &.showOverflow {
    overflow: visible;
  }
}

/**
* Default cell styles
*/
.mclCellStyle {
  line-height: var(--line-height);
  padding: var(--gutter-static-one-third) var(--gutter-static-two-thirds);
  min-height: var(--control-min-size-desktop);
  border-right: 1px solid var(--color-border-p2);

  &:last-child {
    border-right: 0;
  }
}

[dir="rtl"] .mclCellStyle {
  border-right: 0;
  border-left: 1px solid var(--color-border-p2);

  &:last-child {
    border-left: 0;
  }
}

.mclScrollable {
  flex-grow: 1;
  flex-shrink: 0;
  overflow: auto;
  width: 100%;
}

.mclContentLoadingRow {
  width: 100%;
  display: flex;
  position: absolute;
  justify-content: flex-end;
  padding: 0 20px;
  bottom: 18px;
  pointer-events: none;
}

.mclContentLoading {
  display: flex;
  place-content: center center;
  height: 1.5rem;
  width: 3rem;
  padding: 0.25rem 0.5rem 0 0;
  background-color: rgba(255 255 255 / 50%);
}

.mclEmptyMessage {
  padding: 1rem;
}

.mclEndOfListContainer {
  position: absolute;
  overflow: hidden;
}

.mclCenteredContainer {
  position: relative;
  left: 0;
}

.mclEndOfList {
  color: var(--color-text-p2);
  padding: var(--gutter-static-two-thirds) 0;
}

/* loader rows */
.mclLoaderRow {
  width: 100%;
  position: absolute;
  top: 100%;
  overflow: hidden;
}

.mclRowPlaceholder {
  content: " ";
  border-radius: 2px;
  background-color: var(--color-fill-table-row-odd);
  width: 100%;
  height: 1rem;
}

/**
 * Has margin
 * This is mostly relevant in results lists to achieve
 * the correct spacing inside the pane without having blank areas around the MCL
 */

.hasMargin {
  & .mclHeaderRow,
  & .mclRow {
    margin: 0 var(--gutter-static);
  }
}

.mclPaginationCenterContainer {
  display: flex;
  justify-content: space-around;
  position: relative;
}

.mclPrevNextPageInfoContainer {
  font-weight: bold;
  display: flex;
  align-items: center;
  place-content: center center;
}

[dir="rtl"] .mclSticky {
  left: initial;
  right: 0;
  box-shadow: -3px 0 4px rgba(0 0 0 / 5%);
  border-left: 1px solid var(--color-border-p2);

  &.mclStickyEnd {
    left: 0;
    right: initial;
    box-shadow: 3px 0 4px rgba(0 0 0 / 5%);
    border-right: 1px solid var(--color-border-p2);
    border-left: 0;
  }
}

/* stylelint-enable no-descending-specificity */