.vel-input {
    width: 100%;
    padding: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-on-surface);
    background-color: color-mix(in srgb, var(--color-surface-container-high) 80%, transparent);
    border: none;
    border-bottom: 2px solid var(--color-outline-variant);
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.vel-input:focus {
    border-bottom-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-surface-container-high) 95%, transparent);
}

.vel-input::placeholder {
    color: color-mix(in srgb, var(--color-on-surface-variant) 70%, transparent);
}

.vel-input--busca {
    padding: 1rem 1rem 1rem 3rem;
    background-color: color-mix(in srgb, var(--color-surface-container-low) 70%, transparent);
    border-bottom-color: var(--color-primary);
}

.vel-input--busca-com-atalhos {
    padding: 1rem 4rem 1rem 3rem;
}

.vel-input--login {
    padding: 1rem 1rem 0.75rem;
    font-size: 1rem;
    border-bottom-color: var(--color-primary);
}

.vel-input--login:focus {
    border-bottom-color: transparent;
}