$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 {
  border: 1px solid transparent;
  box-shadow: 0 0 0 2px $euiFocusRingColor;
  border-radius: 1px;
  z-index: 2; // Needed so it sits above potential striping in the next row
  outline: none; // Remove outline as we're handling it manually
}

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

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