@use "../../core/jkl";

@layer jokul.components {
    .jkl-table-header {
        --jkl-table-header-padding-inline: var(--jkl-unit-15);
        --jkl-table-header-padding-block: var(--jkl-unit-10);

        @include jkl.text-style("text-small") {
            font-weight: jkl.$typography-weight-bold;
        };

        padding-block: var(--jkl-table-header-padding-block);
        padding-inline: var(--jkl-table-header-padding-inline);
        text-align: left;
        white-space: nowrap;

        &--align-center {
            text-align: center;
        }

        &--align-right {
            text-align: right;
        }

        &--bold {
            font-weight: var(--jkl-typography-weight-bold);
        }

        &__arrows {
            display: flex;
            gap: var(--jkl-spacing-4);
            align-items: center;

            &[data-align="center"] {
                justify-content: center;
            }

            &[data-align="right"] {
                justify-content: end;
            }
        }

        @mixin _responsive-table-header {
            display: none;
        }

        .jkl-table--collapse-to-list & {
            @include jkl.small-device {
                @include _responsive-table-header;
            }
        }
    }
}