$euiDataGridPrefix: '.euiDataGrid--';

// Things can get nesty so it's nice to have an approved list that match our typings
$euiDataGridStyles: (
  'bordersAll'
  'bordersNone'
  'bordersHorizontal'
  'paddingSmall'
  'paddingMedium'
  'paddingLarge'
  'stripes'
  'rowHoverNone'
  'rowHoverHighlight'
  'headerShade'
  'headerUnderline'
  'footerShade'
  'footerOverline'
  'fontSizeSmall'
  'fontSizeLarge'
  'noControls'
  'stickyFooter'
);

// All this does is take some of the above and make a sibling selector
// selector(headerShade, fontSizeLarge)
// will produce `.euiDataGrid--headerShade.euiDataGrid--fontSizeLarge
@function euiDataGridSelector($selectorKeys...) {
  $selectorList: '';
  @each $selector in $selectorKeys {
    // Spit out warnings when you make typos!
    @if (index($euiDataGridStyles, $selector != true)) {
      @error '#{$selector} is not an allowed value in the euiDataGridStyles() mixin';
    }
    $selctorValue: #{$euiDataGridPrefix}#{$selector};
    $selectorList: str-insert($selectorList, $selctorValue, 1000);
  }

  @return $selectorList;
}

@mixin euiDataGridStyles($selectorKeys...) {
  #{euiDataGridSelector($selectorKeys...)} {
    @content;
  }
}

@mixin euiDataGridHeaderCell {
  .euiDataGridHeaderCell {
    @content;
  }
}

@mixin euiDataGridCellFocus {
  outline: none; // Remove outline as we're handling it manually

  // We don't want to use a border on the focused cell directly because we want to maintain the light gray borders
  // We can't use a box shadow or outline because it would be contained outside the cell and it would be cut by other surrounding cells
  // So the solution is to use use a pseudo-element. It allows us to use a border, and it can be contained inside the cell by positioning it with an absolute position.
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: $euiBorderWidthThick solid $euiFocusRingColor;
    border-radius: $euiBorderRadiusSmall;
    z-index: 2; // We want this to be on top of all the content
    pointer-events: none; // Because we put it with a higher z-index we don't want to make it clickable this way we allow selecting the content behind
  }
}

@mixin euiDataGridRowCell {
  .euiDataGridRowCell {
    @content;
  }
}

@mixin euiDataGridFooterCell {
  .euiDataGridRowCell.euiDataGridFooterCell {
    @content;
  }
}

@mixin euiDataGridRowCellActions($definedHeight: false) {
  @if $definedHeight {
    // Defined heights are cells with row heights of auto, lineCount, or a static height
    // that set the __contentByHeight class
    .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
      @content;
    }
  } @else {
    // Otherwise, an undefined height (single flex row) will set __expandContent
    .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions {
      @content;
    }
  }
}