// properties.scss
:root {

	// Grab the spacing var from global styles, if it exists
	--tiles-spacing-vertical: var(--global--spacing-vertical, 30px);
	--tiles-spacing-vertical-lrg: calc(var(--tiles-spacing-vertical) * 1.75);

	--tiles-border-radius: 11px;

	// Desktop styles
	@media (min-width: 822px) {
		--tiles-spacing-vertical-lrg: calc(var(--tiles-spacing-vertical) * 3.25);
		--tiles-border-radius: 17px;
	}
}

@import "modules/colors.scss";
@import "modules/font-sizes.scss";
@import "modules/line-height.scss";
@import "modules/margin.scss";
@import "modules/padding.scss";
@import "modules/utilities.scss";

// Tiles
@import "tiles/offset-gallery.scss";



.rounded-text {
	width: 11rem;
	height: 11rem;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	&--sm {
		width: 9rem;
		height: 9rem;
	}

	&--lg {
		width: 13rem;
		height: 13rem;
	}
}

.flex-end {
	align-items: flex-end;
	/* text-align: right; */
	display: flex;
	flex-direction: column;
}

// .tiles--three-steps {

// }

// .no-background {
//         background: transparent !important;
// }

// .has-background-circle {
//         position: relative;

//         &::after {
//                 display: block;
//                 content: "";
//                 background: currentColor;
//                 height: 10rem;
//                 width: 10rem;
//                 border-radius: 100% !important;
//                 // position: absolute;
//                 opacity: .1;
//                 top: -0.25rem;
//                 left: -1.5rem;
//         }
// }

@media (min-width: 600px) and (max-width: 781px) {
	.tablet\:hidden {
		display: none;
	}
}

@media (min-width: 600px) and (max-width: 781px) {
	.tablet\:hidden {
		display: none;
	}
}

@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-column.tablet\:w-100 {
		flex-basis: 100% !important;
	}
}

.flex {
	display: flex;

	&.wp-block-column:not(:last-child) {
		margin-bottom: 0 !important;
	}
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.justify-end {
	justify-content: flex-end;
}

@media (min-width: 600px) and (max-width: 781px) {
	.flex.mid-mobile\:flex-basis-80 {
		flex-basis: 80% !important;
	}
}

// Buttons
.tile .wp-block-button.text-black .wp-block-button__link:not(.has-text-color) {
	color: currentColor !important;
}

// Remove excess spacing applied to buttons within the Buttons block
.tiles [data-block].wp-block-buttons .wp-block-button:first-child {
	margin-top: 0 !important;
}

.tiles [data-block].wp-block-buttons .wp-block-button {
	margin-bottom: 0 !important;
}

.tiles .wp-block-buttons > .wp-block {
	margin-top: 0;
}

.tiles .wp-block-buttons > .wp-block-button:last-child {
	margin-bottom: 0;
}

.tiles .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
	color: var(--tiles-mono-light) !important;
}

.tiles .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {

	&:hover {
		border-color: var(--tiles-mono-light) !important;
		color: var(--tiles-mono-dark) !important;
	}
}

.tiles h1::before,
.tiles h2::before {
	background: currentColor;
}

.tiles .alignwide {
	width: 100%;
}

// Images
.tiles.wp-block-image.is-style-twentytwentyone-border img,
.tiles.wp-block-image.is-style-twentytwentyone-image-frame img,
.tiles .wp-block-image.is-style-twentytwentyone-border img,
.tiles .wp-block-image.is-style-twentytwentyone-image-frame img {
	border-color: currentColor !important;
}

.tiles {
	.wp-block-image .components-resizable-box__container img {
		display: inline-block;
	}
}

.no-caption figcaption {
	display: none !important;
}

// Group
.tiles.wp-block-group.is-style-twentytwentyone-border {
	border-color: currentColor !important;
}

// Remove excess column space on empty columns
.wp-block-column.empty {
	margin: 0 !important;
	pointer-events: none;

	@media (min-width: 600px) and (max-width: 781px) {
		display: none;
	}
}