/**
 *
 *  table
 *  
 *
 *
 */

$table__padding-breakpoints: (
    $grid__md: 0.5em 1.25em
) !default;

$table__striped-background-color: lighten($color__primary, 65%) !default;
$table__hover-background-color: lighten($color__primary, 10%) !default;

.table {
    width: 100%;
    border: $border;
    background: var(--white);

    &--scroll {
        overflow-x: auto;
    }

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

    &__td,
    &__th {
        text-align: left;
        border-bottom: $border;

        padding: 0.25em 0.75em;
        @include media-breakpoints('padding', $table__padding-breakpoints);
    }

    &__th {
        color: white;
        background-color: var(--background);
    }

    // other background-color for even td inside tr
    &--striped {
        .table__tr {
            &:nth-child(even) {
                .table__td {
                    background-color: $table__striped-background-color;
                }
            }
        }
    }

    // if hover tr change background color for all tr inside
    &--hover {
        .table__tr:hover {
            .table__td {
                color: white;
                background-color: $table__hover-background-color;
            }
        }
    }
}