@use 'variables.scss' as *;
@use 'mixins.scss';

// Button-Reset (for WP Components)
@mixin btn-reset {
	height: auto;
	line-height: 1;
	box-shadow: none;
}

// Color definitions.
@mixin color-accent {
	background-color: $color-accent;
	border-color: $color-accent;
	color: $color-white;
}

@mixin color-accent-invert {
	background-color: $color-white;
	border-color: $color-accent;
}

.adpresso-color-accent-invert {
	@include color-accent-invert;
}

.adpresso-color-accent {
	@include color-accent;

	&.button {
		&:hover, &:focus {
			background-color: $color-golden-brown-dark;
			border-color: $color-golden-brown-dark;
			box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-accent;
			color: $color-white;
		}
	}
}

@mixin color-active {
	background-color: $color-primary;
	border-color: $color-primary;
	color: $color-white;
}

.adpresso-color-active {
	@include color-active;
}

.adpresso-color-text-primary {
	color: $color-primary;
	&:hover {
		color: $color-teal-dark;
	}
}

@mixin color-dark {
	background-color: $color-text;
	border-color: $color-text;
	color: $color-white;
}

@mixin color-dark-invert {
	background-color: $color-white;
	border-color: $color-text;
	color: $color-text;
}

@mixin color-inactive {
	background-color: transparent;
	border-color: $color-primary;
	color: $color-primary;
}

.adpresso-color-inactive {
	@include color-inactive;
}

@mixin color-button-secondary {
	border-color: $color-icon;
	color: $color-icon;
}

.adpresso-color-button-secondary {
	@include color-button-secondary;
}

@mixin color-button-secondary-invert {
	border-color: $color-icon;
	background-color: $color-icon;
	color: $color-white;
}

.adpresso-color-button-secondary-invert {
	@include color-button-secondary-invert;
}

@mixin color-button-active {
	border-color: $color-text-active;
	color: $color-text-active;
}

.adpresso-color-button-active {
	@include color-button-active;
}

@mixin color-graph-one {
	background-color: $color-graph-one;
	border-color: $color-graph-one;
	color: $color-white;
}

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

@mixin color-graph-one-invert {
	background-color: $color-white;
	border-color: $color-graph-one;
	color: $color-graph-one;
}

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

@mixin color-graph-two {
	background-color: $color-graph-two;
	border-color: $color-graph-two;
	color: $color-white;
}

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

@mixin color-graph-two-invert {
	background-color: $color-white;
	border-color: $color-graph-two;
	color: $color-graph-two;
}

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

@mixin color-graph-three {
	background-color: $color-graph-three;
	border-color: $color-graph-three;
	color: $color-white;
}

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

@mixin color-graph-three-invert {
	background-color: $color-white;
	border-color: $color-graph-three;
	color: $color-graph-three;
}

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

@mixin color-graph-four {
	background-color: $color-graph-four;
	border-color: $color-graph-four;
	color: $color-white;
}

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

@mixin color-graph-four-invert {
	background-color: $color-white;
	border-color: $color-graph-four;
	color: $color-graph-four;
}

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

@mixin color-graph-five {
	background-color: $color-graph-five;
	border-color: $color-graph-five;
	color: $color-white;
}

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

@mixin color-graph-five-invert {
	background-color: $color-white;
	border-color: $color-graph-five;
	color: $color-graph-five;
}

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

@mixin color-placement {
	background-color: $color-primary;
	color: white;
}

.adpresso-color-placement {
	@include color-placement;
}

@mixin color-ad {
	background-color: $color-text;
	color: $color-white;
}

.adpresso-color-ad {
	@include color-ad;
}

@mixin color-group {
	background-color: $color-accent;
	color: $color-white;
}

.adpresso-color-group {
	@include color-group;
}


