/* ============================================================================
   06-COMPONENTS -> #TABLE
   ========================================================================= */

/**
 * Displays a large amounts of data in rows and columns.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Table
 */

.table {
    --table-border-color: var(--border-color-secondary);
    --table-border-width: var(--border-width);
    --table-cell-padding-x: var(--card-padding-x);
    --table-cell-padding-y: var(--card-padding-y);
    --table-color: var(--text-color-tertiary);
    --table-row-bg-even: var(--bg-secondary);
    --table-row-bg-odd: var(--bg-primary);
    --table-row-hover-bg: var(--bg-highlight);

    @include font-size('sm');
    color: var(--table-color);
    text-align: left;
    width: 100%; 
}


/**
 * Table head
 */

.table__head {
    background-color: var(--table-row-bg-even);
    border-bottom: var(--table-border-width) solid var(--table-border-color);
}


/**
 * Table heading
 */

.table__heading {
    font-weight: var(--font-weight-medium);
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
}


/**
 * Table heading sort
 */

.table__heading-sort {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: var(--space-1);
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    text-align: left;
    width: 100%;

    & > .icon {
        @include transition(('opacity', 'transform'), $transition-duration-sm);
        display: inline-block;
        opacity: 0;
    }

    &:hover {
        .icon {
            opacity: 1;
        }
    }
}


/**
 * Table body
 */

.table__body {
    & > .table__row {
        &:nth-child(odd) {
            background-color: var(--table-row-bg-odd);
        }
        
        &:nth-child(even) {
            background-color: var(--table-row-bg-even);
        }
    }

    &:hover {
        & > .table__row {
            background-color: var(--table-row-bg-even);

            &:hover {
                background-color: var(--table-row-hover-bg) !important;
            }
        }
    }
}


/**
 * Table row
 */

.table__row {
    @include transition(('background-color'));

    & + & {
        border-top: var(--table-border-width) solid var(--table-border-color);
    }
}


/**
 * Table cell
 */

.table__cell {
    font-weight: var(--font-weight-light);
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
}
.table__cell[data-theme=primary] {
    background-color: var(--button-primary-muted-disabled-color);
    color: var(--button-primary-bg);
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Indented table cell
 */

.table__cell[data-indented=true] {
    padding-left: var(--space-12);
}


/**
 * Modifier: Sortable table heading
 */

.table__heading[data-sort=true] {
    padding: 0;
}


/**
 * Modifier: Sorted table heading sort
 */

 .table__heading-sort[data-sorted=true] {
    & > .icon {
        opacity: 1;
    }
}


/**
 * Modifier: Descending order table heading sort
 */

.table__heading-sort[data-sort-order=desc] {
    &[data-sorted=false] {
        & > .icon {
            transform: rotate(180deg) scaleX(-1);
        }

        &:hover {
            & > .icon {
                animation: sorter-arrow-desc var(--duration-md) ease-in-out forwards;
            }
        }
    }

    &[data-sorted=true] {
        &:hover {
            & > .icon {
                animation: sorter-arrow-desc var(--duration-md) ease-in-out forwards;
            }
        }
    }
}


/**
 * Modifier: Ascending order table heading sort
 */

.table__heading-sort[data-sort-order=asc] {
    &[data-sorted=false] {
        &:hover {
            & > .icon {
                animation: sorter-arrow-asc var(--duration-md) ease-in-out forwards;
            }
        }
    }

    &[data-sorted=true] {
        & > .icon {
            transform: rotate(180deg) scaleX(-1);
        }

        &:hover {
            & > .icon {
                animation: sorter-arrow-asc var(--duration-md) ease-in-out forwards;
            }
        }
    }
}

@keyframes sorter-arrow-desc {
    0% { opacity: 0; transform: rotate(180deg) scaleX(-1); }
    100% { opacity: 1; transform: rotate(180deg) scaleX(-1); }
}

@keyframes sorter-arrow-asc {
    0% { opacity: 0; transform: rotate(0deg) scaleX(1); }
    100% { opacity: 1; transform: rotate(0deg) scaleX(1); }
}