// Lade deine Design Tokens
@use '../scss/_variables.scss' as *;

.adpresso-select-container {
	position: relative;
	width: 100%;
}

.adpresso-select-button, .wp-core-ui .adpresso-select-button {
	position: relative;
	width: 100%;
	cursor: pointer;
	background-color: $color-white;
	padding: $space-2 $space-3;
	border: $border-small solid $color-icon;
	border-radius: $radius-sm;
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: $font-size;

	&:focus {
		outline: 2px solid $color-primary;
		outline-offset: 2px;
	}

	&.adpresso-color-accent-invert {
		&:focus {
			outline-color: $color-accent;
		}
	}
}

.adpresso-data-table {
	.adpresso-select-button, .wp-core-ui .adpresso-select-button {
		font-size: 1em;
		margin-top: calc(-0.8em / $font-size-rate);
	}

	.adpresso-select-options {
		font-size: 1em;
	}
}

.adpresso-select-label {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.adpresso-select-icon {
	width: 20px;
	height: 20px;
	color: $color-icon;
	position: relative;

	&::before {
		font-family: 'dashicons', serif;
		content: "\f347";
		font-size: 1em;
		line-height: 1em;
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
	}

	&.adpresso-color-accent-invert {
		color: $color-accent;
	}
}

.adpresso-select-options {
	position: absolute;
	margin-top: 4px;
	width: 100%;
	max-height: 450px;
	overflow-y: auto;
	border-radius: $radius-sm;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 10;
	list-style: none;
	font-size: $font-size;
	background-color: $color-primary-superlight;
	padding: 0;
}

.adpresso-select-option {
	position: relative;
	cursor: pointer;
	user-select: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: calc(1em / $font-size-rate);
	border-bottom: 0.12em solid $color-primary-light;
	color: $color-text;

	&.is-active, &:hover {
		background-color: $color-primary-light;
		color: $color-text;
	}

	&.adpresso-color-accent-invert {
		&.is-active {
			background-color: $color-golden-brown-bright !important;
		}

		&:hover {
			background-color: $color-golden-brown-very-very-bright !important;
		}
	}

	&:last-of-type {
		border-bottom: none;
	}

	&[data-disabled] {
		cursor: not-allowed;
		color: $color-premium;
		background-color: $color-premium-disabled !important;
		border-color: $color-premium-border !important;

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

.adpresso-select-option-label {
	&.is-selected {
		font-weight: 400;
	}
}

.adpresso-select-option-indicator {
	width: 20px;
	height: 20px;
	color: $color-primary;
}

.adpresso-select-group-header {
	cursor: default;
	padding: 1em;
	color: $color-white;
	background-color: $color-text-light;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;

	&.is-premium {
		background-color: $color-premium !important;
		color: $color-white !important;
		.adpresso-premium-label {
			.adpresso-badge-pro {
				background-color: $color-white;
				border-color: $color-white;
				color: $color-premium;
			}
			a {
				color: $color-white;
			}
		}
	}
}

/* Optionen innerhalb einer Gruppe leicht einrücken (Optional) */
.adpresso-select-group-items .adpresso-select-option {
	padding-left: 2em;
}

.adpresso-select-options {
	&.adpresso-color-accent-invert {
		.adpresso-select-group-header {
			background-color: $color-golden-brown-light;
			color: $color-text;
		}

		.adpresso-select-option {
			border-color: $color-golden-brown-very-bright;
			background-color: $color-accent-superlight;
		}
	}
}