@import '@alfalab/core-components-vars/src/index.css';
@import '../../form-control/src/vars.css';
@import '../../input/src/vars.css';

:root {
    /* min-height */
    --textarea-40-min-height: var(--form-control-40-min-height);
    --textarea-s-min-height: var(--form-control-s-min-height);
    --textarea-m-min-height: var(--form-control-m-min-height);
    --textarea-l-min-height: var(--form-control-l-min-height);
    --textarea-xl-min-height: var(--form-control-xl-min-height);

    /* spacer */
    --textarea-spacer-style: solid transparent;
    --textarea-40-spacer: 11px;
    --textarea-s-spacer: 14px;
    --textarea-m-spacer: 18px;
    --textarea-l-spacer: 22px;
    --textarea-xl-spacer: 24px;

    /* filled spacer-top */
    --textarea-40-filled-spacer-top: 19px;
    --textarea-s-filled-spacer-top: 24px;
    --textarea-m-filled-spacer-top: 24px;
    --textarea-l-filled-spacer-top: 32px;
    --textarea-xl-filled-spacer-top: 34px;

    /* filled spacer-bottom */
    --textarea-40-filled-spacer-bottom: 3px;
    --textarea-s-filled-spacer-bottom: 4px;
    --textarea-m-filled-spacer-bottom: 8px;
    --textarea-l-filled-spacer-bottom: 12px;
    --textarea-xl-filled-spacer-bottom: 14px;

    /* filled min-height */
    --textarea-40-filled-min-height: calc(
        var(--textarea-40-min-height) - var(--textarea-40-filled-spacer-top) -
            var(--textarea-40-filled-spacer-bottom)
    );
    --textarea-s-filled-min-height: calc(
        var(--textarea-s-min-height) - var(--textarea-s-filled-spacer-top) -
            var(--textarea-s-filled-spacer-bottom)
    );
    --textarea-m-filled-min-height: calc(
        var(--textarea-m-min-height) - var(--textarea-m-filled-spacer-top) -
            var(--textarea-m-filled-spacer-bottom)
    );
    --textarea-l-filled-min-height: calc(
        var(--textarea-l-min-height) - var(--textarea-l-filled-spacer-top) -
            var(--textarea-l-filled-spacer-bottom)
    );
    --textarea-xl-filled-min-height: calc(
        var(--textarea-xl-min-height) - var(--textarea-xl-filled-spacer-top) -
            var(--textarea-xl-filled-spacer-bottom)
    );
}

.textarea {
    @mixin paragraph_component;
    position: relative;
    display: block;
    width: 100%;
    min-height: 100%;
    background: none;
    border: none;
    margin: var(--gap-0);
    outline: none;
    box-sizing: border-box;
    resize: none;
    -webkit-appearance: none;
    height: inherit;

    &.overflow {
        color: transparent;
        caret-color: var(--input-color);
    }

    &.size-40 {
        @mixin paragraph_component_secondary;
    }
}

.overflowHidden.overflowHidden {
    overflow: hidden;
}

.customScrollbar {
    @mixin custom-scrollbar;
}

.textarea::placeholder {
    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}

.hasInnerLabel::placeholder {
    opacity: 0;
}

.pseudoTextarea {
    position: absolute;
    top: var(--gap-0);
    left: var(--gap-0);
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: pre-wrap;
    z-index: -1;
    overflow: auto;
    max-height: 100%;
    & span {
        color: var(--input-color);
    }
    & .overflow {
        color: var(--color-light-text-tertiary);
    }
    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
}

.sub {
    @mixin paragraph_component_secondary;
    @mixin form-control-sub;
    padding: var(--form-control-sub-paddings);
}

.textarea.textarea.hasInnerLabel.hasInnerLabel {
    padding-top: var(--gap-0);
    padding-bottom: var(--gap-0);
}

/* DISABLED STATE */
.textarea:disabled {
    cursor: var(--disabled-cursor);
    opacity: 1;
}

/* READ-ONLY STATE */
.textarea:read-only {
    cursor: var(--disabled-cursor);
}

/* FOCUS STATE */
.textarea:focus.hasInnerLabel::placeholder {
    opacity: 1;
}

