/**
 * Layouts for tables/lists
 *
 * Breakpoints for arranging elements
 *
 */

@use "../../../global/sass/partials/mixins";

/* -------------------- Tables -------------------- */

/* 30-70 standard for lists, first item is title */
.cb-col-30-70 {
	
	> :nth-child(odd) { /* this is the title column , e.g. "Name" */ 
		font-weight: bold;
	}
	
	@include mixins.breakpoint(phablet) {
		display: flex;
		flex-direction: row;
	    flex-wrap: wrap;
		align-items: center;

		> :nth-child(odd) {
				width: 30%;
			}
		> :nth-child(even) {
			width: 70%;
		}
	}
}
/* 50-50 */
.cb-col-50-50 {
	@include mixins.breakpoint(phablet) {
		display: flex;
		> :nth-child(odd) {
			width: 50%;
			min-width: 0;
			img { width: 100% }
		}
		> :nth-child(even) {
			width: 50%;
			min-width: 0;
		}
	}
}


.cb-col-50-50-filter {
	> div {
		margin-bottom: var(--commonsbooking-spacer);
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		
		label {
			flex: 0 0 30%;
		}
		input {
			flex: 0 1 50%;
		}
	}

	@include mixins.breakpoint(phablet) {
		
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		
		flex-wrap: wrap;
		
		> div {
			width: 50%;
		}	
	}
}

.cb-col-auto { /* 2 fixed cols, 1 flexible in the middle */
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	> div.cb-thumbnail {
		flex: 0 0 20%;	
		padding-right: var(--commonsbooking-spacer-big);
	}
	> div.cb-list-info {
		flex: 1 0 50%;
		border: none;
	}
	> div.cb-action { /* optional */
		flex: 0 0 100%;
		text-align: right;
	}
	
	@include mixins.breakpoint(phablet) {
		display: flex;
		flex-direction: row;
	    justify-content: space-between;
	    flex-wrap: nowrap;
		align-items: center;
		
		> div.cb-thumbnail {
			flex: 0 0 20%;
			padding-right: var(--commonsbooking-spacer-big);
				
		}
		> div.cb-list-info {
			flex: 1 1 auto;
			border: none;
		}
		> div.cb-action {
			flex: 1 0 auto;
			a {
				width: auto;
			}
		}
	}
}

.cb-col-list-with-image { /*first */
	
	
	display: flex;
	flex-direction: column;

}

.cb-col-20-50-30 {
	@include mixins.breakpoint(phablet) {
		display: flex;
		flex-direction: row;
	    justify-content: space-between;
	    flex-wrap: nowrap;
		align-items: center;
	}
}

.cb-list-error {
	color: var(--commonsbooking-color-error);
	font-size: var(--commonsbooking-font-size-big);
}