@use "sass:string";
@use "../../core/jkl";

$_support-icon-entrance-animation-name: jkl-support-icon-entrance-#{string.unique-id(

    )};

@layer jokul.components {
    .jkl-dormant-form-support-label {
        display: none;
        opacity: 0;
        pointer-events: none;
    }

    .jkl-form-support-label {
        $_icon-size: jkl.rem(20px);

        --jkl-form-support-label-margin: var(--jkl-unit-10) 0 0;
        --jkl-form-support-label-icon-size: #{$_icon-size};
        --jkl-form-support-label-icon-margin: 0 -#{$_icon-size} -#{jkl.rem(6px)} 0;
        --color: var(--jkl-color-text-subdued);

        @include jkl.text-style("text-small");
        @include jkl.motion("standard", "lazy");

        display: flex;
        margin: var(--jkl-form-support-label-margin);
        color: var(--color);
        transition-property: color;
        transition-delay: jkl.timing("productive");

        &__icon,
        &__icon.jkl-icon {
            opacity: 0;
            height: var(--jkl-form-support-label-icon-size);
            margin: var(--jkl-form-support-label-icon-margin);

            @include jkl.forced-colors-svg-fallback($stroke: CanvasText,
                $fill: Canvas);
        }

        &--error,
        &--warning,
        &--success {
            --color: var(--jkl-color-text-default);

            .jkl-form-support-label__icon {
                animation: jkl.timing("lazy") cubic-bezier(0, 0, 0.3, 1) jkl.timing("expressive") $_support-icon-entrance-animation-name forwards;
            }
        }

        &--sr-only {
            @include jkl.screenreader-only;
        }
    }

    .jkl-label {
        display: block;
        margin: 0 0 var(--jkl-spacing-8) 0;
        color: var(--jkl-color-text-default);

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

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

        &--large {
            @include jkl.text-style("text-large");
        }

        &--sr-only {
            @include jkl.screenreader-only;
        }

        .jkl-help {
            position: relative;
            top: -0.1ex;
        }
    }

    .jkl-input-group-description {
        @include jkl.text-style("text-small");
        color: var(--jkl-color-text-subdued);
        margin-block-end: var(--jkl-spacing-8);
        max-inline-size: 50ch;
        text-wrap: pretty;
    }

    .jkl-label:has(+ .jkl-input-group-description) {
        margin-block-end: var(--jkl-spacing-4);
    }

    @keyframes #{$_support-icon-entrance-animation-name} {
        0% {
            margin-right: 0;
            opacity: 0;
            transform: scale(1);
        }

        30% {
            margin-right: jkl.$spacing-8;
        }

        50% {
            opacity: 1;
        }

        70% {
            transform: scale(1.1);
        }

        85% {
            transform: scale(0.9);
        }

        100% {
            transform: scale(1);
            opacity: 1;
            margin-right: jkl.$spacing-8;
        }
    }
}