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

@layer jokul.components {
    .jkl-table-cell {
        --jkl-table-cell-padding: var(--jkl-unit-15);
        --jkl-table-expand-padding: var(--jkl-unit-20);

        padding: var(--jkl-table-cell-padding);
        position: relative;
        text-align: left;
        vertical-align: top;

        @include jkl.text-style("text-medium");

        &:has(.jkl-button) {
            --jkl-table-cell-padding: var(--jkl-unit-05);

            .jkl-button {
                padding-block: var(--jkl-unit-10);

                .jkl-button__text {
                    overflow: visible;
                }
            }
        }

        &--vertical-align-center {
            vertical-align: baseline;
        }

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

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

        .jkl-table--collapse-to-list &--align-right {
            @include jkl.small-device {
                text-align: unset;
            }
        }

        .jkl-table--collapse-to-list[data-collapse] &--align-right {
            text-align: unset;
        }

        @mixin _responsive-table-header {
            content: attr(data-th);
            display: block;

            @include jkl.text-style("heading-5");
        }

        // only show inline text if it's not an ExpandController with text inside. if it doesn't
        // have text inside. the text is moved inside the ExpandButton
        .jkl-table--collapse-to-list
            &[data-th]:not(.jkl-table-cell--expand-without-text)::before {
            display: none;

            @include jkl.small-device {
                @include _responsive-table-header;
            }
        }

        .jkl-table--collapse-to-list[data-collapse]
            &:not(.jkl-table-cell--expand-without-text)::before {
            @include _responsive-table-header;
        }

        .jkl-table--collapse-to-list:not([data-collapse])
            &--expand-without-text
            .jkl-expand-button__text {
            @include jkl.from-medium-device {
                display: none;
            }
        }

        .jkl-table-row-expand-button {
            display: flex;
            align-items: center;
            width: fit-content;
            margin-left: auto;
            margin-block: calc(var(--jkl-table-cell-padding) * -1);
            padding: var(--jkl-table-expand-padding);
        }
    }

    .jkl-table-row--expandable.jkl-table-row--clickable:not(
            .jkl-expandable-table-row--clickable-external
        ) {
        &:hover,
        html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus {
            .jkl-table-row-expand-button {
                color: var(--expand-button-focus-color);
            }
        }
    }
}