muddle/modules/amezing/sass/citrine/components/_input.scss

@use "../abstracts/mixins" as *;

input {
	appearance: none;
	background-color: var(--bg-muted-1);
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"],
input[type="submit"] {
	box-shadow: var(--edge-highlight);
	border: none;
	border-radius: var(--rounded-corner);
	background-color: var(--bg-muted-1);
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"] {
	padding: 0.5rem 0.75rem;
	width: 100%;

	&::placeholder {
		opacity: 1;
		color: var(--fg-muted-1);
	}
}

input[type="submit"] {
	transition:
		background-color var(--transition),
		transform var(--transition-bezier);
	box-shadow: var(--edge-highlight);
	border-radius: var(--rounded-corner);
	padding: 0.375rem 0.75rem;
	color: var(--fg-muted-1);
	font-weight: var(--font-weight-semi-bold);
	font-size: var(--font-size-small);

	&:enabled:hover {
		background-color: var(--bg-muted-2);
	}

	&:enabled:active {
		transform: var(--active);
	}
}

input[type="radio"],
input[type="checkbox"],
input[type="color"] {
	position: relative;
	transition: background-color var(--transition);
	border: 0.125rem solid var(--bg-muted-2);
	width: 1rem;
	height: 1rem;

	&:not(:checked):enabled:hover {
		background-color: var(--bg-muted-2);
	}
}

input[type="radio"],
input[type="checkbox"] {
	vertical-align: -0.125em;
	margin-inline-end: 0.25rem;

	&::before {
		display: block;
		position: absolute;
		transform: scale(0.5);
		opacity: 0;
		transition: opacity var(--transition), transform var(--transition-bezier);
		content: "";
	}

	&:checked {
		border: 0.15rem solid transparent;
		background-color: var(--accent-color);

		&::before {
			transform: scale(1);
			opacity: 1;
		}
	}
}

input[type="radio"] {
	border-radius: 50%;

	&::before {
		inset-block-start: 0.125rem;
		inset-inline-start: 0.125rem;
		border-radius: 50%;
		background-color: var(--contrast-color);
		width: 0.5rem;
		height: 0.5rem;
	}
}

input[type="checkbox"] {
	border-radius: calc(var(--rounded-corner-small) / 2);

	&::before {
		@include icon(pseudo);
		--icon: var(--icon-check);
		transform-origin: bottom left;
		inset-block-start: -0.125rem;
		inset-inline-start: -0.125rem;
		color: var(--contrast-color);
		font-size: 1rem;
	}

	&.switch {
		vertical-align: -0.375rem;
		box-shadow: var(--edge-highlight);
		border: none;
		border-radius: 9999px;
		width: 2.5rem;
		height: 1.5rem;

		&.big {
			vertical-align: -0.625rem;
			width: 3rem;
			height: 2rem;

			&::before {
				width: 1.5rem;
				height: 1.5rem;
			}
		}

		&::before {
			transform: none;
			transform-origin: center;
			opacity: 1;
			mask-image: none;
			inset-block-start: 0.25rem;
			inset-inline-start: 0.25rem;
			box-shadow: var(--shadow);
			border-radius: 50%;
			background-color: white;
			width: 1rem;
			height: 1rem;
			content: "";
		}

		&:checked {
			background-color: var(--accent-color);

			&::before {
				transform: translateX(1rem);
				background-color: var(--contrast-color);

				:root[dir*="rtl"] & {
					transform: translateX(-1rem);
				}
			}
		}

		&:disabled::before {
			box-shadow: none;
		}
	}
}

input[type="color"] {
	vertical-align: -0.375em;
	box-shadow: var(--edge-highlight);
	border: none;
	border-radius: var(--rounded-corner-small);
	padding: 0.25rem;
	width: 3rem;
	height: 2rem;

	&::-moz-color-swatch {
		border: none;
		border-radius: calc(var(--rounded-corner-small) - 0.25rem);
	}

	&::-webkit-color-swatch-wrapper {
		padding: 0;
	}

	&::-webkit-color-swatch {
		border-radius: calc(var(--rounded-corner-small) - 0.25rem);
	}
}

input[type="range"] {
	appearance: none;
	box-shadow: var(--edge-highlight);
	border-radius: 9999px;
	background: var(--bg-muted-1);
	padding: 0.5rem 0.25rem;
	width: 100%;
	height: 1rem;

	&::-webkit-slider-runnable-track {
		cursor: pointer;
		border-radius: 9999px;
		background: var(--accent-color);
		width: 100%;
	}

	&::-moz-range-track {
		cursor: pointer;
		border-radius: 9999px;
		background: var(--accent-color);
		width: 100%;
		height: 0.5rem;
	}

	&::-webkit-slider-thumb {
		appearance: none;
		cursor: ew-resize;
		margin-block: -0.5rem;
		box-shadow: var(--shadow);
		border: none;
		border-radius: 0.25rem;
		background-color: white;
		width: 0.5rem;
		height: 1.5rem;
	}

	&::-moz-range-thumb {
		appearance: none;
		cursor: ew-resize;
		margin-block: -0.5rem;
		box-shadow: var(--shadow);
		border: none;
		border-radius: 0.25rem;
		background-color: white;
		width: 0.5rem;
		height: 1.5rem;
	}

	&.hollow {
		&::-webkit-slider-thumb {
			margin-block: 0;
			outline: 0.25rem solid white;
			background-color: transparent;
			height: 0.5rem;
		}

		&::-moz-range-thumb {
			margin-block: 0;
			outline: 0.25rem solid white;
			background-color: transparent;
			height: 0.5rem;
		}
	}
}