/**
 * Porto Row / Porto Column blocks
 *
 * The row is a flex container which publishes its column gap as `--porto-col-gap`. Each column
 * subtracts its share of that gap from its own width ( see the `flex` rule the block prints ), so
 * the columns of a "50% 50%" row still fit on one line once a gap is set.
 */
.porto-block-row {
	display: flex;
	flex-wrap: wrap;
	/* Left alone, the gap is the Grid Gutter Width of the theme options. */
	--porto-col-gap: var(--porto-column-gap, 20px);
	column-gap: var(--porto-col-gap);
	row-gap: var(--porto-col-gap);
}

.porto-block-column {
	display: flex;
	flex-direction: column;
	/* Without a width of its own a column shares the line with the others. */
	flex: 1 1 0%;
	min-width: 0;
	max-width: 100%;
}

/**
 * The columns stack on a phone.
 *
 * The width a column is given applies from 768px up, so this is what is left below it. A width set
 * for the tablet or for the mobile device takes over from here: the style of the block itself
 * comes later than this stylesheet.
 */
@media (max-width: 767px) {
	.porto-block-column {
		flex: 1 1 100%;
	}
}

/* The layout picker of a new row, and the Layout option of the Layout panel ( editor only ). */
.porto-row-layouts-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	width: 100%;
}

.porto-row-layout {
	display: flex;
	gap: 2px;
	width: 62px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 2px;
	background: none;
	cursor: pointer;
}

.porto-row-layout > span {
	display: block;
	flex-basis: 0;
	background: #d7d7d7;
	border-radius: 1px;
}

.porto-row-layout:hover > span,
.porto-row-layout.is-active > span {
	background: #1e1e1e;
}

.porto-row-layouts .components-base-control__label {
	display: block;
	margin-bottom: 8px;
}

.porto-row-layouts .porto-row-layouts-list {
	justify-content: flex-start;
}