:host {
    position: relative;
    display: flex;
    min-height: var(--input-height);
}

.input-label {
    position: absolute;
    top: 0.25rem;
    left: 0.5rem;
    font-size: 0.7rem;
    color: var(--grey-color-6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 1rem);
    pointer-events: none; /* Permitir que los eventos pasen a través del label */
}

input::placeholder {
    color: var(--grey-color-5);
}

.input {
    position: relative;
    display: flex;

    & > input {
        display: flex;
        align-items: self-end;
        padding: .5rem;
        width: 100%;
    }

    & > label {
        position: absolute;
        top: 0.25rem;
        left: 0.5rem;
        font-size: 0.7rem;
        color: var(--grey-color-6);
    }
}

.required {
    color: var(--red-color);
    font-weight: bold;
    
}