@use '../../scss/base/mixins.scss' as *;
@use '../../scss/base/variables' as var;

@use 'sass:list';

.listLoadingWrapper {
  display: table-caption;
  caption-side: bottom;
  margin: 16px 0;
}

.flipped {
  transform: rotate(180deg);
}

.childRowIcon {
  width: 10px;
  margin: 0px 16px;
}

.firstRowShadow {
  box-shadow: inset 0px 4px 4px -4px var(--light-gray);
  &.leftStickyCell {
    box-shadow:
      inset 0px 4px 4px -4px var(--light-gray),
      8px 0px 5px -4px var(--light-gray) !important;
  }
  &.rightStickyCell {
    box-shadow:
      inset 0px 4px 4px -4px var(--light-gray),
      -8px 0px 5px -4px var(--light-gray) !important;
  }
}

.lastRowShadow {
  box-shadow: inset 0px -4px 4px -4px var(--light-gray);
  &.leftStickyCell {
    box-shadow:
      inset 0px -4px 4px -4px var(--light-gray),
      8px 0px 5px -4px var(--light-gray) !important;
  }
  &.rightStickyCell {
    box-shadow:
      inset 0px -4px 4px -4px var(--light-gray),
      -8px 0px 5px -4px var(--light-gray) !important;
  }
}

.actionItems {
  width: 18px;
}

// needed for overriding sticky table styles
.tableRow {
  // This is taken from _mixins.scss and is needed because the styles from this sticky table library are very specific and hard to override. With this here, we can have the full range of background colors for our table cells if needed.
  @each $item in $bgColors {
    @include generate(
      bgc,
      background-color,
      list.nth($item, 1),
      list.nth($item, 2),
      ''
    );
  }
  &:last-of-type {
    .tableCell {
      border-bottom: none !important;
      padding-bottom: 32px; // This is needed so that the last row of a table is not covered by the gradient at the bottom.
    }
  }
}

.showScrollbar {
  &::-webkit-scrollbar {
    width: 0;
    height: 8px;
    background: var(--light-purple);
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    box-shadow: inset 0 0 6px var(--purple);
    background: var(--purple);
  }
}

.stickyTableHeader.tableRow {
  .tableCell {
    background: var(--white);
    border-bottom: 2px solid var(--purple) !important; // important tag overrides base cell styles
    white-space: nowrap;
  }
}

.tableCell {
  background-color: var(--white);
  border-bottom: 1px solid var(--medium-purple) !important; // important tag overrides base cell styles
  padding: 12px;
  font-size: var(--font-size-12);
  vertical-align: middle;
  width: 100%;
  &.checkboxWidth {
    width: 18px;
  }
}

.stickyClasses {
  .tableCell {
    &.lastStickyCellLeft,
    // Keeping these global styles to help with CustomTable styling in our apps
    &:global(.last-sticky-cell-left) {
      border-right: 1px solid var(--medium-gray);
      box-shadow: 8px 0px 5px -2px var(--light-gray);
    }
    &.firstStickyCellRight,
    // Keeping these global styles to help with CustomTable styling in our apps
    &:global(.first-sticky-cell-right) {
      border-left: 1px solid var(--medium-gray);
      box-shadow: -8px 0px 5px -2px var(--light-gray);
    }
    &.extraLeftPadding,
    // Keeping these global styles to help with CustomTable styling in our apps
    &:global(.extra-left-padding) {
      padding-left: 16px;
    }
  }
  :global {
    tr {
      // This mixin is very much needed here to overcome the specificity so that consuming components can highlight the cells with different colors.
      @each $item in $bgColors {
        @include generate(
          bgc,
          background-color,
          list.nth($item, 1),
          list.nth($item, 2),
          ''
        );
      }
    }
  }
}

.dataTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.headerRow {
  height: 57px; // 57px is the height of the header row
  position: sticky;
  top: 0px;
  z-index: 5;
}

.groupHeaderRow {
  position: 'sticky';
  z-index: 5;
}

.fwRegular {
  font-weight: var(--font-weight-regular);
}

.fwBold {
  font-weight: var(--font-weight-bold);
}

.redFont {
  color: var(--red);
}

.darkPurpleFont {
  color: var(--dark-purple);
}

.darkYellowFont {
  color: var(--dark-yellow);
}

.darkGreenFont {
  color: var(--dark-green);
}

.chartStandardBlueFont {
  color: var(--chart-standard-blue);
}

.purpleBg {
  background-color: var(--purple);
}

.lighterGrayBg {
  background-color: var(--lighter-gray);
}

.lightBlueBackground {
  background-color: var(
    --light-blue
  ) !important; // important tag overrides base cell styles
}

.lightRedBackground {
  background-color: var(
    --light-red
  ) !important; // important tag overrides base cell styles
}

.lighterGrayBackground {
  background-color: var(
    --lighter-gray
  ) !important; // important tag overrides base cell styles
}

.lightYellowBackground {
  background-color: var(
    --light-yellow
  ) !important; // important tag overrides base cell styles
}

.lightGreenBackground {
  background-color: var(
    --light-green
  ) !important; // important tag overrides base cell styles
}

.mediumBlueBackground {
  background-color: var(
    --chart-light-6-blue
  ) !important; // important tag overrides base cell styles
}

.extraLeftPadding {
  padding-left: 16px !important; // important tag overrides base cell styles
}

.paddingX4 {
  padding: 0 4px;
}

.padding16 {
  padding-left: 16px;
}

.paddingY16 {
  padding: 16px 0;
}

.paddingRight4 {
  padding-right: 4px;
}

.paddingRight16 {
  padding-right: 16px;
}

.padding32 {
  padding-left: 32px;
}

.padding48 {
  padding-left: 48px;
}

.topMargin {
  margin-top: 16px;
}

.verticalMargin {
  margin: 16px 0;
}

.verticalPadding {
  padding-top: 16px;
  padding-bottom: 16px;
}

.horizontalPadding {
  padding-left: 8px;
  padding-right: 8px;
}

.displayFlex {
  display: flex;
}

.marginLeftIcon {
  margin-left: 8px;
}

.fontWeightSemiBold {
  font-weight: var(--font-weight-semibold);
}

.flexDisplay {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.flexAlignCenter {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}

.selectedHeader {
  @extend .horizontalPadding;
  @extend .verticalPadding;
  display: flex;
  justify-content: space-between;
}

@mixin bottomGradient {
  bottom: 20px;
  height: 20px;
}

.bottomGradientHeight {
  @include bottomGradient;
}

.bottomGradientCustomHeight {
  bottom: 30px;
  height: 30px;
  @supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    @include bottomGradient;
  }
}

.bottomGradient {
  position: relative;
  transform: rotate(180deg);
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0),
    rgb(255, 255, 255) 100%
  );
  z-index: 5;
}

.tableHeaderContainer {
  margin-bottom: 16px;
}

.selectCheckBoxHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.expandedRowContainer {
  position: sticky;
  max-height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  left: 0px;
  padding: 16px;
}

.positionRelative {
  position: relative;
}

.bgc {
  & > td {
    background-color: var(--light-purple);
  }
}