.adpresso-badge {
	@include mixins.flex-center;
	background-color: $color-icon;
	color: $color-white;
	padding: $space-1;
	border-radius: $radius-xs;
	line-height: 1;

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

.adpresso-badge-pro {
	background-color: $color-premium;
	color: $color-white;
	margin-left: 0.5em;
	margin-bottom: 0 !important;
}

.adpresso-btn {
	@include btn-reset;
	border-radius: $space-3;
	background-color: transparent;
	color: $color-icon;
	border: calc(0.12em * $font-size-rate) solid $color-icon;
	cursor: pointer;

	&:has(.adpresso-btn-icon) {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 0.5em;
	}

	&.adpresso-btn-action {
		padding: $space-1 $space-3;
		font-size: $font-size;
		border-radius: $space-2;
	}

	&.adpresso-color-accent {
		@include color-accent;
	}

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

	&.adpresso-color-inactive {
		@include color-inactive;
	}

	&.adpresso-color-destructive {
		background-color: $color-accent2;
		border-color: $color-accent2;
		color: $color-white;
	}

	&.adpresso-color-destructive-invert {
		background-color: transparent;
		border-color: $color-accent2;
		color: $color-accent2;
	}

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

	&.adpresso-color-premium-invert {
		background-color: transparent;
		 border-color: $color-premium;
		 color: $color-premium;
		&.adpresso-btn-link {
			border-color: transparent;
		}
	}

	&.adpresso-color-secondary {
		@include color-button-secondary;
	}

	&.adpresso-color-secondary-invert {
		@include color-button-secondary-invert;
	}

	&.adpresso-color-button-active {
		@include color-button-active;
	}

	//&.adpresso-color-button-active-invert {
	//	@include color-button-button-active-invert;
	//}

	&.adpresso-btn-link {
		background-color: transparent;
		border: none;
		padding: 0;
		margin: 0;
	}

	&:disabled {
		background-color: $color-divider;
		border-color: $color-divider;
		color: $color-white;
		cursor: not-allowed;
	}
}

@mixin square-btn {
	border-radius: $space-3;
	background-color: $color-icon;
	color: $color-white;
	padding: 0.8em;
	border: $border-md solid $color-icon;
	height: auto;
	min-height: 2em;
	cursor: pointer;

	.dashicons {
		font-size: 2em;
		line-height: 1;
		height: auto;
		width: auto;
		padding: 0;
	}

	&:hover:not(:disabled), &:active, &:focus {
		background-color: $color-text-grey;
		color: $color-white;
		border-color: $color-text-grey;
		box-shadow: none;
	}

	&:disabled {
		background-color: $color-divider;
		border-color: $color-divider;
		color: $color-white;
		cursor: not-allowed;
	}
}

.adpresso-square-btn, .adpresso-square-btn.is-primary {
	@include square-btn;

	.adpresso-btn-icon {
		> span, > svg {
			display: block;
		}
	}
}

// Badge/Pill Grundform
@mixin pill {
	@include mixins.flex-center;
	border-radius: $radius-pill;
	line-height: 1;
}

.adpresso-pill {
	@include pill;

	&__action {
		all: unset; /* Admin-Button-Styles killen */
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.75em;
		background: $color-icon;
		color: $color-white;

		/* gleiche Höhe wie links */
		aspect-ratio: 1 / 1;
	}

	&__count {
		padding: 0.75em;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

// Umrandeter Chip test asd
@mixin chip {
	@include mixins.flex-center;
	gap: $space-2;
	padding: 1em;
	border-radius: $radius-sm;
	border: $border-small solid $color-icon;
	line-height: 1;
	background-color: transparent;
	&:focus-within {
		outline: 1px solid $color-primary;
		border-color: $color-primary;
	}
}

.adpresso-chip {
	@include chip;

	&.adpresso-color-active {
		border-color: $color-primary;
	}
}


/** Variable für Default-Border-Radius, die dann überschrieben wird */

/**
	Pill für:
	- Aktionsleiste Modal aktiv
		BG: dunkelblau, F: weiß
	- Buttonauswahl aktiv Content-Type
		BG: dunkelblau, F: weiß
	- Screen Options, Header-Buttons
		BG: weiß, BR: Light-Grey, F: Light-Grey
	- global Header Search
		BG: weiß, BR: Schwarz, F: Schwarz
	- All(AND) / ANY(OR) Buttons Condition Builder Header aktiv
		BG: dunkelblau, F: weiß
	- AND/OR zwischen Conditions
		BG: Light-Orange, F: schwarz, BR: Orange
	- AND/OR zwischen Condition-Groups
		BG: Light-blau, F: schwarz, BR: blau/dunkelblau
	- Scheduling Auswahl-Buttons Now/Scheduled
		BG: dunkelblau, F: weiß
	- Tab Counts
		BG: weiß, BR: Light-Grey, F: Light-Grey
		aktiv: BG: weiß, BR: Schwarz, F: Schwarz

	Teil: Border-Radius, Line-Height
	Individuell: Padding

	dann brauchen wir noch %pill-right und %pill-left, die die jeweils andere Seite mit default radius überschreiben
 */

%color-active {
	background-color: $color-primary;
	color: $color-white;
}

%color-button-secondary {
	border: solid 0.2em $color-icon;
	color: $color-icon;
}

%color-button-active {
	border: solid 0.2em $color-text-active;
	color: $color-text-active;
}

// Popover-Karte
%card-popover {
	border-radius: $radius-sm;
	border: $border-small solid $color-primary;
	padding: $space-4;
	background-color: $color-primary-superlight;
}

.adpresso-btn-close, .adpresso-btn-remove {
	width: 1.5em;
	height: 1.5em;
	padding: 0.25em;
	border-radius: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.adpresso-btn[data-disabled] {
	cursor: not-allowed;
	&:not(.adpresso-color-premium, .adpresso-color-premium-invert) {
		//filter: grayscale(100%);
		//opacity: 0.45;
	}
}

.adpresso-card {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1em;
	border-radius: 0.5em;
	width: 100%;
	text-align: left;
	transition: all 0.2s ease;
	cursor: pointer;
	border: 0.12em solid $color-accent;
	background-color: white;

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

	&.is-active {
		background-color: $color-accent;

		.adpresso-card__title, .adpresso-card__meta, .dashicons-arrow-right-alt2 {
			color: $color-white;
		}
	}

	&.is-assigned {
		background-color: $color-accent-superlight;
		border-color: $color-accent;
	}

	&.is-disabled {
		background-color: $color-divider;
		border-color: $color-icon;
		color: $color-icon;
		cursor: default;
	}

	&__title {
		font-weight: 600;
	}

	&__meta {
		color: $color-text-active;
	}

	&__main, &__main-clickable {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		gap: 1em;
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		text-align: left;
		cursor: pointer;
	}

	.dashicons-arrow-right-alt2 {
		color: $color-icon;
		font-size: 2em;
	}
}