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

.container {
  background-color: var(
    --explorer-background-color,
    $explorer-background-color
  );

  z-index: 1;

  display: grid;
  padding: 1px 0px 1px 0px;
  grid-auto-rows: var(--dynamic-list-row-height, $dynamic-list-row-height);
  column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);

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

  justify-items: left;
  align-items: center;

  > :first-child {
    padding-left: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
  }

  .column {
    width: 100%;
    height: 100%;

    display: grid;
    align-items: center;
    position: relative;

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

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

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

      &.resizeHandleDisabled {
        cursor: default;
      }
    }
  }

  .position {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;

    align-items: center;
  }

  p {
    color: var(--explorer-column-label-color, $explorer-column-label-color);
    font-size: var(
      --explorer-column-label-font-size,
      $explorer-column-label-font-size
    );
    font-weight: bold;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    text-overflow: ellipsis;
    overflow: hidden;
  }
}
