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

@layer jokul.components {
    .jkl-input-panel {
        --outer-border-color: var(--jkl-color-border-input);
        --outer-border-thickness: #{jkl.rem(1px)};
        --background-color: transparent;
        --padding-inline: var(--jkl-unit-25);

        box-shadow: inset 0 0 0 var(--outer-border-thickness)
            var(--outer-border-color);
        border-radius: var(--jkl-border-radius-s);
        background-color: var(--background-color);
        display: flex;
        flex-direction: column;
        interpolate-size: allow-keywords;

        @include jkl.motion;
        transition-property: box-shadow;

        &__header {
            display: grid;
            grid-template-columns: 1fr max-content;
            align-items: center;
            gap: jkl.rem(8px);
            cursor: pointer;
            position: relative;
            padding: var(--jkl-unit-20) var(--padding-inline);

            .jkl-radio-button,
            .jkl-checkbox {
                grid-column: 1 / -1;
                grid-row: 1;
                inline-size: 100%;
            }

            label {
                inline-size: 100%;
            }

            &__amount {
                display: flex;
                height: 100%;
                align-items: center;
                grid-column: 2;
                grid-row: 1;
                justify-self: end;
                pointer-events: none;
                position: relative;
                z-index: 1;

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

        &__description {
            height: 0;
            overflow: hidden;
            padding-inline: var(--padding-inline);
            padding-block-end: var(--jkl-spacing-none);
            line-height: initial;

            @include jkl.text-style("paragraph-medium");
            @include jkl.motion;
            transition-property: height;
        }

        &:has(:focus-visible) {
            @include jkl.focus-outline;
        }

        &:has(:checked),
        &[data-always-open="true"],
        &:not([data-always-open]) {
            --background-color: var(--jkl-color-background-container-high);

            .jkl-input-panel__description {
                height: auto;
                padding-block-end: var(--jkl-unit-20);
            }
        }

        &:has(input:hover) {
            --outer-border-color: var(--jkl-color-border-separator-hover);
            --outer-border-thickness: #{jkl.rem(2px)};
            cursor: pointer;
        }
    }
}