@use "../../ui-styles/button/ui-button" as button;

.form {
	::-webkit-input-placeholder {
		color: var(--placeholder-form-color);
	}
	:-moz-placeholder {
		/* Upto Firefox 18, Deprecated in Firefox 19  */
		color: var(--placeholder-form-color);
	}
	::-moz-placeholder {
		/* Firefox 19+ */
		color: var(--placeholder-form-color);
	}
	:-ms-input-placeholder {
		color: var(--placeholder-form-color);
	}

	input,
	textarea {
		font-family: var(--body-font);
	}

	.input {
		border: 1px solid var(--border-form-color);
		margin: 1rem 0;
	}

	.input-box {
		height: auto;
		width: 100%;
		display: block;
		border: 1px solid var(--border-form-color);
	}

	[class*="input-"] {
		outline: none;
		margin: 1rem 0;
		color: var(--text-form);
		padding: 0.7rem;
		font-size: 1rem;
	}

	/* Change the white to any color ;) */
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
		-webkit-box-shadow: 0 0 0 30px var(--background-inside-form-color) inset !important;
	}

	/*Change text in autofill textbox*/
	input:-webkit-autofill {
		-webkit-text-fill-color: var(--text-form-color) !important;
		&::selection {
			-webkit-text-fill-color: var(--color-white) !important;
		}
	}

	input[type="button"],
	input[type="submit"] {
		@extend .button;
	}

	input[type="color"] {
		min-width: 3rem;
		margin: 1rem 0;
		min-height: 1.5rem;
	}

	::-webkit-file-upload-button,
	input[type="reset" i] {
		background: var(--color-button);
		color: var(--color-button-text);
		border: 0.0625rem solid var(--color-button);
		font-size: var(--normal-font-size);
		padding: 0.5rem 1rem;
	}

	/*checkbox*/
	.label-checkbox,
	.label-radio {
		display: flex;
		input {
			align-self: center;
		}
		span {
			align-self: center;
			margin-left: 0.5rem;
		}
	}

	input[type="checkbox"] {
		position: relative;
		width: 0.975em;
		height: 0.975em;
		color: var(--label-text-form-color);
		border: 1px solid var(--border-form-color);
		//   border-radius: 4px;
		appearance: none;
		outline: 0;
		cursor: pointer;
		transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
		&::before {
			position: absolute;
			content: "";
			display: block;
			top: 1.2px;
			left: 3.6px;
			width: 4px;
			height: 7px;
			border-style: solid;
			border-color: var(--color-white);
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
			opacity: 0;
		}
		&:checked {
			color: var(--color-white);
			border-color: var(--color-button);
			background: var(--color-button);
			&::before {
				opacity: 1;
			}
			~ label::before {
				clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
			}
		}
	}
	/*fin checkbox*/

	/*radio*/
	input[type="radio"] {
		-webkit-appearance: none;
		width: 12.5px;
		height: 12.5px;
		border-radius: 50%;
		outline: none;
		border: 1px solid var(--border-form-color);
		// margin: 0;
	}

	input[type="radio"]:before {
		content: "";
		display: block;
		width: 60%;
		height: 60%;
		margin: 20% auto;
		border-radius: 50%;
	}

	input[type="radio"]:checked:before {
		background: var(--color-button);
	}

	input[type="radio"]:checked {
		border-color: var(--color-button);
	}

	/*fin iradio*/
}