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

@layer jokul.components {
    .jkl-modal-header {
        --jkl-modal-header-margin: 0 0 var(--jkl-unit-20);

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: var(--jkl-modal-header-margin);
    }

    .jkl-modal-body {
        @include jkl.text-style("paragraph-medium");
    }

    .jkl-modal-title {
        @include jkl.text-style("heading-3");
    }

    .jkl-modal-actions {
        margin-block-start: var(--jkl-unit-50);
        display: flex;
        flex-direction: column;
        gap: var(--jkl-unit-15) var(--jkl-unit-20);

        @container (width > 35ch /* ~380px ved vanlig zoom/size */) {
            flex-direction: row-reverse;
            align-self: flex-end;
        }
    }
}