@use "../../core/size";
@use "../../core";
@use "../../core/utils/functions" as *;
@use "variables" as *;

$textarea-padding-y: core.densify(size.$padding-050);
$textarea-content-box-offset-y: calc((2 * #{$textarea-padding-y}) + (2 * var(--f-border-width-medium)));
$textarea-auto-resize-fallback-min-height: 4lh;
$textarea-auto-resize-fallback-height: max(var(--i-textarea-field-min-height), #{$textarea-auto-resize-fallback-min-height});

.textarea-field {
    --i-textarea-field-min-height: 4lh;
    --i-textarea-field-max-height: 4lh;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    line-height: var(--f-line-height-large);
    margin: 0 0 core.densify(var(--f-margin-component-bottom));
    position: relative;
    width: var(--f-width-full);

    &--inline {
        @include core.label-inline;
    }

    &__textarea {
        background-color: $textareafield-color-background-default;
        color: $textareafield-color-text-default;
        box-shadow: var(--f-input-shadow-inset);
        border-radius: var(--f-border-radius-medium);
        border: var(--f-border-width-medium) solid $textareafield-color-border-default;
        box-sizing: border-box;
        font-size: var(--f-font-size-standard);
        min-height: core.densify(var(--f-height-large));
        padding: $textarea-padding-y size.$padding-075;
        width: var(--f-width-full);
    }

    &__textarea[rows] {
        height: auto;
    }

    &__textarea:disabled {
        border-color: $textareafield-color-border-disabled;
        color: $textareafield-color-text-disabled;
        background-color: $textareafield-color-background-disabled;
    }

    &--error {
        .textarea-field__textarea {
            border-color: $textareafield-color-border-error;
        }
    }

    &__resize--none {
        resize: none;
    }

    &__resize--auto {
        min-height: calc(#{$textarea-auto-resize-fallback-height} + #{$textarea-content-box-offset-y});
        resize: vertical;
    }

    &__resize--max-rows {
        min-height: calc(min(#{$textarea-auto-resize-fallback-height}, var(--i-textarea-field-max-height)) + #{$textarea-content-box-offset-y});
        max-height: calc(var(--i-textarea-field-max-height) + #{$textarea-content-box-offset-y});
        overflow-y: auto;
        resize: none;
    }

    @supports (field-sizing: content) {
        &__resize--auto {
            field-sizing: content;
            min-height: calc(var(--i-textarea-field-min-height) + #{$textarea-content-box-offset-y});
            resize: none;
        }
    }

    &__resize--vertical {
        resize: vertical;
    }
}