@mixin align-full {
	.wp-block-button {
		flex: 1;
		margin: unset;


		.wp-block-button__link {
			width: 100%;
		}
	}
}

@mixin not-align-full {
	.wp-block-button {
		flex: unset;
	}
}

@mixin align-left($device) {
	justify-content: flex-start;
	&.collapse-#{$device} {
		align-items: start;
	}
}

@mixin align-center($device) {
	justify-content: center;
	&.collapse-#{$device} {
		align-items: center;
	}
}

@mixin align-right($device) {
	justify-content: flex-end;
	&.collapse-#{$device} {
		align-items: end;
	}
}

$device-map: (desktop: '1200px', tablet: '960px', mobile: '600px');
@each $device, $media-query in $device-map {
	@if ($device == 'desktop') {
		.wp-block-themeisle-blocks-button-group {
			display: flex;
			flex-wrap: wrap;

			&.collapse-#{$device} {
				flex-direction: column;
			}

			&.align-left-#{$device}, &.align-left {
				@include align-left($device);
			}

			&.align-center-#{$device}, &.align-center {
				@include align-center($device);
			}

			&.align-right-#{$device}, &.align-right {
				@include align-right($device);
			}

			&.align-full-#{$device} {
				@include align-full;
			}
		}
	} @else {
		@media (max-width: #{$media-query}) {
			.wp-block-themeisle-blocks-button-group {
				flex-wrap: wrap;

				&.collapse-#{$device} {
					flex-direction: column;
				}

				&.align-left-#{$device} {
					@include not-align-full;
					@include align-left($device);
				}

				&.align-center-#{$device} {
					@include not-align-full;
					@include align-center($device);
				}

				&.align-right-#{$device} {
					@include not-align-full;
					@include align-right($device);
				}

				&.align-full-#{$device} {
					@include align-full;
				}
			}
		}
	}
}

@mixin padding-and-font-size {
	padding: var(--padding);
	font-size: var(--font-size);

	@media ( min-width: 600px ) and ( max-width: 960px ) {
		padding: var(--padding-tablet);
	}

	@media ( max-width: 600px ) {
		padding: var(--padding-mobile);
	}
}

.wp-block-themeisle-blocks-button-group {
	--padding: 15px 30px;
	--padding-tablet: var(--padding);
	--padding-mobile: var(--padding-tablet);
	--font-size: var( --btnfs, var(--bodyfontsize, 15px) );
	--spacing: 20px;

	gap: var(--spacing);
	
	.wp-block-themeisle-blocks-button {
		display: flex;
		justify-content: center;
		align-items: center;

		&:is(.wp-block-button) :is(div, span, a).wp-block-button__link {
			padding: var(--padding);
			font-size: var(--font-size);

			@media ( min-width: 600px ) and ( max-width: 960px ) {
				padding: var(--padding-tablet);
			}

			@media ( max-width: 600px ) {
				padding: var(--padding-mobile);
			}		
		}

		&.wp-block-button {
			&:is(.is-style-plain) :is(.wp-block-button__link, .wp-block-button__link:hover) {
				background: transparent;
				color: #000;
				border-width: 0px;
				padding: 0px;
				box-shadow: unset;
			}

			&:is(.is-style-outline) .wp-block-button__link {
				background: transparent;
				color: #111111;
				border: 1px solid #111111;

				&:hover {
					background: #111111;
					color: #ffffff;
				}
			}
		}

		
		svg {
			fill: currentColor;
			display: inline-block;
			width: 16px;
	
			&.margin-left {
				margin-left: 10px;
			}
	
			&.margin-right {
				margin-right: 10px;
			}
	
			path {
				transition: none;
			}
		}
	
		i {
			&.margin-left {
				margin-left: 10px;
			}
	
			&.margin-right {
				margin-right: 10px;
			}
		}
	}	
}

