@use './mixins' as mix;

.trm {
    --trm-input-border-color: var(--color-base-200);
    --trm-input-border-color--hover: var(--color-base-250);
    --trm-input-border-color--focus: var(--color-primary-500);


    --trm-input-border-color--disabled: var(--color-base-200);
    --trm-input-bg-color--disabled: var(--color-base-50);
}

.trm-input {
    background: #FFFFFF;
    border-radius: 10px;
    &.trm-form-field {
        -webkit-appearance: none;
        border: 1px solid var(--trm-input-border-color);
        border-radius: 10px;
        width: 100%;
        box-sizing: border-box;

        min-height: 46px;
        padding: 12px 20px;
        @include mix.font(14px, 20px, 500);
        @include mix.tablet {
            min-height: 50px;
            padding: 13px 20px;
            @include mix.font(15px, 22px, 500);
        }
        &:hover {
            border-color: var(--trm-input-border-color--hover);
        }

        &:focus, &:active {
            box-shadow: 0 0 0 2px var(--trm-input-border-color--focus);
            outline: none;
        }

        &.ng-invalid.ng-touched.ng-dirty {
            --trm-input-border-color: var(--color-red-500);
            --trm-input-border-color--hover: var(--color-red-500);
            --trm-input-border-color--focus: transparent;
        }
    }
}

.trm-label {
    @include mix.font(15px, 18px, 500);
    margin-bottom: 10px;
    display: block;
}

::-webkit-input-placeholder {
    color: var(--color-base-350);
}

::placeholder {
    color: var(--color-base-350);
}