/**
 * Button styles
 * Loads on front end and back end
 */

 .bly-block-button {
	margin: 0 0 1.2em 0;
	position: relative;

	.blocks-rich-text {
		display: inline-flex;
	}

	.components-autocomplete {
		display: inline-block;
		width: auto;
		margin: 0 auto;
		position: relative;
	}
}

.bly-button {
	text-align: center;
	font-size: 18px;
	line-height: 1 !important;
	background-color: #32373c;
	border: none;
	border-radius: 50px;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	padding: .6em 1em;
	text-decoration: none;
	word-break: break-word;
	transition: .3s ease;
	display: inline-block;

	&:hover {
		box-shadow: inset 0 0 200px rgba(255, 255, 255, 0.15);
	}
}

.bly-button-shape-square,
input[type="submit"].bly-button-shape-square {
	border-radius: 0;
}

.bly-button-shape-rounded,
input[type="submit"].bly-button-shape-rounded {
	border-radius: 5px;
}

.bly-button-shape-circular,
input[type="submit"].bly-button-shape-circular {
	border-radius: 100px;
}

.bly-button-size-small,
input[type="submit"].bly-button-size-small {
	font-size: 14px;
}

.bly-button-size-medium,
input[type="submit"].bly-button-size-medium {
	font-size: 20px;
}

.bly-button-size-large,
input[type="submit"].bly-button-size-large {
	font-size: 26px;
	padding: .8em 1.2em;
}

.bly-button-size-extralarge,
input[type="submit"].bly-button-size-extralarge {
	font-size: 34px;
	padding: .8em 1.2em;
}

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

.bly-button-center {
	margin: 0 auto;
}