@import 'style';

@mixin align-full {
	.block-editor-inner-blocks {
		width: 100%;
	}
}

@mixin not-align-full {
	.block-editor-inner-blocks {
		width: auto;
	}
}

.wp-block-themeisle-blocks-button-group {
	--spacing: 20px;

	flex-wrap: wrap;
	
	.block-editor-block-list__layout {
		gap: var(--spacing);
	}

	&.collapse {
		.block-editor-block-list__layout {
			flex-direction: column;
		}
	}

	.block-list-appender {
		display: inline-block;
		vertical-align: middle;
	}

	.block-editor-block-list__layout {
		display: flex;
	}

	> .block-editor-inner-blocks {
		> .block-editor-block-list__layout {
			> .block-list-appender {
				position: relative;
				align-self: center;
			}
		}
	}

	.wp-block-button__link {
		display: flex;
		justify-content: center;

		.fab, .fas, .far {
			line-height: unset;
		}
	}
}

.wp-block-themeisle-blocks-button {
	display: inline-block;
	width: auto;
	margin-right: 8px;
	margin: 0;

	&:focus-within {
		box-shadow: 0 0 0 1px #fff,0 0 0 3px #00a0d2;
	}

	svg {
		fill: currentColor;
		width: 16px;

		&.margin-left {
			margin-left: 10px;
		}

		&.margin-right {
			margin-right: 10px;
		}
	}

	.block-editor-rich-text__editable {
		display: inline-block;
		cursor: text;

		&:focus {
			box-shadow: unset;
		}
	}
}

.block-editor-block-list__layout [data-type="themeisle-blocks/button"].block-editor-block-list__block:not([contenteditable]):focus::after {
	box-shadow: none;
}

.editor-styles-wrapper {
	.wp-block-button__link {
		svg {
			fill: currentColor;
			width: 16px;
		}
	}
}

.buttons-alignment-control .components-toolbar {
	border: none;
}

.align-full-desktop {
	@include align-full;
}

@media ( max-width: 960px ) {
	.align-left-tablet {
		@include not-align-full;
	}

	.align-center-tablet {
		@include not-align-full;
	}

	.align-right-tablet {
		@include not-align-full;
	}

	.align-full-tablet {
		@include align-full;
	}
}

@media ( max-width: 600px ) {
	.align-left-mobile {
		@include not-align-full;
	}

	.align-center-mobile {
		@include not-align-full;
	}

	.align-right-mobile {
		@include not-align-full;
	}

	.align-full-mobile {
		@include align-full;
	}
}
