uui/components/tables/DataTableHeaderCell.module.scss

@use '../../assets/styles/index' as *;

// !!! For these variables the values are set inline
// --uui-dt-header-cell-icon-size,
// --uui-dt-header-cell-padding-start,
// --uui-dt-header-cell-padding-end,
// --uui-dt-header-cell-resizing-marker-width

.root {
    --uui-dt-header-cell-font: var(--uui-font);
    --uui-dt-header-cell-font-weight: 600;
    --uui-dt-header-cell-line-height: 30px;
    --uui-dt-header-cell-height: var(--uui-size);
    --uui-dt-header-cell-caption-column-gap: 3px;
    --uui-dt-header-cell-truncate-caption-line-height: 18px;
    --uui-dt-header-cell-border: transparent;
    //
    color: var(--uui-text-primary);
    align-items: center;
    padding-inline-start: var(--uui-dt-header-cell-padding-start);
    padding-inline-end: var(--uui-dt-header-cell-padding-end);
    width: 0;
    background-clip: padding-box;
    min-height: var(--uui-dt-header-cell-height);
    border-color: var(--uui-dt-header-cell-border);

    .caption-wrapper {
        column-gap: var(--uui-dt-header-cell-caption-column-gap);
    }

    :global(.uui-icon) {
        svg {
            height: var(--uui-dt-header-cell-icon-size);
            width: inherit;
        }
    }

    &:global(.-clickable) {
        cursor: pointer;

        &:hover {
            background: var(--uui-dt-row-bg-hover);
            border-color: var(--uui-dt-border);
        }

        &:hover:not(:has(:global(.-clickable):hover)) {
            .sort-icon, .dropdown-icon, .infoIcon {
                fill: var(--uui-icon-hover);
            }
        }
    }

    &.resizable {
        &:hover {
            border-color: var(--uui-dt-border);
        }
    }

    .caption-wrapper {
        display: flex;
        overflow: hidden;
        flex: 1 1 0;
        min-width: 0;

        &.align-right {
            flex-direction: row-reverse;
        }

        &.align-center {
            justify-content: center;
        }
    }

    .caption {
        --uui-text-line-height: var(--uui-dt-header-cell-line-height);
        font-family: var(--uui-dt-header-cell-font);
        font-weight: var(--uui-dt-header-cell-font-weight);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0; //????

        &.truncate {
            /* stylelint-disable */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* stylelint-enable */
            overflow: hidden;
            white-space: normal;
            line-height: var(--uui-dt-header-cell-truncate-caption-line-height);
        }
    }

    .checkbox {
        padding: 0;
        padding-inline-end: var(--uui-horizontal-gap);
    }

    .icon {
        display: flex;
        flex-shrink: 0;
        cursor: pointer;
    }

    .fold-all-icon {
        display: flex;
        padding: 0 var(--uui-horizontal-gap) 0 0;
        align-self: stretch;

        &:hover {
            fill: var(--uui-icon-hover);
        }
    }

    .cell-tooltip {
        top: 0;
    }

    .upper-case {
        text-transform: uppercase;
    }

    .resizing-marker {
        position: absolute;
        inset-inline-end: 0;
        height: 100%;
        cursor: col-resize;
        user-select: none;
        width: var(--uui-dt-header-cell-resizing-marker-width);

        &:hover {
            background-color: var(--uui-dt-cell-bg-resize);
        }
    }

    &.pinned-right .resizing-marker {
        inset-inline-start: 0;
    }

    &.draggable {
        cursor: pointer;
    }

    &.ghost {
        @include dnd-ghost-shadow();
        background-color: var(--uui-dt-row-bg-hover);
    }

    &.is-dragged-out {
        background-color: var(--uui-dt-row-bg-hover);
        opacity: 0.5;
    }

    &.dnd-marker-left {
        box-shadow: inset 2px 0 0 0 var(--uui-dt-header-drop_marker);

        &:global(.-clickable), &:local(.resizable) {
            box-shadow: inset 2px 0 0 0 var(--uui-dt-header-drop_marker);
        }
    }

    &.dnd-marker-right {
        box-shadow: inset -2px 0 0 0 var(--uui-dt-header-drop_marker);

        &:global(.-clickable), &:local(.resizable) {
            box-shadow: inset -2px 0 0 0 var(--uui-dt-header-drop_marker);
        }
    }
}

.cell-tooltip-wrapper {
    --uui-dt-header-cell-tooltip-caption-font-size: 14px;
    --uui-dt-header-cell-tooltip-caption-font-weight: 600;
    --uui-dt-header-cell-tooltip-info-font-size: 12px;
    --uui-dt-header-cell-tooltip-info-font-weight: 400;
    //
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: var(--uui-vertical-gap);

    .cell-tooltip-text {
        color: var(--uui-tooltip-text);
        padding: 0;
    }

    .tooltip-caption {
        font-size: var(--uui-dt-header-cell-tooltip-caption-font-size);
        font-weight: var(--uui-dt-header-cell-tooltip-caption-font-weight);
    }

    .tooltip-info {
        font-size: var(--uui-dt-header-cell-tooltip-info-font-size);
        font-weight: var(--uui-dt-header-cell-tooltip-info-font-weight);
    }
}