@use '_variables.scss' as *;
@use '_placeholders.scss' as *;

.adpresso-button-group {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: $font-size;

	&__button {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: $space-4;
		padding: $space-2 2.5em;
		border: 0.12em solid $color-primary;
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease;
		white-space: nowrap;
		border-radius: $space-2;
		line-height: 1.4em;
		background-color: transparent;
		color: $color-text;
		&.adpresso-color-dark {
			@include color-dark-invert;
		}

		&:first-child {
			border-radius: 1.32em .5em .5em 1.32em / 50% .5em .5em 50%
		}

		&:last-child {
			border-radius: .5em 1.32em 1.32em .5em / .5em 50% 50% .5em;
		}

		&:hover {
			background-color: $color-primary-superlight;
			&.adpresso-color-dark {
				background-color: $color-divider;
			}
		}

		svg {
			display: none;
		}

		&.is-active {
			@include color-active;
			&.adpresso-color-dark {
				@include color-dark;
			}
			border-radius: 999em;
			padding-left: $space-4;
			padding-right: 2em;

			svg {
				display: block;
			}

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

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

		&:focus, &:focus-visible {
			box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary;
			outline: none;
			&.adpresso-color-dark {
				box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-text;
			}
		}
	}
}

.adpresso-field-control.is-premium {

	.adpresso-button-group {

		&__button {

			cursor: not-allowed;
			pointer-events: none;
			// Inactive Buttons
			background-color: $color-premium-disabled;
			color: $color-premium;
			border-color: $color-premium;

			// disable Hover for inactive buttons
			&:hover {
				background-color: $color-premium-disabled;
			}

			// disable Focus for inactive buttons
			&:focus,
			&:focus-visible {
				box-shadow: none;
			}

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

				svg {
					display: block;
				}
			}

			// destructive state in premium mode
			&.is-destructive {
				background-color: $color-premium-disabled;
				border-color: $color-premium-disabled;
				color: $color-white;

				&.is-active {
					background-color: $color-premium;
					border-color: $color-premium;
				}
			}
		}
	}
}