/* Component: Textfield
 * Description: Styles for the textfield and textarea components, including base appearance, focus and unfocus states, 
 *              and animated floating hints. The textfield uses custom fonts, colors, and transitions for a
 *              modern UI experience.
 */


.smd-component_textarea {
    margin-top: 25px;
    font-family: var(--font-family-primary);
}

.smd-component_textfield {
    width: 300px;
    font-family: var(--font-family-primary);
    padding: 10px;
    font-size: 15px;
    border: 1px solid #5d6669;
    border-radius: 12px;
    outline: none;
    background-color: var(--color-background-deep);
    color: white;
}

.smd-component_textfield:focus {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.24), 0 10px 40px 0 rgba(0, 0, 0, 0.19);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.smd-component_textfield--unfocus {
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.24); 
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.smd-component_textfield-hint {
    margin-left: -310px;
    pointer-events: none;
    color: #888;
    transition: all 0.4s ease;
    position: absolute;
    margin-top: 10px; 
    font-size: 15px; 
}

.smd-component_textfield:focus + .smd-component_textfield-hint,
.smd-component_textfield:valid + .smd-component_textfield-hint {
    margin-top: -20px;
    position: absolute;
    font-size: 13px;
    color: var(--color-branding-secondary);
}

.smd-component_textfield-hint-small {
    display: none;
}