/**
 * #.# Styles for Button Block.
 *
 * CSS for both Editor + FrontEnd
 */
.wp-block-button {
	&.dgb-button-center {
		transform: translateX(-50%);
		left: 50%;
		position: relative;
	}

	&.dgb-button-right {
		transform: translateX(-100%);
		left: 100%;
		position: relative;
	}
}

form {
	&.blocks-button-inline-link {
		margin: 1rem auto 0 auto;
	}

	>div {
		&.editor-url-input {
			flex-grow: 0;
			width: auto;
			margin-left: 8px;
		}
	}
}


.wp-dgb-button {
	border: none;
	border-radius: 4px;
	box-shadow: none !important;
	cursor: pointer;
	display: inline-block;
	line-height: 1em !important;
	margin: 0;
	text-decoration: none !important;
	white-space: nowrap;
	display: inline-block;
	opacity: 1;
	background: #2091e1;
	color: $white;
	padding: 0.75em 1em;
	transition: opacity .2s ease-in-out;
	box-shadow: none !important;

	&:hover {
		opacity: .85;
		box-shadow: none !important;
		border: 0;
	}

}

.wp-block-dgb-button {
	margin: 10px 0;

	&:hover {
		color: $white;
	}

	&.dgb-button-right {
		text-align: right;
	}

	&.dgb-button-center {
		text-align: center;
	}

	&.dgb-button-left {
		text-align: left;
	}
}

.dgb-button-small {
	font-size: .75em;
}

.dgb-button-normal {
	font-size: 1em;
}

.dgb-button-medium {
	font-size: 1.25em;
}

.dgb-button-large {
	font-size: 1.5em;
}