@use 'admiral/assets/scss-variables' as *;
@use 'admiral/assets/mixins' as *;

$table-class: 'admiral-table';

.wrapper {
    max-width: 100%;
    color: var(--color-typo-primary);

    --table-padding-vertical: 16px;
    --table-padding-horizontal: 16px;

    &__SizeMiddle {
        --table-padding-vertical: 12px;
        --table-padding-horizontal: 8px;
    }

    &__SizeSmall {
        --table-padding-vertical: 8px;
        --table-padding-horizontal: 8px;
    }

    &__Bordered {
        --table-border: 1px solid var(--color-bg-border);
    }

    &__WithTitle {
        --table-top-left-radius: 0px;
        --table-top-right-radius: 0px;
    }

    &__WithFooter {
        --table-bottom-left-radius: 0px;
        --table-bottom-right-radius: 0px;
    }

    &__DndOverlay {
        --table-top-left-radius: 0px;
        --table-top-right-radius: 0px;
        --table-bottom-left-radius: 0px;
        --table-bottom-right-radius: 0px;

        * {
            scrollbar-width: none !important;

            &::-webkit-scrollbar {
                display: none !important;
            }
        }
    }

    :global {
        .#{$table-class} {
            position: relative;
            background: var(--color-bg-default);
            border-radius: var(--radius-m);
            font-size: var(--size-text-m);
            border: var(--table-border, 1px solid var(--color-bg-border));

            table {
                width: 100%;
                text-align: left;
                border-radius: var(--radius-m) var(--radius-m) 0 0;
                border-collapse: separate;
                border-spacing: 0;
            }

            // ============================= Cell =============================
            &-thead > tr > th,
            &-tbody > tr > td,
            tfoot > tr > th,
            tfoot > tr > td {
                position: relative;
                padding: var(--table-padding-vertical) var(--table-padding-horizontal);
                vertical-align: middle;
                overflow-wrap: break-word;
            }

            &-cell-ellipsis {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-break: keep-all;

                &.#{$table-class}-cell-fix-right-first,
                &.#{$table-class}-cell-fix-left-last {
                    overflow: visible;

                    .#{$table-class}-cell-content {
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .#{$table-class}-column-title {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: keep-all;
                }
            }

            // ============================ Title =============================
            &-title {
                padding: var(--table-padding-vertical) var(--table-padding-horizontal);
                border-bottom: 1px solid var(--color-bg-border);
            }

            // ============================ Footer ============================
            &-footer {
                padding: var(--table-padding-vertical) var(--table-padding-horizontal);
                border-top: 1px solid var(--color-bg-border);
            }

            // ============================ Header ============================
            &-header {
                border-top-left-radius: var(--table-top-left-radius, var(--radius-m));
                border-top-right-radius: var(--table-top-right-radius, var(--radius-m));
            }

            &-thead {
                > tr {
                    > th {
                        position: relative;
                        font-weight: var(--font-weight-text-bold);
                        text-align: left;
                        border-bottom: 1px solid var(--color-bg-border);
                        transition: background 0.2s ease;

                        &:not(:last-child) {
                            border-right: var(--table-border, none);
                        }

                        &[colspan]:not([colspan='1']) {
                            text-align: center;
                        }
                    }
                }

                > tr:not(:last-child) > th {
                    &[colspan] {
                        border-bottom: 0;
                    }
                }
            }

            // ============================= Body =============================
            &-body {
                border-bottom-left-radius: var(--table-bottom-left-radius, var(--radius-m));
                border-bottom-right-radius: var(--table-bottom-right-radius, var(--radius-m));
            }

            &-tbody {
                > tr {
                    transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
                        scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
                    transform-origin: 0 0;

                    &:not(:last-child) {
                        & > td {
                            border-bottom: 1px solid var(--color-bg-border);
                            transition: background 0.3s;
                        }
                    }

                    & > td {
                        &:not(:last-child) {
                            border-right: var(--table-border, none);
                        }
                    }

                    &.#{$table-class}-row:hover {
                        > td {
                            background: var(--color-bg-stripe);
                        }
                    }

                    &.#{$table-class}-row-selected {
                        > td {
                            background: var(--color-bg-stripe);
                            border-color: rgba(0, 0, 0, 0.03);
                        }

                        &:hover {
                            > td {
                                background: var(--color-bg-stripe);
                            }
                        }
                    }
                }
            }

            &-expanded-row-fixed {
                position: static !important;
                width: 100% !important;
            }

            // ============================ Sorter ============================
            &-thead th.column-has-sorters {
                cursor: pointer;
                transition: all 0.3s;

                &:hover {
                    background: var(--color-bg-stripe-active);

                    &::before {
                        background-color: transparent !important;
                    }
                }
            }

            &-thead th.column-sort {
                background: var(--color-bg-stripe);

                &::before {
                    background-color: transparent !important;
                }
            }

            td.column-sort {
                background: var(--color-bg-stripe);
            }

            .column-title {
                position: relative;
                z-index: 1;
                flex: 1;
            }

            .column-sorters {
                display: grid;
                grid-template-columns: minmax(0, 1fr) max-content;
                grid-gap: var(--table-padding-horizontal);
                align-items: center;

                &::after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    content: '';
                }

                &:hover .column-sorter {
                    &-up,
                    &-down {
                        &:not(.active) {
                            opacity: 0.4;
                        }
                    }
                }
            }

            .column-sorter {
                &-inner {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                &-up,
                &-down {
                    display: block;
                    width: 0;
                    height: 0;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    opacity: 0.3;
                    transition: opacity 0.2s, color 0.16s;

                    &.active {
                        color: var(--color-control-bg-primary);
                        opacity: 1;
                    }
                }

                &-up {
                    border-bottom: 4px solid currentColor;
                }

                &-down {
                    border-top: 4px solid currentColor;

                    &:not(:only-child) {
                        margin-top: 3px;
                    }
                }
            }

            &-selection-col {
                width: calc(var(--table-padding-horizontal) * 2 + 16px);
            }

            &-selection-column {
                width: calc(var(--table-padding-horizontal) * 2 + 16px);
            }

            // ============================ Fixed =============================
            &-cell-fix-left,
            &-cell-fix-right {
                position: sticky !important;
                z-index: var(--z-index-table-fixed);
                background: var(--color-bg-default);
            }

            &-cell-fix-left-first::after,
            &-cell-fix-left-last::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: -1px;
                width: 30px;
                transform: translateX(100%);
                transition: box-shadow 0.3s;
                content: '';
                pointer-events: none;
            }

            &-cell-fix-right-first::after,
            &-cell-fix-right-last::after {
                position: absolute;
                top: 0;
                bottom: -1px;
                left: 0;
                width: 30px;
                transform: translateX(-100%);
                transition: box-shadow 0.3s;
                content: '';
                pointer-events: none;
            }

            .#{$table-class}-container {
                display: grid;

                &::before,
                &::after {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    z-index: 1;
                    width: 30px;
                    transition: box-shadow 0.2s;
                    content: '';
                    pointer-events: none;
                }

                &::before {
                    left: 0;
                }
                &::after {
                    right: 0;
                }
            }

            &-ping-left {
                &:not(.#{$table-class}-has-fix-left) .#{$table-class}-container {
                    position: relative;

                    &::before {
                        border-top-left-radius: var(--table-top-left-radius, var(--radius-m));
                        border-bottom-left-radius: var(--table-bottom-left-radius, var(--radius-m));
                        box-shadow: inset 10px 0 8px -8px rgba(var(--color-nums-shadow), 0.14);
                    }
                }

                .#{$table-class}-cell-fix-left-first::after,
                .#{$table-class}-cell-fix-left-last::after {
                    box-shadow: inset 10px 0 8px -8px rgba(var(--color-nums-shadow), 0.14);
                }

                .#{$table-class}-cell-fix-left-last::before {
                    background-color: transparent !important;
                }
            }

            &-ping-right {
                &:not(.#{$table-class}-has-fix-right) .#{$table-class}-container {
                    position: relative;

                    &::after {
                        border-top-right-radius: var(--table-top-right-radius, var(--radius-m));
                        border-bottom-right-radius: var(
                            --table-bottom-right-radius,
                            var(--radius-m)
                        );
                        box-shadow: inset -10px 0 8px -8px rgba(var(--color-nums-shadow), 0.14);
                    }
                }

                .#{$table-class}-cell-fix-right-first::after,
                .#{$table-class}-cell-fix-right-last::after {
                    box-shadow: inset -10px 0 8px -8px rgba(var(--color-nums-shadow), 0.14);
                }
            }

            &-sticky {
                &-holder {
                    position: sticky;
                    z-index: var(--z-index-table-sticky);
                    background: var(--color-bg-default);
                }

                &-scroll {
                    position: sticky;
                    bottom: 0;
                    z-index: var(--z-index-table-sticky);
                    display: flex;
                    align-items: center;
                    background: var(--color-scroll-bg);
                    border-top: 1px solid var(--color-bg-border);
                    opacity: 1;

                    &:hover {
                        transform-origin: center bottom;
                    }

                    &-bar {
                        height: 8px;
                        background-color: var(--color-scroll-thumb);
                        border-radius: 8px;

                        &:hover {
                            background-color: var(--color-scroll-thumb-hover);
                        }

                        &-active {
                            background-color: var(--color-scroll-thumb-hover);
                        }
                    }
                }
            }
        }
    }
}

.pagination {
    display: flex;
    width: 100%;
    padding-top: var(--table-pagination-pt, var(--space-xl));
    padding-bottom: var(--table-pagination-pb, var(--space-xl));
    --pagination-horizontal-align: flex-end;

    &__SizeSmall {
        padding-top: var(--table-pagination-pt, var(--space-l));
        padding-bottom: var(--table-pagination-pb, var(--space-l));
    }

    &__PosLeft {
        --pagination-horizontal-align: flex-start;
    }

    &__PosCenter {
        --pagination-horizontal-align: center;
    }
}

.empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);

    svg {
        margin-bottom: var(--space-2xs);
    }
}

.limitedWidth {
    max-width: 250px;
}
