@import "../common/PredefinedMixins.scss";
@import "./partial.scss";
@import "./Variables.scss";

.gh-column {
  position: absolute;
  top: 0;
  overflow: hidden;
  background-color: $grid_headercolumn_bg;
  border-right: $grid_border;
  cursor: pointer;

  &.gh-no-grid-lines {
    border-right: unset;
  }

  .ghc-title {
    @include partial-row-center-start;
    position: absolute;
    left: 0;
    height: inherit;
    color: $grid_headercolumn_fg;
    padding: 0 0 0 4px;

    span {
      @include partial-ellipsis;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px;
      letter-spacing: 0;
    }
  }

  .ghc-sort {
    @include partial-row-center;
    position: absolute;
    right: 0;
    height: inherit;
    width: 32px;
    overflow: hidden;

    &:focus-visible {
      @include focus($outline-offset: -2px,
        $box-shadow: $focus_box_shadow_inset,
      );
    }

    svg {
      width: 16px;
      height: 16px;

      path {
        fill: $grid_header_sort;
      }
    }
  }

  &.frozen {
    z-index: 100;
  }
}