@import '../../../styles/common.scss';

.container {
  padding-left: 5px;
  display: grid;
  position: sticky;
  top: 0;

  background-color: var(
    --explorer-header-background-color,
    $explorer-header-background-color
  );

  box-sizing: border-box;
  border-bottom: solid 1px var(--list-header-border-color, $list-header-border-color);

  .columnLabel {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    position: relative;

    .resizeHandle {
      cursor: col-resize;
      width: 7px;
      height: 100%;

      z-index: 1;
      border-right: var(--explorer-list-row-border, 1px solid var(--list-header-resize-handle-border-color, $list-header-resize-handle-border-color));
      position: absolute;
      right: 0;

      &:hover:not(.resizeHandleDisabled) {
        border-width: 3px;
      }

      &.resizeHandleDisabled {
        cursor: default;
      }
    }
  }
}
