/* (c) Copyright Frontify Ltd., all rights reserved. */

@import '../../../utilities/sizeToken.module.scss';
@import '../../../utilities/focusStyle.module.scss';

.table {
    position: relative;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;

    $sticky-base: (
        position: sticky,
        z-index: 1,
        background-color: var(--base-color),
    );

    &[data-sticky='head'],
    &[data-sticky='both'] {
        thead {
            @each $prop, $value in $sticky-base {
                #{$prop}: $value;
            }
            top: 0;
            z-index: 2;
        }
    }

    &[data-sticky='col'],
    &[data-sticky='both'] {
        .headerCell:first-child,
        .rowCell:first-child {
            @each $prop, $value in $sticky-base {
                #{$prop}: $value;
            }
            left: 0;
            border-right: 1px solid var(--line-color);
        }
    }

    &[data-full-width='false'] {
        width: auto;
    }
    &[data-layout='fixed'] {
        table-layout: fixed;
    }
    &[data-layout='auto'] {
        table-layout: auto;
        [data-truncate='true'] {
            max-width: 0;
        }
    }
}

.caption {
    padding: sizeToken(3) sizeToken(2);
    text-align: left;
    color: var(--text-color);
}

.headerCell {
    font-size: var(--body-size-small);
    font-weight: 400;
    line-height: sizeToken(4);
    color: var(--text-color-weak);

    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);

    &:hover {
        color: var(--text-color-hover);
    }

    &[data-sortable='false'] {
        padding: sizeToken(3) sizeToken(2);
    }

    &[data-no-shrink='true'] {
        width: 1%;
        white-space: nowrap;
    }
}

.sortButton {
    display: inline-flex;
    width: 100%;
    text-align: inherit;
    align-items: center;
    gap: 0.25rem;
    padding: sizeToken(3) sizeToken(2);

    appearance: none;
    background: none;
    border: none;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;

    &[data-active='true'] {
        color: var(--text-color);
    }

    .buttonText {
        flex: 1;
    }

    &:focus-visible {
        @include focus-outline;
    }

    .sortIndicator {
        color: var(--text-color-disabled);
    }
}

.body {
    padding: 0 sizeToken(6);
}

.row {
    position: relative;
    transition: background-color 0.2s ease;

    &:focus-visible {
        @include focus-outline;
        z-index: 1;
    }

    &[data-selected='true'] {
        background-color: var(--box-selected-color);
    }

    &[data-disabled='true'] {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }

    &[data-interactive='true'] {
        cursor: pointer;

        &:not([data-disabled='true']) {
            &:not([data-selected='true']):hover {
                background-color: var(--base-color-alt);
            }
        }
    }
}

.rowCell {
    color: var(--text-color);

    font-weight: 400;
    font-size: var(--body-size-x-small);

    line-height: sizeToken(4);
    padding: sizeToken(2);

    border-bottom: 1px solid var(--line-color);
}

.headerCell,
.rowCell {

    &[data-align='left'] {
        text-align: left;

        .sortButton {
            justify-content: flex-start;
        }
    }

    &[data-align='center'] {
        text-align: center;

        .sortButton {
            justify-content: center;
        }
    }

    &[data-align='right'] {
        text-align: right;

        .sortButton {
            justify-content: flex-end;
        }
    }

    &[data-truncate='true'], &[data-truncate='true'] .buttonText {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
