:root {
	--sipla-green: #44E166;
	--sipla-yellow: #fed811;
	--sipla-orange: #e68415;
	--sipla-light-blue: #b4ddff;
	--sipla-blue: #2a8be1;
	--sipla-darkblue: #23527C;
	--sipla-red: #E13036;
	--sipla-white: #fafafa;
	--sipla-black: #333333;
	--sipla-gray: #7f7f7f;
	--sipla-shadow: #7f7f7f7f;
	--sipla-light-shadow: #57575727;
}

/* Eingabefelder */
.sipla-styled input[type="text"], 
.sipla-styled input[type="password"], 
.sipla-styled input[type="email"], 
.sipla-styled input[type="search"], 
.sipla-styled input[type="tel"], 
.sipla-styled input[type="url"], 
.sipla-styled input[type="number"], 
.sipla-styled input[type="date"], 
.sipla-styled input[type="datetime-local"], 
.sipla-styled input[type="month"], 
.sipla-styled input[type="week"], 
.sipla-styled input[type="time"],
.sipla-styled select {
	--fill-available: calc(100% - 2em - 2px - 1em);
	font-size: 1em;
	outline: none;
	padding: 0.7em 1em;
	border-width: 1px;
	border-radius: 0.4em;
	margin:0.2em;
	box-shadow: inset 0 0 0.4em 0 var(--sipla-shadow);
	transition-duration: 0.3s;
	transition-property: border-color, box-shadow;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	cursor: text;
} 
.sipla-styled input[type="number"], 
.sipla-styled input[type="date"], 
.sipla-styled input[type="datetime-local"], 
.sipla-styled input[type="month"], 
.sipla-styled input[type="week"], 
.sipla-styled input[type="time"], 
.sipla-styled input[type="tel"], 
.sipla-styled input[type="password"] {
	font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}
.sipla-styled select {
	cursor: pointer;
}
.sipla-styled input[type="text"].fill-width, 
.sipla-styled input[type="password"].fill-width, 
.sipla-styled input[type="email"].fill-width, 
.sipla-styled input[type="search"].fill-width, 
.sipla-styled input[type="tel"].fill-width, 
.sipla-styled input[type="url"].fill-width, 
.sipla-styled input[type="number"].fill-width, 
.sipla-styled input[type="date"].fill-width, 
.sipla-styled input[type="datetime-local"].fill-width, 
.sipla-styled input[type="month"].fill-width, 
.sipla-styled input[type="week"].fill-width, 
.sipla-styled input[type="time"].fill-width,
.sipla-styled select.fill-width {
	width: var(--fill-available);
}
.sipla-styled input[type="text"]:focus-visible, 
.sipla-styled input[type="password"]:focus-visible, 
.sipla-styled input[type="email"]:focus-visible, 
.sipla-styled input[type="search"]:focus-visible, 
.sipla-styled input[type="tel"]:focus-visible, 
.sipla-styled input[type="url"]:focus-visible, 
.sipla-styled input[type="number"]:focus-visible, 
.sipla-styled input[type="date"]:focus-visible, 
.sipla-styled input[type="datetime-local"]:focus-visible, 
.sipla-styled input[type="month"]:focus-visible, 
.sipla-styled input[type="week"]:focus-visible, 
.sipla-styled input[type="time"]:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0.4em 0 var(--sipla-blue);
	border-color: var(--sipla-blue);
}


/* Buttons */
.sipla-styled button, 
.sipla-styled input[type="button"], 
.sipla-styled input[type="reset"], 
.sipla-styled input[type="submit"] {
	height: 2.5em;
	padding: 0.6em 1.2em;
	font-size: 1em;
    margin: 0.2em;
	min-width: 5em;
    border: 1px solid var(--sipla-black);
    color: var(--sipla-black);
    font-weight: bold;
    border-radius: 0.2em;
    cursor: pointer;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-color: var(--sipla-gray);
	--background-color: var(--sipla-white);
	background: linear-gradient(0deg, var(--sipla-light-shadow), transparent), var(--background-color);
}
.sipla-styled button.light-text, 
.sipla-styled button.primary, 
.sipla-styled button.danger,
.sipla-styled input[type="button"].light-text,
.sipla-styled input[type="button"].primary,
.sipla-styled input[type="button"].danger {
	text-shadow: 0 0 4px #00000060, 0 0 2px var(--sipla-black);
	color: var(--sipla-white);
}
.sipla-styled button:hover,
.sipla-styled input[type="button"]:hover, 
.sipla-styled input[type="reset"]:hover, 
.sipla-styled input[type="submit"]:hover {
	filter: brightness(90%);
	box-shadow: 0px 0px 2px 1px var(--sipla-shadow);
}
.sipla-styled button:active,
.sipla-styled input[type="button"]:active, 
.sipla-styled input[type="reset"]:active, 
.sipla-styled input[type="submit"]:active {
	box-shadow: 0 0 0 0 black;
    box-shadow: inset 0px 0px 6px 2px var(--sipla-light-shadow);
	filter: none;
}
.sipla-styled button.success,
.sipla-styled input[type="button"].success {
	--background-color:var(--sipla-green);
}
.sipla-styled button.warning,
.sipla-styled input[type="button"].warning {
	--background-color:var(--sipla-yellow);
}
.sipla-styled button.danger,
.sipla-styled input[type="button"].danger {
	--background-color:var(--sipla-red);
}
.sipla-styled button.neutral,
.sipla-styled input[type="button"].neutral {
	--background-color:var(--sipla-white);
}
.sipla-styled button.simple,
.sipla-styled input[type="button"].simple {
	background: var(--background-color);
}
.sipla-styled button.primary,
.sipla-styled input[type="button"].primary {
	--background-color: var(--sipla-blue);
}
.sipla-styled button.secondary,
.sipla-styled input[type="button"].secondary {
	--background-color: var(--sipla-light-blue);
}

.sipla-styled button:disabled,
.sipla-styled input[type="button"]:disabled {
	filter: grayscale(0.5) brightness(1.5);
	color: #555;
	text-shadow: none;
	cursor: default;
	box-shadow: none;
}
.sipla-styled button.light-text:disabled, 
.sipla-styled button.primary:disabled, 
.sipla-styled button.danger:disabled,
.sipla-styled input[type="button"].light-text:disabled,
.sipla-styled input[type="button"].primary:disabled,
.sipla-styled input[type="button"].danger:disabled {
	color: #aaa;
}

/* Checkboxen */
.sipla-styled input[type="checkbox"],
.sipla-styled input[type="radio"] {
	font-size: 1em;
	width: 1.1em;
	height: 1.1em;
	margin: 0.5em;
	cursor: pointer;
}
.sipla-styled input[type="checkbox"] + label,
.sipla-styled input[type="radio"] + label {
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	transform: translate(0, -0.5em);
	margin-right: 0.5em;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	display: inline-block;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	cursor: pointer;
}

/* Andere */
.sipla-styled input[type="range"] {
	cursor: grab;
	margin: 0.2em;
}
.sipla-styled input[type="range"]:active {
	cursor: grabbing;
}