@charset "UTF-8";
@use "sass:color";
@use "../../core/jkl";
@use "../../shared/input/shared-input-styles" as shared;

@layer jokul.components {
    .jkl-text-area-wrapper {
        overflow: hidden;

        @include shared.wrapper_styles;
    }

    .jkl-text-area {
        --text-input-height: var(--jkl-unit-60);
        --progress-bar-height: #{jkl.rem(4px)};

        height: auto;
        width: 100%;

        &__text-area {
            scrollbar-color: var(--jkl-color) transparent; // Unngå at scrollbar ligger oppå rammen
            box-sizing: border-box;
            resize: none; // Fjern mulighet for resizing av feltet
            width: 100%;
            padding: var(--jkl-text-input-padding);
            max-height: var(--text-input-height);
            height: var(--text-input-height);
            min-height: var(--text-input-height);

            @include jkl.motion;
            transition-property: height, min-height, max-height, padding;

            @include shared.input-styles;
        }

        .jkl-text-area-wrapper {
            height: auto;
            max-height: 100%;
        }

        &--start-open {
            .jkl-text-area-wrapper {
                max-height: 100%;
            }
        }

        &--auto-expand {
            .jkl-text-area__text-area {
                overflow: hidden; // Skjul scrollbar når høyden autojusteres
            }
        }

        &:has(.jkl-text-area__counter) {
            .jkl-text-area-wrapper {
                position: relative;
                padding-bottom: calc(var(--text-input-height) + var(--progress-bar-height));
            }

            .jkl-text-area__counter {

                pointer-events: none; // La brukeren klikke gjennom telleren når feltet er kollapset
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;

                &-count {
                    padding: var(--jkl-text-input-padding);
                    color: var(--text-color);

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

                &-progress {
                    background-color: transparent;
                    height: var(--progress-bar-height);
                    width: 100%;
                    overflow: hidden;

                    &::after {
                        content: "";
                        width: var(--progress-width, 100%);
                        display: block;
                        height: var(--progress-bar-height);
                        background-color: var(--border-color);
                        transition-property: width;

                        @include jkl.motion("standard", "lazy");
                    }
                }
            }
        }
    }

    // Nytteklasser for tekstfelt med $num antall rader
    @for $num from 3 through 10 {

        .jkl-text-area__text-area--#{$num}-rows:focus,
        .jkl-text-area__text-area--#{$num}-rows:not(:placeholder-shown),
        .jkl-text-area--start-open .jkl-text-area__text-area--#{$num}-rows {
            --height: #{$num}lh;
            --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);

            // (#2751) Ekspanderende får inline style med height auto,
            //         som gir et "hopp" dersom det er en teller og vi
            //         ikke har en minimumshøyde.
            min-height: calc(var(--height) + var(--vertical-padding)); // (#2751)
            height: calc(var(--height) + var(--vertical-padding));
            max-height: 100%;
        }
    }
}