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

.wp-block-uagb-restaurant-menu,
.uagb-rest_menu__wrap {
	position: relative;

	&.uagb-rm__desk-column-1 {
		grid-template-columns: auto;
	}

	&.uagb-rm__desk-column-2 {
		grid-template-columns: auto auto;
	}

	&.uagb-rm__desk-column-3 {
		grid-template-columns: auto auto auto;
	}

	&.uagb-rm__desk-column-4 {
		grid-template-columns: auto auto auto auto;
	}

	.uagb-rm__price {
		min-width: fit-content;
	}

	.uagb-rest_menu__wrap {
		position: relative;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-transition: all 0.2s;
		-o-transition: all 0.2s;
		transition: all 0.2s;

		&.uagb-rm__image-position-right {
			.uagb-rm__price {
				text-align: left !important;
			}
		}

		.uagb-rm__content {
			position: relative;
			display: table;
			width: 100%;
			padding: 15px;
			border-radius: inherit;
			text-align: left;
			word-break: break-word;
			overflow: hidden;

			.uagb-rm-details {
				display: table;
				width: 100%;

				.uagb-rm__title {
					display: block;
					margin-bottom: 5px;
					margin-block-start: 0;
					word-break: normal;
				}

				.uagb-rm__price {
					word-break: normal;
				}
			}

			.uagb-rm__separator {
				display: -webkit-flex;
				display: -moz-flexbox;
				display: flex;
				margin-right: 0;
				margin-bottom: 10px;
				margin-left: 0;
				line-height: 0;
				-js-display: flex;
				width: 100%;
				border-top-color: #b2b4b5;
				border-top-style: inherit;
				border-top-width: 1px;
			}

			img {
				display: inline-block;
				box-sizing: content-box;
			}
		}

		&.uagb-rm__desk-column-3,
		&.uagb-rm__desk-column-2,
		&.uagb-rm__desk-column-1 {
			padding-right: 10px;
			padding-left: 10px;
		}

		&.uagb-rm__align-center {
			display: flex;
			flex-direction: column;

			.uagb-rm__separator {
				align-self: center;
			}

			.uagb-rm__price {
				text-align: center;
			}
		}

		&.uagb-rm__align-right {
			& .uagb-rm__price {
				display: table-cell;
				text-align: left;
			}
		}

		&.uagb-rm__image-position-left.uagb-rm__align-left .uagb-rm__price {
			display: table-cell;
		}

		&.uagb-rm__image-position-top .uagb-rm__content .uagb-rm__price {
			display: table-cell;
		}

		.uagb-rm__desc {
			margin-bottom: 15px;
		}

		.uagb-rm__image-position-left .uagb-rm__content,
		.uagb-rm__image-position-right .uagb-rm__content {
			display: -ms-flexbox;
			display: flex;
			-js-display: flex;
		}

		.uagb-rm__image-position-left.uagb-rm__align-center .uagb-rm__price,
		.uagb-rm__image-position-right.uagb-rm__align-center .uagb-rm__price {
			width: 20%;
		}

		/*center aligned block without image*/
		&.uagb-rm__align-center .uagb-rm-details,
		&.uagb-rm__align-center .uagb-rm__title-wrap,
		&.uagb-rm__align-center.uagb-rm__image-position-top .uagb-rm__price {
			display: block;
			width: 100%;
		}

		/*end*/
		.uagb-rm__image {
			overflow: hidden;

			.uagb-rm-aligned-middle img {
				-ms-flex-item-align: center;
				align-self: center;
			}
		}
	}

	&.uagb-rm__image-aligned-middle img,
	.uagb-rm__image-aligned-middle .uagb-rm__image-content {
		-ms-flex-item-align: center;
		align-self: center;
	}

	&.uagb-rm__image-aligned-top img {
		-ms-flex-item-align: flex-start;
		align-self: flex-start;
	}

	.uagb-rm__align-left .uagb-rm__content span.uagb-rm__price {
		display: table-cell;
		text-align: right;
	}

	.uagb-rm__text-wrap {
		position: relative;
		display: block;
		width: 100%;
	}

	.uagb-rm__image-position-center {
		&.uagb-rm__align-center .uagb-rm-details,
		&.uagb-rm__align-center .uagb-rm__title-wrap,
		&.uagb-rm__align-center .uagb-rm__price {
			display: block;
			width: 100%;
			text-align: center;
		}
	}

	/*CSS for image position left with all alignment*/
	.uagb-rm__image-position-left {
		.uagb-rm__content {
			display: -ms-flexbox;
			display: flex;
			-js-display: flex;
		}

		&.uagb-rm__align-left .uagb-rm-details {
			flex-direction: unset;
		}

		&.uagb-rm__align-left .uagb-rm__price,
		&.uagb-rm__align-right .uagb-rm__price,
		&.uagb-rm__align-center .uagb-rm__price {
			text-align: right;
			display: table-cell;
		}

		&.uagb-rm__align-left .uagb-rm__title-wrap,
		&.uagb-rm__align-right .uagb-rm__title-wrap,
		&.uagb-rm__align-center .uagb-rm__title-wrap,
		&.uagb-rm__align-left img,
		&.uagb-rm__align-right img,
		&.uagb-rm__align-center img {
			text-align: left;
		}

		img {
			margin-right: 10px;
		}
	}

	.uagb-rm__image-aligned-middle .uagb-rm__content img,
	.uagb-rm__image-aligned-middle .uagb-rm__content .uagb-rm__image-content {
		-ms-flex-item-align: center;
		align-self: center;
	}

	.uagb-rm__image-aligned-top .uagb-rm__content img,
	.uagb-rm__image-aligned-top .uagb-rm__content .uagb-rm__image-content {
		-ms-flex-item-align: flex-start;
		align-self: flex-start;
	}

	&.uagb-rm__image-aligned-middle .uagb-rm__content img {
		-ms-flex-item-align: center;
		align-self: center;
	}

	&.uagb-rm__image-aligned-top .uagb-rm__content img {
		-ms-flex-item-align: flex-start;
		align-self: flex-start;
	}

	/*CSS for image position right with all alignment*/
	.uagb-rm__image-position-right {
		.uagb-rm__content {
			display: -ms-flexbox;
			display: flex;
			-js-display: flex;
		}

		&.uagb-rm__align-left .uagb-rm-details,
		&.uagb-rm__align-right .uagb-rm-details,
		&.uagb-rm__align-center .uagb-rm-details {
			text-align: right;
		}

		&.uagb-rm__align-left .uagb-rm__text-wrap .uagb-rm-details {
			display: flex;
			flex-direction: row-reverse;
		}

		&.uagb-rm__align-left .uagb-rm__price,
		&.uagb-rm__align-right .uagb-rm__price,
		&.uagb-rm__align-center .uagb-rm__price {
			text-align: left;
			display: table-cell;
		}

		&.uagb-rm__align-left .uagb-rm__title-wrap,
		&.uagb-rm__align-right .uagb-rm__title-wrap,
		&.uagb-rm__align-center .uagb-rm__title-wrap,
		&.uagb-rm__align-left img,
		&.uagb-rm__align-right img,
		&.uagb-rm__align-center img {
			text-align: right;
		}

		img {
			margin-left: 10px;
		}
	}

	.uagb-rm__image-position-top {
		&.uagb-rm__align-right .uagb-rm-details {
			display: inline-table;
		}
	}
}

