textarea {
    padding: $spacing16 $spacing16 $spacing8 $spacing16;
    height: $h-xl;
    border-radius: $borderRadius8;
    border-color: var(--gray400);
    resize: auto !important;
    outline: none;

    &:hover {
        border-color: var(--primaryColorLight) !important;
    }

    &:focus {
        border-color: var(--primaryColorMain) !important;
        border-width: $border1e5 !important;
    }

    &:active {
        border-color: var(--gray500) !important;
        border-width: $border1 !important;
    }

    &:disabled {
        background-color: var(--gray100), var(--gray500);
        border-color: var(--gray500);
    }

    &.ng-invalid.ng-touched {
        border-color: var(--errorColorMain) !important;
        border-width: $border2 !important;
    }

    &.show-valid.ng-valid.ng-touched {
        border-color: var(--successColorMain) !important;
    }

    &::-webkit-resizer {
        display: none;
    }
}

.wrap {
    position: relative;
    display: inline-block;

    &:has(> .ng-invalid.ng-touched) {
        &::after {
            border-color: var(--errorColorMain) !important;
        }
    }

    &::after {
        content: "";
        border-top: $border1 solid var(--gray400);
        width: 16px;
        transform: rotate(-45deg);
        background: transparent;
        position: absolute;
        right: 12px;
        bottom: 22px;
        pointer-events: none;
        border-radius: 25%;
    }

    .pull-tab {
        border-top: $border1 solid var(--gray400);
        width: 12px;
        transform: rotate(-45deg);
        position: absolute;
        bottom: 20px;
        right: 12px;
        pointer-events: none;
        border-radius: 25%;

        &:has(+ .ng-invalid.ng-touched) {
            border-color: var(--errorColorMain) !important;
        }
    }

    &:hover,
    &:focus {

        &::after,
        .pull-tab {
            border-color: var(--primaryColorLight) !important;
        }
    }




}