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

@layer jokul.components {
    .jkl-text-input-wrapper {
        @include shared.wrapper_styles;
    }

    .jkl-text-input {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        &__input {
            padding: var(--jkl-text-input-padding);
            width: 100%;

            @include shared.input-styles;

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

        &__unit {
            padding-inline-end: var(--jkl-text-input-horizontal-padding);
            padding-block: var(--jkl-text-input-vertical-padding);
        }

        &__action-button {
            margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
        }

        &--inline {
            display: inline-block;
            vertical-align: middle;
            margin: jkl.rem(-2px) jkl.rem(4px);
        }
    }
}