/*
//////////////////////////////////////////////////////////////////////////////////
// 																				//
// COPYRIGHT:  NICK VAN KOLLENBURG							 					//
// nickvankollenburg@gmail.com													//
// 																				//
//////////////////////////////////////////////////////////////////////////////////
*/


/* Button icons
-------------------------------------------------------------- */
div.button-icon {
	cursor: pointer;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	
	background-color: rgb(var(--color-secondary));
	background-repeat: no-repeat;
	background-size: contain;
	
	border-radius: var(--border-radius);
	
	opacity: var(--button-opacity-hover);
	
	width: var(--button-icon-width);
	height: var(--button-icon-height);
	
	transition:
		background-color 0.2s ease-in-out,
		opacity 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}
div.button-icon-deactive {
	pointer-events: none;
	opacity: 0.3;
}
div.button-icon:hover {
	box-shadow: 0 0px 10px rgb(var(--color-accent) / 0.2);
	opacity: 1;
}
div.button-icon-submit {
	background-color: rgb(var(--button-color-background-submit));
}
div.button-add {
	background-image: url(../images/icons/buttons/add.svg);	
}
div.button-back {
	background-image: url(../images/icons/buttons/back.svg);
}
div.button-up {
	background-image: url(../images/icons/buttons/up.svg);
}
div.button-down {
	background-image: url(../images/icons/buttons/down.svg);
}
div.button-delete {
	background-image: url(../images/icons/buttons/delete.svg);
}
div.button-modify {
	background-image: url(../images/icons/buttons/modify.svg);
}
div.button-editor {
	background-image: url(../images/icons/buttons/editor.svg);
}


/* Buttons
-------------------------------------------------------------- */
.button,
input.btn-prompt-close,
input.btn-prompt-close-alert,
input.btn-prompt-action {
	cursor: pointer;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	
	font-family: var(--button-font);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	letter-spacing: var(--button-letter-spacing);
	
	text-decoration: none;
	text-transform: uppercase;
	
	color: rgb(var(--button-color));
	background-color: rgb(var(--button-color-background));
	
	border: 0px;
	border-radius: var(--button-border-radius);
	
	display: inline-block;
	padding: 10px 20px;
	opacity: 1;
	
	text-decoration: none;
	
	transition:
		opacity 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}
input.btn-prompt-action,
input.btn-prompt-close,
input.btn-prompt-close-alert {
	opacity: 1;
}
div.button {
	pointer-events: none;
	opacity: 0.3;
}
.submit-hidden {
	position: absolute;
	visibility: hidden;
}
.button:hover,
input.btn-prompt-action:hover,
input.btn-prompt-close:hover,
input.btn-prompt-close-alert:hover {
	box-shadow: 0 0px 10px rgb(var(--color-accent) / 0.2);
	opacity: var(--button-opacity-hover);
	
	text-decoration: none;
}

input.btn-prompt-action:hover,
input.btn-prompt-close:hover,
input.btn-prompt-close-alert:hover {
	opacity: var(--button-opacity-hover);
}
.button-submit,
input.btn-prompt-action {
	color: rgb(var(--button-color-submit));
	background-color: rgb(var(--button-color-background-submit));
}

input.btn-prompt-close-alert {
	color: rgb(var(--button-color));
	background-color: rgb(var(--button-color-background));
}
.button-opacity {
	opacity: var(--button-opacity-hover);
}
.button-opacity:hover {
	opacity: 1;
}
.button-link-border {
	color: rgb(var(--color-tertiary));
	border: 2px solid rgb(var(--button-color-background));
	background: transparent;
}


/* Inputs
-------------------------------------------------------------- */
.input {
	font-family: var(--input-font);
	font-size: var(--input-font-size);
	font-weight: var(--input-font-weight);
	
	color: rgb(var(--color-input-text));
	background-color: var(--color-input-background);
	
	border: var(--input-border);
	border-radius: var(--input-border-radius);
	
	
	width: var(--input-width);
	padding: var(--input-padding);
	
	opacity: var(--input-opacity);
	
	transition: all 0.25s ease-in-out;
}
.input.select {
	cursor: pointer;
	
	width: calc(var(--input-width) + 12px);
	transition: all 0.3s ease-in-out;
}
.input:not(:disabled):not(.select):hover {
	opacity: var(--input-opacity-hover);
	color: rgb(var(--color-input-text-hover));
	background-color: var(--color-input-background-hover);
	box-shadow: var(--input-box-shadow-hover);
	border: var(--input-border-hover);
	transform: scale(1.02);
}
.input:not(:disabled):not(.select):focus {
	opacity: var(--input-opacity-active);
	color: rgb(var(--color-input-text-active));
	background-color: var(--color-input-background-active);
	box-shadow: var(--input-box-shadow-active);
	border: var(--input-border-active);
	transform: scale(1.02);
}
.input.select:hover {
	opacity: var(--input-opacity-hover);
	color: rgb(var(--color-input-text-hover));
	background-color: var(--color-input-background-select-hover);
	box-shadow: var(--input-box-shadow-hover);
	border: var(--input-border-hover);
	transform: scale(1.02);
}
.input.select:focus {
	opacity: var(--input-opacity-hover);
	color: rgb(var(--color-input-text-hover));
	background-color: var(--color-input-background-select-hover);
	box-shadow: var(--input-box-shadow-hover);
	border: var(--input-border-hover);
	transform: scale(1.02);
}
.input-small {
	font-size: var(--input-font-size-small);
}

