/**
 *
 *
 *
 */

.table {
    width: 100%;
    border: 1px solid lighten($plain-ui__primary, 55%);
    background: var(--white);

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

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

    td {
        color: var(--text);
    }

    td,
    th {
        text-align: left;
        border-bottom: 1px solid lighten($plain-ui__primary, 55%);

        padding: 0.5em 1.25em;
        //@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
    }

    th {
        color: white;
        background-color: $plain-ui__primary;
    }

    tr:hover {
        background-color: lighten($plain-ui__primary, 10%);

        td {
            color: white;
        }
    }
}