@import "effects";
@import "variables";

smart-table table {
    width: 100%;
    border-collapse: collapse;

    & > thead {
        border-bottom: 2px solid $color-spacer;

        & > * > th {
            font-weight: normal;
        }
    }
    & > tfoot {
        border-top: 2px solid $color-spacer;
    }
    thead, tbody, tfoot {
        & > * {
            & > th {
                color: $color-font-light;
            }
            & > th,
            & > td {
                overflow: hidden;
            }
            & > th,
            & > td {
                text-align: left;
                padding: 5px;
                white-space: nowrap;
                text-overflow: ellipsis;

                &[number] {
                    text-align: right;
                }
                &[centered] {
                    text-align: center;
                }
                &[shrink] {
                    width: 1px;
                    text-align: center;
                }
                &[shrink-date] {
                    width: 100px;
                    max-width: 100px;
                }
                &[shrink-datetime] {
                    width: 150px;
                    max-width: 150px;
                }
                &[expand] {
                    max-width: 400px;
                    min-width: 0;
                }
                &[actions] {
                    width: 1px;

                    & > * {
                        vertical-align: middle;
                    }
                }
                vn-icon.bright, i.bright {
                    color: #f7931e;
                }
            }
        }
    }
    tbody > * {
        border-bottom: 1px solid $color-spacer-light;

        &:last-child {
            border-bottom: none;
        }
        & > td {
            .chip {
                padding: 4px;
                border-radius: 4px;

                &.notice {
                    background-color: $color-notice-medium;
                    color: $color-font-bg;
                }
                &.success {
                    background-color: $color-success-medium;
                    color: $color-font-bg;
                }
                &.warning {
                    background-color: $color-main-medium;
                    color: $color-font-bg;
                }
                &.alert {
                    background-color: lighten($color-alert, 5%);
                    color: $color-font-bg;
                }
                &.message {
                    background-color: $color-bg-dark;
                    color: $color-font-dark;
                }
            }
        }
    }
    .vn-check {
        margin: 0;
    }
    .empty-rows > td {
        color: $color-font-secondary;
        font-size: 1.375rem;
        text-align: center;
    }
}