@use "../termeh" as T;

.table-container {
    display: block;
    overflow-y: visible;
    overflow-x: auto;
    @include T.overflow-touch();
    @include T.scrollable(T.color("primary"));
}

table {
    table-layout: auto;
    margin: 0;
    padding: 0;
    font: inherit;

    tr {
        background: T.color("table");
        @include T.transition(all);

        &.is-even {
            background: T.variant(
                "table",
                "even",
                T.variant("base", "section")
            );
        }

        &:not(.is-expanded) .extra {
            display: none;
        }
    }

    th,
    td {
        width: 1px;
        vertical-align: middle;
        font-weight: normal;
        padding: T.control-padding();
        color: T.variant("table", "color");
        @include T.transition(all);

        &.is-center-aligned {
            text-align: center;
        }

        &.is-right-aligned {
            text-align: right;
        }

        &.is-left-aligned {
            text-align: left;
        }

        &.is-filler {
            width: auto;
        }

        &:not(.is-multiline) {
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        &.is-sorted {
            background-color: T.variant(
                "table",
                "sort",
                rgba(T.variant("shade", "mute"), 0.1)
            );
        }
    }

    thead {
        padding: 0;
        margin: 0;
        border-bottom: 1px solid T.variant("table", "divider", T.color("shade"));

        tr {
            border-top: 1px solid
                T.variant("table", "separator", T.variant("base", "separator"));

            th {
                font-weight: T.var("strong", "weight", bold);

                &.is-sortable {
                    cursor: pointer;
                }

                &.is-sorted {
                    color: T.variant("shade", "readable");
                }

                &.is-asc {
                    border-top: 1px solid T.color("shade");
                }

                &.is-desc {
                    border-bottom: 1px solid T.color("shade");
                }
            }
        }
    }

    tbody {
        tr {
            &:not(:last-child) {
                border-bottom: 1px solid
                    T.variant(
                        "table",
                        "separator",
                        T.variant("base", "separator")
                    );
            }

            &:last-child {
                border-bottom: 1px solid
                    T.variant("table", "divider", T.color("shade"));
            }
        }
    }

    &.is-fullwidth {
        width: 100%;
    }

    &.is-stripped > tbody > tr:nth-child(even) {
        background: T.variant("table", "even", T.variant("base", "section"));
    }

    &.is-hoverable > tbody > tr:hover {
        background: T.variant(
            "table",
            "hover",
            rgba(T.variant("shade", "mute"), 0.25)
        );
    }

    $include: T.var("table", "colors", ());
    @each $name, $color in T.colors($include) {
        &.is-#{$name} {
            thead tr th {
                &.is-sorted {
                    color: T.variant($name, "readable");
                }

                &.is-asc {
                    border-top-color: $color;
                }

                &.is-desc {
                    border-bottom-color: $color;
                }
            }

            @include T.selection($name);
        }
    }
}