/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */

.wp-block-ub-button-block {
	margin: 30px auto;
	max-width: 100%;
}

.ub-button-container {
	max-width: 100%;
	display: flex;
	a.ub-button-block-main.ub-button-block-main,
	a.ub-button-block-btn.ub-button-block-btn {
		text-decoration: none;
	}

	a {
		color: var(--ub-button-color);
		background-color: var(--ub-button-background-color);
		border: var(--ub-button-border);

		&:hover {
			color: var(--ub-button-hover-color);
			background-color: var(--ub-button-hover-background-color);
			border: var(--ub-button-hover-border);
		}
	}
}

.ub-button-full-container {
	width: 100%;
}
.ub-button-block-main {
	display: flex;
	cursor: pointer;
	transition:
		background-color 0.5s,
		color 0.5s,
		border 0.5s;
}
.ub-buttons {
	margin: 20px 0;
	display: flex;
	cursor: pointer;
	transition:
		background-color 0.5s,
		color 0.5s,
		border 0.5s;
	&.ub-flex-wrap {
		flex-wrap: wrap;
	}
	&.orientation-button-row {
		flex-direction: row;
		&.align-button-center {
			justify-content: center;
		}
		&.align-button-left {
			justify-content: flex-start;
		}
		&.align-button-right {
			justify-content: flex-end;
		}
		&.align-button-space-between {
			justify-content: space-between;
		}
	}
	&.orientation-button-column {
		flex-direction: column;
		&.align-button-center {
			align-items: center;
		}
		&.align-button-left {
			align-items: flex-start;
		}
		&.align-button-right {
			align-items: flex-end;
		}
		&.align-button-space-between {
			justify-content: space-between;
		}
	}
}

.ub-button-small {
	width: 180px;
	padding: 10px;
	font-size: 13px !important;
}

.ub-button-medium {
	width: 275px;
	padding: 15px;
	font-size: 17px !important;
}

.ub-button-large {
	width: 417px;
	padding: 20px;
	font-size: 22px !important;
}

.ub-button-larger {
	width: 512px;
	padding: 20px;
	font-size: 25px !important;
}

.ub-button-flex-small {
	width: fit-content;
	width: -moz-fit-content;
}
.ub-button-flex-medium {
	width: fit-content;
	width: -moz-fit-content;
}
.ub-button-flex-large {
	width: fit-content;
	width: -moz-fit-content;
}
.ub-button-flex-larger {
	width: fit-content;
	width: -moz-fit-content;
}

.ub-button-block-btn {
	text-align: center;
	color: inherit;
	margin: 0 10px;
	display: flex;
	align-items: center;
}

.ub-button-content-holder {
	display: flex;
	margin: 0 auto;
}

.ub-button-icon-holder {
	display: flex;
	align-items: center;
	padding: 0 2px;
}

.ub-button-full-width {
	width: 100%;
}

@media (max-width: 599px) {
	.ub-button-flex- {
		&small {
			min-width: 70%;
		}
		&medium {
			min-width: 80%;
		}
		&large {
			min-width: 90%;
		}
		&larger {
			min-width: 100%;
		}
	}
}
