@use '_variables.scss' as *;
@use '_placeholders.scss' as *;
@use "sass:color";

.adpresso-input, input.adpresso-input {
	padding: $space-2 $space-3;
	background-color: $color-white;
	border: $border-small solid $color-icon;
	border-radius: $radius-sm;
	font-family: inherit;
	font-size: $font-size;
	color: $color-text;
	box-sizing: border-box;
	transition: border-color 0.2s ease-in-out;

	&:focus {
		border-color: $color-primary;
		box-shadow: none;
		outline: none;
	}

	&::placeholder {
		color: color.adjust($color-icon, $lightness: 10%);
	}

	&.adpresso-color-inactive {
		@include color-inactive;
		background-color: white;
	}

	&:disabled {
		cursor: not-allowed;
	}
}
.adpresso-hierarchy-item,
.adpresso-field-wrapper.adpresso-toggle-wrapper, .adpresso-field-wrapper .adpresso-toggle-wrapper {
	margin-bottom: 1em;

	.adpresso-toggle-control {
		display: flex;
		align-items: center;
		gap: 1em;
		color: $color-text;
	}

	.adpresso-hierarchy-label, .adpresso-premium-label {
		font-size: $font-size;
	}

	.adpresso-hierarchy-children {
		margin-left: 2.5em;
		margin-top: 1em;
		transition: opacity 0.3s ease;

		&.is-locked {
			opacity: 0.5;
			pointer-events: none;
			user-select: none;
		}
	}

	&:last-child {
		margin-bottom: 0;
	}

	.adpresso-toggle-control {

	}

	.adpresso-toggle-label {
		margin-bottom: 0;
		cursor: pointer;
		font-size: $font-size;

		&+.adpresso-manual-link {
			font-size: $font-size;
		}
	}

	.adpresso-toggle-switch {
		position: relative;
		display: inline-block;
		width: 54px;
		height: 30px;
		flex-shrink: 0;
		cursor: pointer;
	}

	.adpresso-toggle-input {
		opacity: 0;
		width: 0;
		height: 0;

		&:checked + .adpresso-toggle-slider {
			background-color: $color-text;
			border-color: $color-text;
		}

		&:checked + .adpresso-toggle-slider:before {
			transform: translateX(18px);
			background-color: $color-white;
			border-color: $color-white;
			height: 22px;
			width: 22px;
			bottom: 3px;
		}

		&:focus + .adpresso-toggle-slider {
			box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-icon;
		}

		&:checked:focus + .adpresso-toggle-slider {
			box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-text;
		}
	}

	.adpresso-toggle-slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: $color-white;
		border: 0.12em solid $color-icon;
		border-radius: 2em;
		transition: .2s;

		&:before {
			position: absolute;
			content: "";
			left: 7px;
			width: 16px;
			height: 16px;
			bottom: 6px;
			background-color: $color-icon;
			border-radius: 50%;
			transition: .2s;
		}
	}

	&.adpresso-highlighted {
		.adpresso-toggle-label {
			color: $color-accent2;
		}

		.adpresso-toggle-input + .adpresso-toggle-slider {
			background-color: $color-white;
			border-color: $color-accent2;

			&:before {
				background-color: $color-accent2;
			}
		}

		.adpresso-toggle-input:checked + .adpresso-toggle-slider {
			background-color: $color-accent2;
			border-color: $color-accent2;

			&:before {
				background-color: $color-white;
			}
		}


		.adpresso-toggle-input {
			&:focus + .adpresso-toggle-slider {
				box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-accent2;
			}

			&:checked:focus + .adpresso-toggle-slider {
				box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-accent2;
			}
		}
	}

	&.is-premium {
		.adpresso-toggle-switch, .adpresso-toggle-slider, .adpresso-toggle-wrapper {
			pointer-events: none;
			cursor: not-allowed;
		}

		.adpresso-tooltip-wrapper {
			cursor: pointer;
			pointer-events: all;

			.adpresso-tooltip {
				color: $color-premium;
			}
		}

		.adpresso-hierarchy-label {
			color: $color-premium;
		}

		.adpresso-toggle-slider {
			background-color: $color-premium !important;
			border-color: $color-premium !important;

			&:before {
				background-color: $color-premium-disabled !important;
				border-color: $color-premium-disabled !important;
			}
		}
	}
}

.adpresso-checkbox-group-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	width: 100%;
}

