@use '../../../../../styles/base/mixin' as mixins;

$header-cell: (
    label: (
        gap: 0.5rem,
    ),
    prefix: (
        icon-size: 1.5rem,
    ),
    suffix: (
        icon-size: 1.5rem,
    ),
    icon: (
        margin: 0 0 0 1rem,
        color: var(--clr-black-40),
    ),
    icon-active: (
        color: var(--clr-black-100),
    ),
);

:host {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    @each $element, $elements in $header-cell {
        @each $style-token, $value in $elements {
            #{mixins.generateCssVar('table-header-cell', #{$element}, #{$style-token})}: #{$value};
        }
    }

    &:hover {
        .header-cell-icons {
            visibility: visible;
        }
    }

    .header-cell-label {
        flex-grow: 1;
        display: flex;
        align-items: center;
        gap: var(--rt-table-header-cell-label-gap);

        &--align {
            &--left {
                justify-content: flex-start;
            }

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

            &--right {
                justify-content: flex-end;
            }
        }

        &__prefix {
            width: var(--rt-table-header-cell-prefix-icon-size);
            height: var(--rt-table-header-cell-prefix-icon-size);
            font-size: var(--rt-table-header-cell-prefix-icon-size);
        }

        &__text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &__suffix {
            width: var(--rt-table-header-cell-suffix-icon-size);
            height: var(--rt-table-header-cell-suffix-icon-size);
            font-size: var(--rt-table-header-cell-suffix-icon-size);
        }

        &__prefix,
        &__suffix {
            width: fit-content;
            min-width: fit-content;
        }
    }

    .header-cell-icons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: var(--rt-table-header-cell-icon-margin);

        visibility: hidden;

        &--active {
            visibility: visible;
        }

        &__icon {
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-bottom: 5.2px solid var(--rt-table-header-cell-icon-color);

            &--second {
                margin-top: 2px;
                transform: scaleY(-1);
            }

            &--active {
                border-bottom-color: var(--rt-table-header-cell-icon-active-color);
            }
        }
    }
}