/**
 * Kontaktform Plugin Styles
 * Ausgelagert aus kontaktform.tmpl.php
 */

/* Floating Labels Animation */
#kontaktformWrapper .floating-label-group>input:focus~label,
#kontaktformWrapper .floating-label-group>input:not(:placeholder-shown)~label,
#kontaktformWrapper .floating-label-group>select~label {
    opacity: 0.65;
    color: white !important;
    transform: scale(0.75) translateY(-2rem) translateX(0.15rem);
}

#kontaktformWrapper .floating-label-group>label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Textarea Label */
#kontaktformWrapper .floating-label-group>textarea:focus~label,
#kontaktformWrapper .floating-label-group>textarea:not(:placeholder-shown)~label {
    background: transparent !important;
    opacity: 0.65;
    color: white !important;
    transform: scale(0.75) translateY(-2rem) translateX(0.15rem);
}

#kontaktformWrapper .floating-label-group>textarea:focus~label::after,
#kontaktformWrapper .floating-label-group>textarea:not(:placeholder-shown)~label::after {
    background-color: transparent !important;
}