.enlarge:not(:disabled):hover {
	transform: scale(1.02);
}
.enlarge:not(:disabled):focus {
	transform: scale(1.02);
}

input.text {

}
input.password {

}
textarea.textarea {
	resize: none;
}
select.select {

}


/** Checkbox */
div.check-box {
	width: fit-content;
	
	display: inline-flex;
	justify-content: start;
	align-items: center;
	
	transition: all 0.2s ease-in-out;
	
	text-wrap: nowrap;
}
div.check-box:hover {
	opacity: 0.7;
}
div.check-box-disabled {
	pointer-events:none;
	
	opacity: 0.5;
}
div.check-box .check-box-field {
	cursor: pointer;
	
	background: transparent;
	box-shadow: var(--checkbox-shadow);
	
	border: var(--checkbox-border);
	border-radius: var(--checkbox-border-radius);
	
	width: 15px;
	height: 15px;
}
div.check-box .check-box-field span.check-box-span {
	display: block;
	position: relative;
	
	top: 0.2em;
	left: 2px;
	
	width: calc(100% - 3px);
	height: calc(100% - 3px);
}
div.check-box .check-box-checked span {
	background: var(--checkbox-background);
	background-repeat: no-repeat;
	background-size: contain;
}
div.check-box .check-label {
	cursor: pointer;
	padding: 0px 7px 0px 5px;
}
div.check-box .check-label:focus {
	opacity: 0.7;
}


/** Range Slider Fields */
div.range-outline {
	width: 100%;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
div.range-fields {
	display: flex;
	justify-content: space-between;
	align-items: end;
	
	width: 100%;
	
	font-size: 11px;
	
	color: var(--color-primary);
}
div.range-field-min {
	font-weight: var(--font-weight-bold);
	color: rgb(var(--color-text) / 0.8);
}
div.range-field-max {
	font-weight: var(--font-weight-bold);
	color: rgb(var(--color-text) / 0.8);
}
div.range-field-value {
	font-size: 12px;
	
	font-weight: var(--font-weight-bold);
	border-radius: 50%;
	border: 1px solid rgb(var(--color-white));
	
	background-color: rgb(var(--color-secondary));
	color: rgb(var(--color-white));
	
	width: 25px;
	height: 25px;
	
	margin-top: 7px;
	margin-bottom: 9px;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

/** Range Slider */
input.range {
	-webkit-appearance: none;
	appearance: none;

	flex: 1;
	height: 8px;
	
	width: 100%;

	border-radius: 999px;
	background: rgb(var(--color-white));
	border: 1px solid rgb(var(--button-color-background-submit));

	outline: none;
	cursor: pointer;
}

input.range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;

	width: 20px;
	height: 20px;

	border-radius: 50%;
	border: 1px solid rgb(var(--color-white));
	background: rgb(var(--button-color-background-submit));

	box-shadow: var(--shadow-light);
	
	cursor: pointer;

	transition:
		transform 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}

input.range::-webkit-slider-thumb:hover {
	transform: scale(1.15);
	box-shadow: var(--shadow);
}

input.range::-moz-range-thumb {
	width: 20px;
	height: 20px;

	border-radius: 50%;
	border: 1px solid rgb(var(--color-white));
	background: rgb(var(--button-color-background-submit));

	box-shadow: var(--shadow-light);
	
	cursor: pointer;

	transition:
		transform 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}

input.range::-moz-range-thumb:hover {
	transform: scale(1.15);
	box-shadow: var(--shadow);
}

/** Toggle Switch */
div.switch {
	width: 100%;
}
div.switch-disabled {
	pointer-events:none;
	opacity: 0.3;
}
.switch-inline {
	--switch-button-size: calc(var(--switch-height) - (var(--switch-padding) * 2));
	--switch-move: calc(var(--switch-width) - var(--switch-button-size) - (var(--switch-padding) * 2));
	--switch-speed: 0.2s ease-in-out;

	position: relative;
	display: inline-block;

	width: var(--switch-width);
	height: var(--switch-height);
}
.switch-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.switch-slider {
	position: absolute;
	inset: 0;

	cursor: pointer;
	border-radius: 999px;

	background-color: rgb(var(--color-primary) / 0.7);
	transition:
		background-color var(--switch-speed),
		box-shadow var(--switch-speed);
}
.switch-slider::before {
	content: "";

	position: absolute;
	left: var(--switch-padding);
	top: var(--switch-padding);

	width: var(--switch-button-size);
	height: var(--switch-button-size);

	border-radius: 50%;
	background-color: rgb(var(--color-white));

	transition:
		transform var(--switch-speed);
}
.switch-input:checked + .switch-slider {
	background-color: rgb(var(--color-secondary));
}

.switch-input:checked + .switch-slider::before {
	transform: translateX(var(--switch-move));
}
.switch-input:focus-visible + .switch-slider {
	box-shadow: 0 0 0 2px rgb(var(--color-secondary) / 0.35);
}