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

.wp-block-ub-button-block {
	margin: 30px auto;
	max-width: 100%;
}
.ub-buttons {
	.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.ub-button-block-main.ub-button-block-main {
			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-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% !important;
}

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