/**********/
/* BUTTON */
/**********/
/*
	<input type="button" class="my-button" name="mismonombre" value="Texto">
*/

.my-button {
	padding: 7px 15px;
	margin: 5px 0;
	background: var(--grey);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	outline: none;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.my-button:not([disabled]):hover {
	background:  rgba(var(--grey-rgb), 0.8)
}

.my-button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/********/
/* TEXT */
/********/
/*
	- Sin etiqueta:
	
	<div class="my-button">
		<input type="text" name="mismonombre" value="Texto">
	</div>

	- Con etiqueta:

	<div class="my-text">
		<label for="mismonombre">Etiqueta</label>
		<input type="text" name="mismonombre" value="Texto">
	</div>
*/

.my-text {
	align-items: center;
	margin: 5px 0;
}
.my-text label {
	line-height: 28px;
}
.my-text label ,
.my-text label + input {
	width: 50%;
}
.my-text input {
	width: 100%;
	box-sizing: border-box;
	padding: 5px;
    border: 1px solid var(--grey);
	border-radius: 0;
	outline: none;
}

.my-text input[disabled] {
	cursor: not-allowed;
}

/**********/
/* NUMBER */
/**********/
/*
	<label for="mismonombre">Etiqueta</label>
	<input type="number" class="my-number" name="mismonombre">
*/

.my-number {
	align-items: center;
	margin: 5px 0;
}
.my-number label {
	line-height: 28px;
}
.my-number label,
.my-number label + input {
	width: 50%;
}
.my-number input {
	width: 100%;
	box-sizing: border-box;
	padding: 5px;
    border: 1px solid var(--grey);
	border-radius: 0;
	outline: none;
}

.my-number input[disabled] {
	cursor: not-allowed;
}

.my-number2 {
	align-items: center;
	margin: 5px 0;
}
.my-number2 label {
	line-height: 28px;
}
.my-number2 label,
.my-number2 label + input {
	/*width: 50%;*/
}
.my-number2 input {
	/*width: 100%;*/
	box-sizing: border-box;
	padding: 5px;
    border: 1px solid var(--grey);
	border-radius: 0;
	outline: none;
}

.my-number2 input[disabled] {
	cursor: not-allowed;
}



/************/
/* TEXTAREA */
/************/
/*
	<label for="mismonombre">Etiqueta</label>
	<textarea class="my-textarea" rows="1" name="mismonombre"></textarea>
*/

.my-textarea {
	align-items: center;
	margin: 5px 0;
}
.my-textarea label {
	line-height: 28px;
}
.my-textarea label,
.my-textarea label + textarea {
	width: 50%;
}
.my-textarea  textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 5px;
    border: 1px solid var(--grey);
	border-radius: 0;
	outline: none;
}

/********/
/* DATE */
/********/
/*
	<label for="mismonombre">Etiqueta</label>
	<input type="date" class="my-date" name="mismonombre">
*/

.my-date {
	align-items: center;
	margin: 5px 0;
}
.my-date label {
	line-height: 28px;
}
.my-date label,
.my-date label + input {
	width: 50%;
}
.my-date input {
	width: 100%;
	box-sizing: border-box;
    height: 28px;
	padding: 5px;
    border: 1px solid var(--grey);
	border-radius: 0;
	outline: none;
	cursor: pointer;
}

/**********/
/* SELECT */
/**********/
/*
	- Sin etiqueta:

	<div class="my-select">
		<select name="nombre">
			<option value="0">Select one:</option>
			<option value="1">First</option>
			<option value="2">Second</option>
			<option value="3">Third</option>
		</select>
	</div>

	- Con etiqueta:

	<div class="my-select">
		<label for="mismonombre">Etiqueta</label>
		<select class="my-select" name="mismonombre">
			<option value="0">Select one:</option>
			<option value="1">First</option>
			<option value="2">Second</option>
			<option value="3">Third</option>
		</select>
	</div>
*/

.my-select {
	align-items: center;
	margin: 5px 0;
}
.my-select label {
	line-height: 28px;
}
.my-select label,
.my-select label + select {
	width: 50%;
}
.my-select select {
	width: 100%;
	box-sizing: border-box;
	padding: 4px 5px;
	border: 1px solid var(--grey);
	border-radius: 0;
	cursor: pointer;
	outline: none;
}

/************/
/* CHECKBOX */
/************/
/*
	<label class="my-checkbox">Etiqueta
		<input type="checkbox" checked="checked">
		<span class="checkmark"></span>
	</label>
*/

/* - Label */
.my-checkbox {
	display: block;
	position: relative;
	padding-left: 25px;
	margin: 5px 0;
	line-height: 20px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* - Hide the default checkbox */
.my-checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* - Disabled */
.my-checkbox input[disabled] ~ .checkmark {
	cursor: not-allowed;
	opacity: 0.5;
}

/* - Custom checkbox */
.my-checkbox .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #eee;
}

/* - Hover and background color */
.my-checkbox:hover input ~ .checkmark {
	background-color: #ccc;
}

/* - When checkbox is checked */
.my-checkbox input:checked ~ .checkmark {
	background-color: var(--primary);
}

/* - Checkmark/indicator (hidden when not checked) */
.my-checkbox .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* - Show checkmark when checked */
.my-checkbox input:checked ~ .checkmark:after {
	display: block;
}

/* - Checkmark/indicator */
.my-checkbox .checkmark:after {
	left: 7px;
	top: 3px;
	width: 4px;
	height: 8px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/**********/
/* RADIUS */
/**********/
/*
	<label class="my-radio">Etiqueta 1
		<input type="radio" checked="checked" name="mismonombre">
		<span class="checkmark"></span>
	</label>
	<label class="my-radio">Etiqueta 2
		<input type="radio" name="mismonombre">
		<span class="checkmark"></span>
	</label>
*/

/* - Label */
.my-radio {
	display: block;
	position: relative;
	padding-left: 25px;
	margin: 5px 0;
	line-height: 20px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* - Hide the default checkbox */
.my-radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* - Disabled */
.my-radio input[disabled] ~ .checkmark {
	cursor: not-allowed;
	opacity: 0.5;
}

/* - Custom radio */
.my-radio .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #eee;
	border-radius: 50%;
}

/* - Hover and background color */
.my-radio:hover input ~ .checkmark {
	background-color: #ccc;
}

/* - When radio is checked */
.my-radio input:checked ~ .checkmark {
	background-color: var(--primary);
}

/* - Indicator (the dot/circle - hidden when not checked) */
.my-radio .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* - Show indicator (dot/circle) when checked */
.my-radio input:checked ~ .checkmark:after {
	display: block;
}

/* - Indicator (dot/circle) */
.my-radio .checkmark:after {
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}