traxxx-web/assets/css/inputs.css

.input {
	box-sizing: border-box;
    padding: .5rem .75rem;
    font-size: 1rem;
    flex-basis: 0;
    border: solid 1px var(--grey-light-30);
    border-radius: .25rem;
	background: var(--grey-light-60);
	font: inherit;

    &:focus {
		outline: none;
		border-color: var(--primary-light-10);
    }
}

.input-inline {
	border-radius: 0;
	border: none;
	border-bottom: solid 1px var(--grey-light-30);
	background: var(--background);
}

.button {
	display: inline-flex;
	flex-shrink: 0;
	align-items: stretch;
	box-sizing: border-box;
    padding: .5rem;
    border: none;
    border-radius: .25rem;
    background: var(--background);
	box-shadow: 0 0 3px var(--shadow-weak-30);
	color: var(--shadow-strong-20);
    font-size: .9rem;
    font-weight: bold;

	.icon {
		height: auto;
		padding: 0 .75rem 0 .25rem;
		fill: var(--shadow-strong-10);
	}

	&:hover {
		cursor: pointer;
		background: var(--primary);
		color: var(--text-light);

		.icon {
			fill: var(--text-light);
		}
	}

    &:focus {
		outline: none;
    }
}

.button-label {
	margin-right: .25rem;
}

.button-submit {
    background: var(--primary);
	color: var(--text-light);
	justify-content: center;

    &:hover:not(:disabled) {
		background: var(--primary-dark-10);
    }

	&:disabled {
		background: var(--shadow-weak-10);
	}
}

.button-primary {
    background: var(--primary);
	color: var(--text-light);
	justify-content: center;

    &:hover:not(:disabled) {
		background: var(--primary-dark-10);
    }

	&:disabled {
		background: var(--shadow-weak-10);
	}
}

.button-inline {
    border: none;
    background: none;
	color: var(--grey-dark-20);
	padding: 0 0 .5rem 0;
    font-size: 1rem;
    font-weight: bold;

	.icon {
		fill: var(--grey-dark-20);
		padding-left: none;
	}

	&:hover {
		cursor: pointer;
		background: none;
		color: var(--primary);

		.icon {
			fill: var(--primary);
		}
	}

    &:focus {
		outline: none;
    }
}

.button-cancel {
    background: none;
    color: var(--shadow-strong-10);
	font-weight: normal;

    &:hover:not(:disabled) {
		color: var(--error);
		cursor: pointer;
    }

	&:disabled {
		color: var(--shadow-weak-10);
	}
}

.radio {
	margin: 0 .5rem 0 0;
}

.filter-section {
	width: 100%;
	border-bottom: solid 1px var(--shadow-hint);
	margin-bottom: .25rem;
}

.label-values {
	flex-shrink: 0;
	font-weight: normal;
}

.filter-split {
	display: flex;
	align-items: center;
}

.toggle-container,
.range-container {
	display: flex;
	flex-grow: 1;
	align-items: center;
	padding: .5rem 0;

	&.on {
		.toggle-label.on {
			color: var(--enabled);

			.icon {
				fill: var(--enabled);
			}
		}

		.toggle {
			background-color: var(--enabled-background);

			&::-webkit-slider-thumb {
				background: var(--enabled);
			}

			&::-moz-range-thumb {
				background: var(--enabled);
			}
		}
	}

	&.off {
		.toggle-label.off {
			color: var(--disabled);

			.icon {
				fill: var(--disabled);
			}
		}

		.toggle {
			background-color: var(--disabled-background);

			&::-webkit-slider-thumb {
				background: var(--disabled);
			}

			&::-moz-range-thumb {
				background: var(--disabled);
			}
		}
	}
}

.toggle-label {
	display: inline-flex;
	justify-content: center;
	min-width: 1.5rem;
	flex-shrink: 0;
	padding: 0 .5rem;
	color: var(--shadow);
	font-weight: bold;
	font-size: .9rem;

	&.on {
		text-align: right;
	}

	.icon {
		fill: var(--shadow);
	}

	&:hover {
		cursor: pointer;

		&.on {
			color: var(--enabled);

			.icon {
				fill: var(--enabled);
			}
		}

		&.off {
			color: var(--disabled);

			.icon {
				fill: var(--disabled);
			}
		}
	}
}

.filter-label {
	display: flex;
	justify-content: space-between;
	padding: .5rem 0 .25rem .25rem;
	color: var(--shadow);
	font-weight: bold;
	font-size: .9rem;

	.label {
		width: 100%;
		display: flex;
		align-items: center;
		text-transform: capitalize;
	}

	.checkbox {
		margin: 0 .75rem 0 0;
	}

	.icon {
		margin: 0 .5rem 0 0;
	}
}

.toggle {
	width: 0;
	flex-grow: 1;
	height: 1.25rem;
	appearance: none;
	border-radius: 1rem;
	background-color: var(--shadow-weak-40);
	background-image: radial-gradient(circle, var(--shadow-weak-10) .3rem, transparent calc(.3rem + 1px));
	cursor: pointer;

	&::-webkit-slider-thumb {
		appearance: none;
		background: var(--disabled-handle);
		width: 1.25rem;
		height: 1.25rem;
		border-radius: .625rem;
		box-shadow: 0 0 3px var(--shadow-weak-10);
	}

	&::-moz-range-thumb {
		appearance: none;
		background: var(--disabled-handle);
		width: 1.25rem;
		height: 1.25rem;
		border: none;
		border-radius: .625rem;
		box-shadow: 0 0 3px var(--shadow-weak-10);
	}
}