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

$table: (
    header: (
        z-index: 2,
        font-size: 0.875rem,
        background-color: var(--mat-form-field-filled-container-color),
    ),
    header-row-last-child: (
        border-bottom: var(--rt-table-header-cell-wrapper-border-width) solid var(--clr-black-20),
    ),
    body: (
        font-size: 0.875rem,
        background-color: transparent,
    ),
    row: (
        height: 3rem,
        color: var(--clr-txt),
        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-black-20),
        background-color: transparent,
    ),
    row-hover: (
        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-blue-100),
        transition: 0.2s,
    ),
    row-active: (
        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-blue-100),
    ),
    header-cell-wrapper: (
        padding: 0.625rem,
        text-color: var(--clr-txt),
        font-size: 1rem,
        font-weight: 500,
        text-align: left,
        line-height: 1.2,
        border-right: var(--rt-table-header-cell-wrapper-border-width) solid var(--clr-black-40),
        background-color: var(--clr-white-100),
    ),
    header-filterable-cell-wrapper: (
        padding: 0.25rem 0.5rem,
    ),
    base-cell-wrapper: (
        padding: 0.625rem,
    ),
    base-cell-wrapper-last-child: (
        padding: 0.625rem 4rem 0.625rem 0.625rem,
    ),
    actions: (
        z-index: 1,
    ),
    actions-container: (
        background-color: var(--clr-white-100),
    ),
);

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

    // initial table container scrollbar styles
    --rt-table-container-content-scrollbar-vertical-width: 0;
    --rt-table-container-content-scrollbar-horizontal-height: 12px;

    --rt-table-row-border-bottom-width: 1px;
    --rt-table-header-cell-wrapper-border-width: 1px;
}

// TABLE
.c-table {
    width: 100%;

    border-collapse: collapse;

    overflow-x: scroll;
    overflow-y: scroll;

    thead {
        position: sticky;
        top: 0;
        z-index: var(--rt-table-header-z-index);
        font-size: var(--rt-table-header-font-size);

        tr {
            &:last-child {
                border-bottom: var(--rt-table-header-row-last-child-border-bottom);
            }

            th {
                background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--clr-white-100) 50%);

                &:not(.c-table__cell--filterable):not(.c-table__cell--empty) {
                    background-color: var(--rt-table-header-background-color);
                }

                &:hover {
                    &:not(.c-table__cell--selectable):not(.c-table__cell--filterable) {
                        background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--clr-white-100) 30%);
                    }
                }
            }
        }
    }

    tbody {
        font-size: var(--rt-table-body-font-size);
        background-color: var(--rt-table-body-background-color);
    }
}

// ROW
.c-table__row {
    height: var(--rt-table-row-height);
    color: var(--rt-table-row-color);
    border-bottom: var(--rt-table-row-border-bottom);
    background-color: var(--rt-table-row-background-color);

    transform: translate(0);

    &--active {
        border-bottom: var(--rt-table-row-active-border-bottom);
    }

    &--clickable {
        cursor: pointer;
    }

    &:hover {
        border-bottom: var(--rt-table-row-hover-border-bottom);
        transition: var(--rt-table-row-hover-transition);

        .c-table-actions {
            visibility: visible;
        }
    }
}

// CELL
th.c-table__cell {
    width: fit-content;
    height: 100%;

    position: relative;

    pointer-events: none;

    padding: var(--rt-table-header-cell-wrapper-padding);
    color: var(--rt-table-header-cell-wrapper-text-color);
    font-size: var(--rt-table-header-cell-wrapper-font-size);
    font-weight: var(--rt-table-header-cell-wrapper-font-weight);
    text-align: var(--rt-table-header-cell-wrapper-text-align);
    line-height: var(--rt-table-header-cell-wrapper-line-height);
    background-color: var(--rt-table-header-cell-wrapper-background-color);

    &--sortable,
    &--selectable,
    &--filterable {
        pointer-events: auto;
    }

    &--filterable {
        padding: var(--rt-table-header-filterable-cell-wrapper-padding);
    }

    &:not(:last-child):not(&--selectable):not(&--empty) {
        &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 25%;
            height: 50%;
            border-right: var(--rt-table-header-cell-wrapper-border-right);
            pointer-events: none;
        }
    }
}

td.c-table__cell {
    width: fit-content;
    height: 100%;

    padding: var(--rt-table-base-cell-wrapper-padding);
}

// ROW ACTIONS
.c-table-actions {
    width: 100%;
    height: var(--rt-table-row-height);

    position: absolute;
    right: 0;
    top: 0;
    z-index: var(--rt-table-actions-z-index);

    display: flex;
    justify-content: flex-end;
    align-items: center;

    pointer-events: none;

    &__container {
        position: sticky;

        right: 0;
        width: fit-content;
        height: calc(var(--rt-table-row-height) - var(--rt-table-row-border-bottom-width) - var(--rt-table-row-border-bottom-width));

        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.25rem;
        padding: 0 0.25rem 0 1.25rem;

        overflow: hidden;

        background: linear-gradient(
            to right,
            transparent 0%,
            color-mix(in srgb, var(--rt-table-actions-container-background-color) 30%, var(--rt-table-actions-container-background-color))
                10%,
            var(--rt-table-actions-container-background-color) 20%,
            var(--rt-table-actions-container-background-color) 100%
        );
        pointer-events: none;
    }

    &__action {
        position: sticky;
        pointer-events: auto;
    }

    @media (hover: hover) {
        &--hidden {
            visibility: hidden;
        }
    }
}