@use '../../styles/mixins.scss';

.ydb-paginated-table {
    $block: &;
    $cell-border: 1px solid var(--paginated-table-border-color);
    --paginated-table-cell-vertical-padding: 5px;
    --paginated-table-cell-horizontal-padding: 10px;
    --paginated-table-cell-vertical-align: middle;

    --paginated-table-border-color: var(--g-color-base-generic-hover);
    --paginated-table-hover-color: var(--g-color-base-simple-hover-solid);

    width: 100%;
    @include mixins.body-2-typography();

    &__table {
        width: max-content;
        max-width: 100%;

        table-layout: fixed;
        border-spacing: 0;
        border-collapse: separate;

        th {
            padding: 0;
        }
    }

    &__row {
        position: relative;
        z-index: 1;

        // Performance optimization for row hovering.
        // it actually works.
        transform: translateZ(0);

        &:hover {
            background: var(--paginated-table-hover-color);
        }

        &_clickable {
            cursor: pointer;
        }

        // Elevate row z-index when a Stack inside it is hovered,
        // so expanded donors appear above the next row
        &:has(.ydb-stack:hover),
        &:has(.ydb-stack:focus-within),
        &:has(.ydb-stack_expanded) {
            z-index: 2;
        }

        &_empty {
            &:hover {
                background-color: initial;
            }
        }
    }

    .ydb-keyboard-focused-row {
        background: var(--paginated-table-hover-color);
    }

    &.ydb-keyboard-focus-active {
        #{$block}__row:hover:not(.ydb-keyboard-focused-row) {
            background: transparent !important;
        }
    }

    &__head {
        z-index: 2;
        @include mixins.sticky-top();
    }

    &__sort-icon-container {
        display: flex;
        justify-content: center;

        color: inherit;

        &_shadow {
            opacity: 0.15;
        }
    }

    &__sort-icon {
        &_desc {
            transform: rotate(180deg);
        }
    }

    &__head-cell-wrapper {
        position: relative;

        display: table-cell;
        overflow-x: hidden;

        border-bottom: $cell-border;
    }

    &__head-cell {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--g-spacing-2);

        width: 100%;
        max-width: 100%;
        padding: var(--paginated-table-cell-vertical-padding)
            var(--paginated-table-cell-horizontal-padding);

        font-weight: bold;
        cursor: default;
        &_align {
            &_left {
                justify-content: left;

                text-align: left;
            }
            &_center {
                justify-content: center;

                text-align: center;
            }
            &_right {
                justify-content: right;

                text-align: right;

                #{$block}__head-cell-content-container {
                    flex-direction: row-reverse;
                }
            }
        }
    }

    &__head-cell_sortable {
        cursor: pointer;

        &#{$block}__head-cell_align_right {
            flex-direction: row-reverse;
        }
    }

    &__head-cell-note {
        display: flex;
    }

    // Separate head cell content class for correct text ellipsis overflow
    &__head-cell-content {
        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &__head-cell-content-container {
        display: inline-flex;
        overflow: hidden;
        align-items: center;
        gap: var(--g-spacing-1);

        .g-help-mark__button {
            display: inline-flex;
            align-items: center;
        }
    }

    &__row-cell {
        display: table-cell;
        overflow-x: hidden;

        width: 100%;
        max-width: 100%;
        padding: var(--paginated-table-cell-vertical-padding)
            var(--paginated-table-cell-horizontal-padding);

        vertical-align: var(--paginated-table-cell-vertical-align);
        white-space: nowrap;
        text-overflow: ellipsis;

        border-bottom: $cell-border;

        &_align {
            &_left {
                text-align: left;
            }
            &_center {
                text-align: center;
            }
            &_right {
                text-align: right;
            }
        }
    }

    &__resize-handler {
        position: absolute;
        top: 0;
        right: 0;

        visibility: hidden;

        width: 6px;
        height: 100%;

        cursor: col-resize;

        background-color: var(--g-color-base-generic);

        &_resizing {
            visibility: visible;
        }
    }
    &__head-cell-wrapper:hover > &__resize-handler {
        visibility: visible;
    }

    &__resizeable-table-container {
        width: max-content;

        // padding for easier resize of the last column
        padding-right: var(--g-spacing-5);
    }

    &__row-skeleton::after {
        display: none !important;
    }

    tbody > tr:last-child {
        td {
            border-bottom: unset;
        }
    }
}