.wp-block-uagb-restaurant-menu {
	display: grid;
}

@media ( max-width: 976px ) {
	.wp-block-uagb-restaurant-menu {
		.uagb-rm__image-position-left.uagb-rm-stacked-tablet {
			.uagb-rm__content {
				display: block;
				display: block;
				-js-display: block;
			}

			&.uagb-rm__image-aligned-middle img {
				align-self: flex-start;
			}
		}

		.uagb-rm__image-position-right.uagb-rm-stacked-tablet {
			.uagb-rm__content {
				display: block;
				display: block;
				-js-display: block;
			}

			&.uagb-rm-reverse-order-tablet .uagb-rm__content {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: -moz-flexbox;
				display: flex;
				flex-direction: column-reverse;
				-js-display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: reverse;
				-ms-flex-direction: column-reverse;
				-webkit-flex-direction: column-reverse;
				-moz-box-orient: vertical;
				-moz-box-direction: reverse;
			}

			&.uagb-rm__image-aligned-middle img {
				align-self: flex-end;
			}
		}

		&.uagb-rm__tablet-column-1 {
			grid-template-columns: auto;
		}

		&.uagb-rm__tablet-column-2 {
			grid-template-columns: auto auto;
		}

		&.uagb-rm__tablet-column-3 {
			grid-template-columns: auto auto auto;
		}

		&.uagb-rm__tablet-column-4 {
			grid-template-columns: auto auto auto auto;
		}
	}
}

@media ( max-width: 767px ) {
	.wp-block-uagb-restaurant-menu {
		.uagb-rm__image-position-left {
			&.uagb-rm-stacked-mobile .uagb-rm__content {
				display: block;
				display: block;
				-js-display: block;
			}

			&.uagb-rm-stacked-mobile.uagb-rm__image-aligned-middle img {
				align-self: flex-start;
			}
		}

		.uagb-rm__image-position-right.uagb-rm-stacked-mobile {
			.uagb-rm__content {
				display: block;
				display: block;
				-js-display: block;
			}

			&.uagb-rm-reverse-order-mobile .uagb-rm__content {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: -moz-flexbox;
				display: flex;
				flex-direction: column-reverse;
				-js-display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: reverse;
				-ms-flex-direction: column-reverse;
				-webkit-flex-direction: column-reverse;
				-moz-box-orient: vertical;
				-moz-box-direction: reverse;
			}

			&.uagb-rm__image-aligned-middle img {
				align-self: flex-end;
			}
		}

		&.uagb-rm__mobile-column-1 {
			grid-template-columns: auto;
		}

		&.uagb-rm__mobile-column-2 {
			grid-template-columns: auto auto;
		}

		&.uagb-rm__mobile-column-3 {
			grid-template-columns: auto auto auto;
		}

		&.uagb-rm__mobile-column-4 {
			grid-template-columns: auto auto auto auto;
		}
	}
}

/* For backward compatibility */
.uagb-rm__title-wrap,
.uagb-rm__price-wrap {
	display: table-cell;
}

.uagb-rm__align-center .uagb-rm-details,
.uagb-rm__align-center .uagb-rm__title-wrap,
.uagb-rm__align-center .uagb-rm__price-wrap {
	display: block;
	width: 100%;
}

.uagb-rm__price-wrap,
.uagb-rm__image-position-left.uagb-rm__align-center .uagb-rm__price-wrap,
.uagb-rm__image-position-right.uagb-rm__align-center .uagb-rm__price-wrap {
	width: 15%;
}

.uagb-rm__separator-parent {
	line-height: 0em;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 10px;
	-js-display: flex;
	display: -webkit-flex;
	display: -moz-flexbox;
	display: flex;
}