.focusVisible {
    @mixin focus-outline;
}

/* FILLED STATE */
.textarea.filled.hasInnerLabel {
    padding-top: var(--gap-0);
    &.size-40 {
        min-height: var(--textarea-40-filled-min-height);
    }
    &.size-48 {
        min-height: var(--textarea-s-filled-min-height);
    }
    &.size-56 {
        min-height: var(--textarea-m-filled-min-height);
    }
    &.size-64 {
        min-height: var(--textarea-l-filled-min-height);
    }
    &.size-72 {
        min-height: var(--textarea-xl-filled-min-height);
    }
}

/* Correct pseudoTextarea size */
.pseudoTextarea.filled.hasInnerLabel {
    &.size-40 {
        min-height: calc(100% - var(--textarea-40-filled-spacer-top));
    }

    &.size-48 {
        min-height: calc(100% - var(--textarea-s-filled-spacer-top));
    }

    &.size-56 {
        min-height: calc(100% - var(--textarea-m-filled-spacer-top));
    }

    &.size-64 {
        min-height: calc(100% - var(--textarea-l-filled-spacer-top));
    }

    &.size-72 {
        min-height: calc(100% - var(--textarea-xl-filled-spacer-top));
    }
}

.wrapper {
    &.resizeVertical {
        resize: vertical;
        min-height: 48px;

        &.size-40 {
            min-height: 40px;
        }
    }
}

/* Border нужен для того чтобы растянуть textarea на всю высоту FormControl , если заменить на padding, то лейбл не будет кликабельный */
.textarea.textarea {
    &.size-40 {
        border-top: var(--textarea-40-spacer) var(--textarea-spacer-style);
        border-bottom: var(--textarea-40-spacer) var(--textarea-spacer-style);
    }

    &.size-48 {
        border-top: var(--textarea-s-spacer) var(--textarea-spacer-style);
        border-bottom: var(--textarea-s-spacer) var(--textarea-spacer-style);
    }

    &.size-56 {
        border-top: var(--textarea-m-spacer) var(--textarea-spacer-style);
        border-bottom: var(--textarea-m-spacer) var(--textarea-spacer-style);
    }

    &.size-64 {
        border-top: var(--textarea-l-spacer) var(--textarea-spacer-style);
        border-bottom: var(--textarea-l-spacer) var(--textarea-spacer-style);
    }

    &.size-72 {
        border-top: var(--textarea-xl-spacer) var(--textarea-spacer-style);
        border-bottom: var(--textarea-xl-spacer) var(--textarea-spacer-style);
    }

    &.hasInnerLabel {
        &.size-40 {
            border-top: var(--textarea-40-filled-spacer-top) var(--textarea-spacer-style);
            border-bottom: var(--textarea-40-filled-spacer-bottom) var(--textarea-spacer-style);
        }

        &.size-48 {
            border-top: var(--textarea-s-filled-spacer-top) var(--textarea-spacer-style);
            border-bottom: var(--textarea-s-filled-spacer-bottom) var(--textarea-spacer-style);
        }

        &.size-56 {
            border-top: var(--textarea-m-filled-spacer-top) var(--textarea-spacer-style);
            border-bottom: var(--textarea-m-filled-spacer-bottom) var(--textarea-spacer-style);
        }

        &.size-64 {
            border-top: var(--textarea-l-filled-spacer-top) var(--textarea-spacer-style);
            border-bottom: var(--textarea-l-filled-spacer-bottom) var(--textarea-spacer-style);
        }

        &.size-72 {
            border-top: var(--textarea-xl-filled-spacer-top) var(--textarea-spacer-style);
            border-bottom: var(--textarea-xl-filled-spacer-bottom) var(--textarea-spacer-style);
        }
    }
}

/** Нужно чтобы нативная икона resize была прижата к краю */
.resizable-40.resizable-40 {
    padding-right: 0;
}

.rightAddonsClassName {
    align-self: flex-start;

    &.size-40,
    &.size-48 {
        padding-top: var(--gap-12);
    }

    &.size-56 {
        padding-top: var(--gap-16);
    }

    &.size-64 {
        padding-top: var(--gap-20);
    }

    &.size-72 {
        padding-top: var(--gap-24);
    }
}