@use "sass:map";
@import "../../../styles/mixins";
@import "table--variables";

$class: ".gov-table";

#{$class} {
    width: 100%;
    overflow-x: auto;

    table {
        table-layout: fixed;
        min-width: 100%;
        border-collapse: collapse;
    }
    table tr {
        &.gov-table--highlight td {
            background-color: var(--background-primary-subtle);
        }
    }
    table th, table td {
        border-bottom: 1px solid var(--border-subtlest);
        text-align: left;

        // MODIFIERS
        &#{$class} {
            &--align-right {
                text-align: right;
            }
            &--vertical-align-top {
                vertical-align: top;
            }
            &--border-right {
                border-right: 1px solid var(--border-subtlest);
            }
            &--border-left {
                border-left: 1px solid var(--border-subtlest);
            }
            &--border-bottom-none {
                border-bottom: none;
            }
            &--nowrap {
                white-space: nowrap;
            }
            &--fit-width {
                width: 1px;
            }
        }
    }
    table th {
        color: var(--text-primary);
        background-color: var(--background-neutral-subtlest);
    }
    table td {
        background-color: var(--background-neutral-white);
    }
    table tr.open td {
        padding: var(--spacing-s) var(--spacing-m);
    }

    summary::-webkit-details-marker {
        display: none;
    }

    // SIZES
    @each $size, $definitions in $table-sizes {
        &[data-size="#{$size}"] {
            table {
                border-bottom-left-radius: map.get($definitions, "border-radius");
                border-bottom-right-radius: map.get($definitions, "border-radius");
            }
            table th, table td {
                height: map.get($definitions, "height");
                padding: 0 map.get($definitions, "padding");
                @include typography(map.get($definitions, "font"));
            }
            table th {
                font-weight: 700;
            }
        }
    }
}