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

$class: ".gov-table-complex";

#{$class} {
    &__wrapper {
        overflow: hidden;
        border: 1px solid var(--border-subtle);
    }
    &__name,
    &__description {
        margin: 0;
        color: var(--text-primary);
    }
    &__actions {
        color: var(--text-white-fixed);
        background-color: var(--background-primary);
        padding: var(--spacing-xs) var(--spacing-s);
    }
    &__per-page {
        width: 185px;
        white-space: nowrap;
    }

    // SIZES
    @each $size, $definitions in $table-sizes {
        &[data-size="#{$size}"] {
            gap: map.get($definitions, "gap");
            #{$class} {
                &__wrapper {
                    gap: map.get($definitions, "gap");
                    border-radius: map.get($definitions, "border-radius");
                }
                &__heading,
                &__panel {
                    margin-top: map.get($definitions, "gap");
                    padding: 0 map.get($definitions, "gap");
                }
                &__actions {
                    margin-top: map.get($definitions, "gap");
                    margin-bottom: calc(map.get($definitions, "gap") * -1);
                }
                &__name {
                    @include typography(map.get($definitions, "name"));
                }
                &__description {
                    @include typography(map.get($definitions, "description"));
                }
                &__records,
                &__actions {
                    @include typography(map.get($definitions, "records"));
                }
                &__pagination {
                    gap: map.get($definitions, "pagination-gap");
                    margin: map.get($definitions, "pagination-margin") 0;
                }
                &__per-page {
                    gap: map.get($definitions, "gap");
                    label {
                        @include typography(map.get($definitions, "description"));
                    }
                }
            }
        }
    }

    @include mq($from: md) {
        &__pagination {
            flex-direction: row !important;
            align-items: center !important;
        }
    }
}