/* stylelint-disable terra/custom-property-pseudo-selectors */
/* stylelint-disable selector-max-compound-selectors */
@import '../clinical-lowlight-theme/ColumnHeaderCell.module';
@import '../orion-fusion-theme/ColumnHeaderCell.module';

:local {
  .column-header {
    background-color: var(--terra-table-column-header-background-color, #dedfe0);
    border-bottom: var(--terra-table-column-header-border-bottom, 1px solid #000);
    border-right: var(--terra-table-column-header-border-right, 1px solid #000);
    border-top: var(--terra-table-column-header-border-top, 1px solid #000);
    color: var(--terra-table-column-header-text-color);
    position: sticky;
    top: 0;
    z-index: 1;

    &:first-child {
      border-left: var(--terra-table-column-header-border-left, 1px solid #000);
    }

    &:focus {
      outline: var(--terra-table-column-header-focus-outline, 3px dashed #000);
      outline-offset: var(--terra-table-column-header-focus-outline-offset, -5px);
    }

    &.pinned {
      position: sticky;
      z-index: 2 !important;
    }

    &.last-pinned-column {
      border-right: var(--terra-table-last-pinned-header-border-right, 2px solid #808080);
    }

    // after element is needed for box-shadow to be applied to only right side
    // with 2 cells in header it can't show up on top and bottom
    &.last-pinned-column::after {
      content: "";
      position: absolute;
      top:0;
      right:0;
      bottom: -1px;
      width: 6px;
      box-shadow: var(--terra-table-last-pinned-header-box-shadow, 2px -1px 6px #808080); 
      clip-path: inset(0 -6px 0 0); // second position -6px must be consistent with third position (6px) in box-shadow prop, rest should be 0.
    }

    .header-container {
      align-items: center;
      display: flex;
      flex-direction: row;
      height: 100%;
      padding: var(--terra-table-header-cell-padding, 5px);
      width: 100%;

      &:focus {
        outline: var(--terra-table-column-header-focus-outline, 3px dashed #000);
        outline-offset: var(--terra-table-column-header-button-focus-outline-offset, -4px);
      }
    }

    // Add right margin for error icon
    .error-icon {
      margin-right: var(--terra-table-error-icon-margin-right, 5px);
    }

    // Style column header text
    .display-text {
      background: transparent;
      border: 0;
      flex: 1;
      font-weight: normal;
      outline: none;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .display-text.hidden {
      color: transparent;
    }
  }

  .action-cell {
    border-top: 0 solid; // only one border needed
    padding: 2px;
    text-align: left; 

    button {
      outline-offset: -2px !important;
    }

    button > :first-child {
      padding: 0 4px !important;
    }
  }

  // Hover state for selectable elements
  .selectable:hover:not(.action-cell) {
    background-color: var(--terra-table-header-hover-background-color, #daecf6);
    cursor: pointer;
  }

  // Style column header highlight icon
  .highlight-icon-svg {
    height: 20px;
    width: 20px;
  }

  // Style column header highlight circle icon
  .highlight-icon-circle {
    fill: var(--terra-table-column-header-highlighted-green-circle-fill, #57922f);
  }

  // Style column header highlight square icon
  .highlight-icon-square {
    fill: var(--terra-table-column-header-highlighted-orange-square-fill, #c97318);
    height: 6px;
    width: 6px;
  }
}