/**
 *
 *
 *
 */

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

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

    &--striped {
        tr {
            &:nth-child(even) {
                background-color: lighten($color__primary, 75%);
            }
        }
    }

    &--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);
    }

    &--hover {
        .table__tr:hover {
            background-color: lighten($color__primary, 10%);

            .table__td {
                color: white;
            }
        }
    }
}