/* @docs */
$table-background-color: #fff !default;
$table-background: #f5f5f5 !default;
$table-boder: 1px solid transparent !default;
$table-border-radius: $base-border-radius !default;
$table-card-box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
$table-card-cell-font-weight: 600 !default;
$table-card-cell-padding: 0 0.5em 0 0 !default;
$table-card-cell-text-align: left !default;
$table-card-detail-margin: -1rem 0 0 0;
$table-card-margin: 0 0 1rem 0;
$table-color: black !default;
$table-current-sort-border-color: $grey !default;
$table-current-sort-font-weight: 700 !default;
$table-current-sort-hover-border-color: $grey !default;
$table-detail-background: #fafafa !default;
$table-detail-box-shadow: inset 0 1px 3px $grey !default;
$table-detail-chevron-color: $primary !default;
$table-detail-chevron-width: 40px !default;
$table-detail-padding: 1rem !default;
$table-focus-border-color: $primary !default;
$table-focus-box-shadow: 0 0 0 0.125em rgba($primary, 0.25) !default;
$table-hoverable-background-color: #fafafa !default;
$table-narrow-padding: .25em .5em !default;
$table-row-active-background-color: $primary !default;
$table-row-active-color: $primary-invert !default;
$table-sticky-header-height: 300px !default;
$table-sticky-zindex: 1 !default;
$table-striped-background-color: #fafafa !default;
$table-td-border: 1px solid $grey-lighter !default;
$table-td-padding: .5em .75em !default;
$table-th-border: 2px solid $grey-lighter !default;
$table-th-checkbox-width: 40px !default;
$table-th-color: #363636 !default;
$table-th-detail-width: 14px !default;
$table-th-font-weight: 600 !default;
$table-th-padding: 0.5em 0.75em !default;
/* @docs */

