.supt-button-double {
	display: inline-flex;
	gap: $spacing-2;

	padding: 10px 8px 8px 10px;
	border-radius: 9999px;
	background-color: $color-grey-background;
	box-shadow:
		8px 8px 16px 0px $color-grey-1,
		-8px -8px 16px 0px $color-white;

	/* Remove the wrapper from the buttons (as it comes from the button-double component now) */
	.supt-button__wrapper {
		padding: 0;
		background: none !important;
		box-shadow: none !important;
	}

	.supt-button:first-child {
		/* .supt-button__mask {
			top: 0;
			left: 0;
		} */
	}

	&.-light {
		/* Primary button for Light variant */
		.supt-button:first-child {
			.supt-button__inner {
				box-shadow: none;
				background-color: $color-main;
				transition: background-color $transition-fast;
			}
			.supt-button__title,
			.supt-button__icon {
				color: $color-white;
			}
			.supt-button__mask {
				/* --supt-button-mask-color: $color-white; */
				&__inner {
					background-color: $color-main;
					transition: background-color $transition-fast;
				}
			}

			&:hover,
			&:focus-within {
				.supt-button__inner {
					background-color: $color-white;
					box-shadow:
						-1px -1px 0px 0px $color-white inset,
						-2px -2px 2px 0px $color-grey-2 inset,
						-1px -1px 0px 0px $color-white,
						-2px -2px 2px 0px $color-grey-2;
				}
				.supt-button__title,
				.supt-button__icon {
					color: $color-main;
				}
				.supt-button__mask {
					&__inner {
						background-color: $color-white;
					}
				}
			}
			&:focus-within {
				.supt-button__title,
				.supt-button__icon {
					color: $color-medium;
				}
				.supt-button__mask {
					&__inner {
						inset: 2px;
					}
				}
			}
		}
	}

	&.-dark {
		background-color: $color-medium;

		box-shadow:
			8px 8px 16px 0px rgba(102, 0, 14, 0.6),
			-8px -8px 16px 0px rgba(233, 53, 89, 0.4);

		/* Primary button for Dark variant */
		.supt-button:first-child {
			top: -1px;

			.supt-button__inner {
				background-color: $color-main;
				box-shadow:
					8px 8px 16px 0px rgba(102, 0, 14, 0.6),
					-8px -8px 16px 0px rgba(233, 53, 89, 0.4);

				transition:
					box-shadow $transition-fast,
					background-color $transition-fast;
			}
			.supt-button__mask {
				&__inner {
					background-color: $color-main;
					transition:
						box-shadow $transition-fast,
						background-color $transition-fast;
				}
			}

			&:hover,
			&:focus-within {
				.supt-button__inner {
					background-color: $color-medium;
					/* box-shadow: none; */
					box-shadow:
						-1px -1px 0px 0px #eb2f54 inset,
						-2px -2px 2px 0px rgb(63 0 11 / 80%) inset,
						-1px -1px 0px 0px #eb2f54,
						-2px -2px 2px 0px rgb(102 0 14 / 80%);
				}
				.supt-button__mask {
					&__inner {
						background-color: $color-medium;

						transition:
							box-shadow $transition-fast 0.47s,
							background-color $transition-fast;
					}
				}
			}
		}

		.supt-button:last-child {
			.supt-button__wrapper {
				box-shadow: none;
			}
		}
	}
}