@import "../assets/gutenberg";

[data-type="wp-bootstrap-blocks/button"] {
	&[data-alignment="center"] {
		text-align: center;
	}

	&[data-alignment="right"] {
		text-align: right;
	}
}

.wp-block-wp-bootstrap-blocks-button {
	box-sizing: border-box;
	display: inline-block;
	padding: 8px 16px;
	background-color: $blue-50;
	color: $white;
}

// Source: https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/button/editor.scss
.wp-block-wp-bootstrap-blocks-button-link {
	background: $white;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-family: $default-font;
	font-size: $default-font-size;
	line-height: $default-line-height;

	// The width of input box plus padding plus two icon buttons.
	$blocks-button__link-input-width: 300px + 2px + 2 * $button-size;
	width: $blocks-button__link-input-width;

	.block-editor-url-input,
	.editor-url-input {
		width: auto;
	}

	.block-editor-url-input__suggestions,
	.editor-url-input__suggestions {
		width: $blocks-button__link-input-width - $button-size - $button-size;
		z-index: z-index(".block-library-button__inline-link .block-editor-url-input__suggestions");
	}

	> .dashicon {
		width: $button-size;
	}

	.dashicon {
		color: $gray-600;
	}

	.block-editor-url-input input[type="text"]::placeholder,
	.editor-url-input input[type="text"]::placeholder {
		color: $gray-600;
	}
}