.o-table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    @include avariable('border', 'table-boder', $table-boder);
    @include avariable('border-radius', 'table-border-radius', $table-border-radius);
    @include avariable('background-color', 'table-background-color', $table-background-color);
    @include avariable('color', 'table-color', $table-color);
    &__root {
        position: relative;
    }
    &__wrapper {
        transition: opacity $speed $easing;
        position: relative;
        &--sticky-header {
            @include avariable('height', 'table-sticky-header-height', $table-sticky-header-height);
            overflow-y: auto;
            th {
                position: -webkit-sticky;
                position: sticky;
                left: 0;
                top: 0;
                @include avariable('background', 'table-background-color', $table-background-color);
            }
        }
        &--scrollable {
            -webkit-overflow-scrolling: touch;
            overflow-x: auto;
            max-width: 100%;
        }
        &--mobile {
            overflow-x: auto;
            .o-table__mobile-sort {
                display: block;
            }
            // cards
            .o-table {
                background-color: transparent;
            }
            thead {
                tr {
                    box-shadow: none;
                    border-width: 0;
                    th {
                        display: none;
                    }
                    .o-table-th-checkbox {
                        display: block;
                        width: 100%;
                        text-align: right;
                        border: 0;
                    }
                }
            }
            tfoot {
                th {
                    border: 0;
                    display: inherit;
                }
            }
            tr {
                @include avariable('box-shadow', 'table-card-box-shadow', $table-card-box-shadow);
                max-width: 100%;
                position: relative;
                display: block;
                td {
                    border: 0;
                    display: inherit;
                    &:last-child {
                        border-bottom: 0;
                    }
                }
                &:not(:last-child) {
                    @include avariable('margin', 'table-card-margin', $table-card-margin);
                }
                &:not(.o-table__tr--selected) {
                    background: inherit;
                    background: $table-background-color;
                    &:hover {
                        background-color: inherit;
                        background-color: $table-background-color;
                    }
                }
                &.o-table--detailed {
                    @include avariable('margin', 'table-card-detail-margin', $table-card-detail-margin);
                }
            }
            tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) {
                td {
                    display: flex;
                    width: auto;
                    justify-content: space-between;
                    text-align: right;
                    @include avariable('border-bottom', 'table-background', ($table-background 1px solid));
                    &:before {
                        content: attr(data-label);
                        @include avariable('font-weight', 'table-card-cell-font-weight', $table-card-cell-font-weight);
                        @include avariable('padding-right', 'table-card-cell-padding', $table-card-cell-padding);
                        @include avariable('text-align', 'table-card-cell-text-align', $table-card-cell-text-align);
                    }
                }
            }
        }
    }
    &__mobile-sort {
        display: none;
    }
    &__th {
        vertical-align: top;
        text-align: left;
        position: relative;
        @include avariable('font-weight', 'table-th-font-weight', $table-th-font-weight);
        @include avariable('color', 'table-th-color', $table-th-color);
        @include avariable('border-bottom', 'table-th-border', $table-th-border);
        @include avariable('padding', 'table-th-padding', $table-th-padding);
        &--centered {
            text-align: center;
        }
        &--right {
            text-align: right;
        }
        &__sort-icon {
            position: absolute;
            right: 0;
        }
        &-checkbox {
            @include avariable('width', 'table-th-checkbox-width', $table-th-checkbox-width);
        }
        &-current-sort {
            @include avariable('border-color', 'table-current-sort-border-color', $table-current-sort-border-color);
            @include avariable('font-weight', 'table-current-sort-font-weight', $table-current-sort-font-weight);
        }
        &--sortable {
            cursor: pointer;
            &:hover {
                @include avariable('border-color', 'table-current-sort-hover-border-color', $table-current-sort-hover-border-color);
            }
        }
        &--sticky {
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            top: 0;
            @include evariable(
                'z-index', $SUM_EXPRESSION,
                eparam('$param', variable('table-sticky-zindex', $table-sticky-zindex)),
                eparam('$factor', 2)
            );
            @include avariable('background', 'table-background-color', $table-background-color);
        }
        &--unselectable {
            @include unselectable;
        }
        &--detailed {
            @include avariable('width', 'table-th-detail-width', $table-th-detail-width);
        }
    }

    &__td {
        vertical-align: top;
        text-align: left;
        @include avariable('border-bottom', 'table-td-border', $table-td-border);
        @include avariable('padding', 'table-td-padding', $table-td-padding);
        &--sticky {
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            @include avariable('z-index', 'table-sticky-zindex', $table-sticky-zindex);
            @include avariable('background', 'table-background-color', $table-background-color);
        }
        &--right {
            text-align: right;
        }
        &--centered {
            text-align: center;
        }
        &-chevron {
            vertical-align: middle;
            @include avariable('width', 'table-detail-chevron-width', $table-detail-chevron-width);
            @include avariable('color', 'table-detail-chevron-color', $table-detail-chevron-color);
        }
    }

    &:focus {
        @include avariable('border-color', 'table-focus-border-color', $table-focus-border-color);
        @include avariable('box-shadow', 'table-focus-box-shadow', $table-focus-box-shadow);
    }

    &--bordered {
        tr:last-child {
            td, th {
                @include avariable('border', 'table-td-border', $table-td-border);
            }
        }
        td, th {
            @include avariable('border', 'table-td-border', $table-td-border);
        }
    }

    &--striped {
        tbody tr:not(.o-table__tr--selected):nth-child(2n) {
            @include avariable('background-color', 'table-striped-background-color', $table-striped-background-color);
        }
    }

    &--narrowed {
        td, th {
            @include avariable('padding', 'table-narrow-padding', $table-narrow-padding);
        }
    }

    &--hoverable {
        tbody tr:not(.o-table__tr--selected):hover {
            @include avariable('background-color', 'table-hoverable-background-color', $table-hoverable-background-color);
        }
    }

    &__detail {
        @include avariable('box-shadow', 'table-detail-box-shadow', $table-detail-box-shadow);
        @include avariable('background', 'table-detail-background', $table-detail-background);
        td {
            @include avariable('padding', 'table-detail-padding', $table-detail-padding);
        }
    }

    &__tr--selected {
        background-color: $table-row-active-background-color;
        color: $table-row-active-color;
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            $color-invert: nth($pair, 2);
            &-#{$name} {
                background-color: $color;
                color: $color-invert;
            }
        }
    }

    &__pagination {
        align-items: center;
        justify-content: space-between;
        display: flex;
        // left
        > div:first-child {
            align-items: center;
            justify-content: flex-start;
        }
        // right
        > div:last-child {
            align-items: center;
            justify-content: flex-end;
            > div {
                align-items: center;
                display: flex;
                flex-basis: auto;
                flex-grow: 0;
                flex-shrink: 0;
                justify-content: center;
            }
        }
        // left - right
        > div {
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 0;
        }
    }
}