.q-table-t-head-cell {
  position: relative;
  vertical-align: bottom;

  .q-table_has-color-groups & {
    background-color: var(--color-tertiary-gray-light);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      content: '';
      border-top: 4px solid
        var(--group-color, var(--color-tertiary-gray-darker));
    }

    &:not(.q-table-t-head-cell_sticked):first-child {
      &,
      &::before {
        border-top-left-radius: var(--border-radius-base);
      }
    }

    &:not(.q-table-t-head-cell_sticked):last-child {
      &,
      &::before {
        border-top-right-radius: var(--border-radius-base);
      }
    }
  }

  .q-table_has-color-groups
    .q-table-t_grided
    &:not(:last-child):not(.q-table-t-head-cell_sticked) {
    border-right: 1px solid var(--color-tertiary-gray-dark);
  }

  &_sticked {
    position: sticky;
    z-index: 20;
    background-color: var(--color-tertiary-gray-light);

    .q-table-t_grided &.q-table-t-head-cell {
      &.q-table-t-head-cell_sticked_left:not(.q-table-t-head-cell_sticked_last),
      &.q-table-t-head-cell_sticked_right:not(.q-table-t-head-cell_sticked_first) {
        border-right: 1px solid var(--color-tertiary-gray-dark);
      }
    }

    &_last {
      &.q-table-t-head-cell_sticked {
        &_right {
          border-top-left-radius: var(--border-radius-base);
          box-shadow: var(--table-box-shadow-inverted);
        }

        &_left {
          border-top-right-radius: var(--border-radius-base);
          box-shadow: var(--table-box-shadow-base);
        }
      }
    }
  }

  &__container {
    position: relative;
    z-index: 15;
    display: flex;
    align-items: flex-end;
    padding: 16px 16px 16px 24px;

    .q-table-t-head-cell_align_right & {
      flex-direction: row-reverse;
    }

    .q-table-t-head-cell:first-child & {
      padding-left: 16px;
    }

    .q-table-t_grided .q-table-t-head-cell_sticked_right &,
    .q-table-t_grided
      .q-table-t-head-cell:not(:last-child):not(.q-table-t-head-cell_sticked_last):not(.q-table-t-head-cell_sticked_right)
      & {
      padding-right: 15px;
    }
  }

  &__content {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-base);
    color: var(--color-primary-black);
    letter-spacing: var(--letter-spacing-base);

    &_ellipsis {
      // stylelint-disable-next-line value-no-vendor-prefix
      display: -webkit-box;
      align-items: flex-end;
      width: auto;
      overflow: hidden;
      word-break: break-word;
      white-space: initial;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    &_sortable {
      cursor: pointer;
      user-select: none;
    }

    &_checkbox {
      width: 100%;
    }
  }

  &__sort-arrow {
    padding: 0;
    margin: 0;
    font-size: 24px;
    background-color: transparent;
    border: none;
    opacity: 0;

    &:focus {
      outline: none;
    }

    .q-table-t-head-cell_sorted &,
    &:hover,
    &.focus-visible {
      color: var(--color-primary-blue);
    }

    .q-table-t-head-cell_sorted &,
    .q-table-t-head-cell_sortable:not(.q-table-t-head-cell_dragging):hover &,
    &.focus-visible {
      opacity: 1;
    }
  }

  &__drag-element {
    padding: 0;
    margin: 0;
    font-size: 24px;
    color: var(--color-tertiary-gray-darker);
    cursor: grab;
    background-color: transparent;
    border: none;
  }

  &__drop-zone {
    position: absolute;
    top: 0;
    z-index: 50;
    width: calc(50% + 1px);
    height: 100%;
    cursor: grabbing;

    &_full {
      right: 0;
      left: 0;
      width: 100%;
    }

    &_left {
      left: 0;

      .q-table-t_grided & {
        left: -1px;
      }

      &:hover {
        border-left: 1px solid var(--color-primary-blue);
      }
    }

    &_right {
      right: -1px;

      &:hover {
        border-right: 1px solid var(--color-primary-blue);
      }
    }
  }

  &__dummy {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
    background-color: rgb(var(--color-rgb-gray) / 16%);
  }
}