.adpresso-checkbox-button {
	display: inline-flex;
	align-items: center;
	padding: $space-2 2.5em $space-2 0.5em;
	border-radius: $space-2;
	border: 0.12em solid $color-text;
	background-color: $color-white;
	color: $color-text;
	cursor: pointer;
	font-weight: 500;
	font-size: $font-size;
	transition: all 0.2s ease;
	user-select: none;

	.adpresso-checkbox-input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}

	svg {
		width: 0;
		height: 0;
		margin-right: 2em;
	}

	.dashicons {
		font-size: 0;
		width: 13px;
		height: 13px;
		margin-right: 13px;
	}

	&:hover {
		background-color: #f0f0f0;
	}


	&.adpresso-color-primary {
		background-color: $color-white;
		color: $color-primary;
		border-color: $color-primary;

		&:focus-within {
			box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary;
		}

		&:hover {
			background-color: $color-primary-superlight;
		}
	}

	&.adpresso-color-graph-one {
		@include color-graph-one-invert;

		&:focus-within {
			box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-graph-one;
		}

		&:hover {
			background-color: $color-graph-one-light;
		}
	}

	&.adpresso-color-graph-two {
		@include color-graph-two-invert;

		&:focus-within {
			box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-graph-two;
		}

		&:hover {
			background-color: $color-graph-two-light;
		}
	}

	&.adpresso-color-graph-three {
		@include color-graph-three-invert;

		&:focus-within {
			box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-graph-three;
		}

		&:hover {
			background-color: $color-graph-three-light;
		}
	}

	&.adpresso-color-graph-four {
		@include color-graph-four-invert;

		&:focus-within {
			box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-graph-four;
		}

		&:hover {
			background-color: $color-graph-four-light;
		}
	}

	&.adpresso-color-graph-five {
		@include color-graph-five-invert;

		&:focus-within {
			box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-graph-five;
		}

		&:hover {
			background-color: $color-graph-five-light;
		}
	}

	&.is-checked {
		background-color: $color-text-active;
		border-color: $color-text-active;
		color: $color-white;
		padding-left: $space-4;
		padding-right: 2em;

		svg {
			width: 1em;
			height: 1em;
			color: white;
			margin-right: 1em;
		}

		// Icon anzeigen
		.dashicons {
			font-size: 16px;
			color: $color-white;
		}

		&:hover {
			background-color: $color-text;
		}

		&.adpresso-color-primary {
			@include color-active;

			&:hover {
				background-color: $color-teal-dark;
				color: white;
			}
		}

		&.adpresso-color-graph-one {
			@include color-graph-one;

			&:hover {
				background-color: $color-graph-one-dark;
				color: white;
			}
		}

		&.adpresso-color-graph-two {
			@include color-graph-two;

			&:hover {
				background-color: $color-graph-two-dark;
				color: white;
			}
		}

		&.adpresso-color-graph-three {
			@include color-graph-three;

			&:hover {
				background-color: $color-graph-three-dark;
				color: white;
			}
		}

		&.adpresso-color-graph-four {
			@include color-graph-four;

			&:hover {
				background-color: $color-graph-four-dark;
				color: white;
			}
		}

		&.adpresso-color-graph-five {
			@include color-graph-five;

			&:hover {
				background-color: $color-graph-five-dark;
				color: white;
			}
		}
	}

	&:focus-within {
		box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-text;
	}

	&.is-disabled {
		cursor: not-allowed;
		border-color: $color-icon;
		color: $color-icon;
	}
}

.adpresso-field-control.is-premium {
	.adpresso-checkbox-button {
		cursor: not-allowed;
		pointer-events: none;
		background-color: $color-premium-disabled;
		color: $color-premium;
		border-color: $color-premium;

		// Hover deaktivieren
		&:hover {
			background-color: $color-premium-disabled;
		}

		// Focus deaktivieren
		&:focus,
		&:focus-visible {
			box-shadow: none;
		}

		&.is-checked {
			background-color: $color-premium;
			border-color: $color-premium;
			color: $color-white;

			svg {
				display: block;
			}
		}
	}
}

textarea.adpresso-input {
	resize: vertical;
	min-height: 120px;

	&.is-premium {
		border-color: $color-premium !important;
		background-color: $color-premium-disabled !important;
	}

	&:disabled {
		cursor: not-allowed !important;
	}
}

.adpresso-field-control.is-premium {
	textarea.adpresso-input {
		background-color: $color-premium-disabled;
	}
}