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

.container {
  max-width: 100%;

  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  place-items: center start;

  .label {
    font-weight: bold;
    font-size: var(
      --explorer-column-label-font-size,
      $explorer-column-label-font-size
    );
    color: var(--explorer-column-label-color, $explorer-column-label-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 100%;
    padding-right: 8px;
  }

  .clickWrapper {
    display: grid;
    grid-template-columns: auto auto;

    &.sortable {
      cursor: pointer;
      user-select: none;
    }

    user-select: none;

    .arrows {
      display: grid;
      grid-auto-rows: 1fr;
      grid-template-columns: 1fr;
      grid-gap: 0px;
      margin-top: 0px;
      margin-right: 10px;
      stroke-width: 2px;

      svg {
        height: 8px;

        path {
          fill: var(--explorer-sort-color, $explorer-sort-color);
          stroke: var(
            --explorer-sort-stroke-color,
            $explorer-sort-stroke-color
          );

          &.sorted {
            stroke: var(
              --explorer-selected-sort-color,
              $explorer-selected-sort-color
            );
          }
        }
      }
    }
  }
}
