/*
Theme Name: Softfocus
Theme URI:	https://softfocus.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/*
Formulários
--------------------------------------------
*/

label { --recuo: 10px; width: calc(100% - (var(--recuo) * 2)); margin: 0 var(--recuo); margin-bottom: calc(var(--recuo) * 2); font-size: var(--fs-200); }
label:before { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--cor-borda); content: ""; }
label:focus-within:before,
label:focus-within:before { bottom: -2px; height: 5px; }
input,
select { display: block; width: 100%; border: 0; padding: 5px 0 15px; background-color: var(--cor-fundo); font-family: var(--ff); font-size: var(--fs-500); line-height: 1em; font-weight: var(--fw-medium); color: var(--cor-900); }
select { padding-right: 30px; line-height: 1.2em; }
select + .select { position: absolute; bottom: 21px; right: 5px; width: 13px; height: 7px; background-image: url(../imagens/formularios/select.svg); background-position: center; background-repeat: no-repeat; pointer-events: none; }
select:focus + .select { transform: scaleY(-1); }

label.checkbox { display: flex; align-items: center; padding: 10px 0 10px 30px; margin-bottom: 0; font-size: var(--fs-300); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; }
label.checkbox:before { display: none; }
label.checkbox input { position: absolute; z-index: -1; padding: 0; opacity: 0; }
label.checkbox .box { position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; background: transparent; border: 1px solid var(--cor-borda); cursor: pointer; }
label.checkbox input:checked ~ .box {  }
label.checkbox .box:after { display: none; position: absolute; top: -9px; left: 10px; width: 7px; height: 21px; transform: rotate(45deg); border: solid var(--cor-500); border-width: 0 2px 2px 0; content: ""; }
label.checkbox input:checked ~ .box:after { display: block; }
label.checkbox input ~ .box:before { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; margin: -1px; border-radius: 100%; background-color: rgba(0,0,0,.05); opacity: 0; content: ""; transition-property: width, height, margin; transition-duration: 100ms; transition-timing-function: ease-in-out; }
label.checkbox input:focus ~ .box:before { width: 60px; height: 60px; margin: -30px; opacity: 1; }
label.checkbox a { }

label.invalido,
label.invalido input,
label.invalido select { color: #ee4f4f; }
label.invalido:before { background-color: #e6b0b0; }
label.checkbox.invalido .box { border-color: #e6b0b0; }

/*input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--cor-fundo) inset !important; }
input:-webkit-autofill { -webkit-text-fill-color: var(--cor-cinza-escuro) !important; }*/

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active { transition: background-color 9999s; transition-delay: 9999s; }
input:-webkit-autofill { -webkit-text-fill-color: var(--cor-900) !important; }

.grande input { font-size: var(--h3-font-size); }
.campo50 { width: calc(50% - (var(--recuo) * 2)); }







/*
Select
--------------------------------------------
*/





/*
Submit
--------------------------------------------
*/

button[type=submit] {
	display: inline-block; 
	vertical-align: middle;
	font-family: var(--ff);
	font-size: var(--fs-300); 
	font-weight: var(--fw-medium); 
	line-height: 1em; 
	color: var(--cor-000);
	border: 1px solid var(--cor-primaria); 
	border-radius: 2em;
	padding: .7em 1.4em .8em;
	background-color: var(--cor-primaria);
	transition: all 100ms ease-in-out;
	transition-property: color, border-color, background-color;
	cursor: pointer; 
}
button[type=submit].transparente { 
	color: var(--cor-400);
	border-color: var(--cor-400);
	background-color: transparent;
}
button[type=submit]:hover,
button[type=submit]:focus { color: var(--cor-900); background-color: var(--cor-secundaria); border-color: var(--cor-secundaria); background-size: 0; }
button[type=submit].invertido { color: var(--cor-900); background-color: var(--cor-secundaria); border-color: var(--cor-secundaria); }
button[type=submit].invertido:hover,
button[type=submit].invertido:focus { color: var(--cor-000); background-color: var(--cor-primaria); border-color: var(--cor-primaria); }
button[type=submit].transparente.alt { color: var(--cor-000); border-color: var(--cor-000); }
button[type=submit].transparente:hover,
button[type=submit].transparente:focus { color: var(--cor-000); background-color: var(--cor-primaria); border-color: var(--cor-primaria); }


/*
Inválidos
--------------------------------------------
*/

.campo.invalido small strong { padding-left: 23px; margin-right: 5px; animation: piscar 150ms linear; animation-iteration-count: 7; }
.campo.invalido small strong:before { position: absolute; top: 50%; left: 0; width: 14px; height: 12px; transform: translateY(-50%); background-image: url(../imagens/formularios/invalido.svg); background-position: center; background-size: contain; content: ""; }


form small.aviso.invalido { color: #ee4f4f; animation: piscar 200ms ease-in-out 10; }
@keyframes piscar {
	0% { opacity: inherit; }
	50% { opacity: 0; }
	100% { opacity: inherit; }
}