/* This stylesheet is used to style the admin option form of the plugin. */

@use 'sass:math';

@mixin bp($point) {
	@if $point == m {
		@media screen and (min-width: 600px) { @content; }
	}
	@else if $point == wp {
		@media screen and (min-width: 851px) { @content; }
	}
	@else if $point == l {
		@media screen and (min-width: 1144px) { @content; }
	}
	@else if #point == xl {
		@media screen and (min-width: 1280px) { @content; }
	}
}

/* Hide the post slug editor */
.post-type-hotspot #edit-slug-box,
.post-type-hotspot #slugdiv,
.post-type-hotspot #screen-meta label[for=slugdiv-hide] {
	display: none;
}

/* Hide the coordinates input */
input[name$='[coordinates]'] {
	display: none;
}

/* Hide the shape input */
.cmb-row.cmb-type-text {
	&[class*='shape'] {
		display: none;
	}
}

#cmb2-metabox-moreinfo_metabox {
	display: flex;
	flex-wrap: wrap;
	margin: 1rem 0;
	@include bp(m) {
		margin-left: -0.5rem;
	}
	.cmb-row.cmb-type-colorpicker {
		border-bottom: 0 none;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding: 0;
		width: 100%;
		@include bp(m) {
			padding-left: 0.5rem;
			width: 50%;
		}
		@include bp(l) {
			width: 25%;
		}
		.cmb-th {
			border: 1px solid #e9e9e9;
			border-bottom: 0 none;
			float: none;
			line-height: normal;
			padding: 0.5rem;
			vertical-align: baseline;
			width: auto;
		}
		.cmb-td {
			border: 1px solid #e9e9e9;
			border-top: 0 none;
			flex: 1;
			float: none;
			padding: 0 0.5rem 0.5rem;
			width: auto;
		}
	}
	.cmb-row.cmb-type-textarea-small {
		border-bottom: 0 none;
		box-sizing: border-box;
		padding: 0;
		width: 100%;
		@include bp(m) {
			padding-left: 0.5rem;
		}
		.cmb-th {
			border: 1px solid #e9e9e9;
			border-bottom: 0 none;
			float: none;
			line-height: normal;
			padding: 0.5rem;
			vertical-align: baseline;
			width: auto;
		}
		.cmb-td {
			border: 1px solid #e9e9e9;
			border-top: 0 none;
			float: none;
			padding: 0 0.5rem 0.5rem;
			width: auto;
			textarea {
				box-sizing: border-box;
				width: 100%;
			}
		}
	}
}

#cmb2-metabox-highlight_styling_metabox {
	display: flex;
	flex-wrap: wrap;
	margin: 1rem 0;
	@include bp(m) {
		margin-left: -0.5rem;
	}
	.cmb-row {
		&.cmb-type-colorpicker,
		&.cmb-type-opacity,
		&.cmb-type-text-number {
			border-bottom: 0 none;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding: 0;
			@include bp(m) {
				padding-left: 0.5rem;
			}
			.cmb-th {
				border: 1px solid #e9e9e9;
				border-bottom: 0 none;
				float: none;
				line-height: normal;
				padding: 0.5rem;
				vertical-align: baseline;
				width: auto;
			}
			.cmb-td {
				border: 1px solid #e9e9e9;
				border-top: 0 none;
				flex: 1;
				float: none;
				padding: 0 0.5rem 0.5rem;
				width: auto;
			}
		}
		&.cmb-type-checkbox {
			border-bottom: 0 none;
			box-sizing: border-box;
			padding: 0;
			width: 100%;
			@include bp(m) {
				padding-left: 0.5rem;
			}
			.cmb-th {
				border: 1px solid #e9e9e9;
				border-bottom: 0 none;
				float: none;
				line-height: normal;
				padding: 0.5rem;
				vertical-align: baseline;
				width: auto;
			}
			.cmb-td {
				border: 1px solid #e9e9e9;
				border-top: 0 none;
				flex: 1;
				float: none;
				padding: 0 0.5rem 0.5rem;
				width: auto;
			}
		}
		&.cmb2-id--da-map-highlight-color,
		&.cmb2-id--da-map-highlight-opacity,
		&.cmb2-id--da-map-hover-color,
		&.cmb2-id--da-map-hover-opacity {
			width: 100%;
			@include bp(m) {
				width: 50%;
			}
		}
		&.cmb2-id--da-map-border-color,
		&.cmb2-id--da-map-border-opacity {
			width: 100%;
			@include bp(m) {
				width: 36%;
			}
		}
		&.cmb2-id--da-map-border-width {
			width: 100%;
			@include bp(m) {
				width: 28%;
			}
			input.cmb2-text-small {
				width: 50px;
			}
		}
	}
	.cmb-row.cmb2-id--da-map-hover-color,
	.cmb-row.cmb2-id--da-map-hover-opacity {
		display: none;
	}
	&.always-visible {
		.cmb-row.cmb2-id--da-map-hover-color,
		.cmb-row.cmb2-id--da-map-hover-opacity {
			display: block;
		}
	}
}

#cmb2-metabox-styles {
	.cmb-nested .cmb-nested {
		display: flex;
		flex-wrap: wrap;
		margin: 1rem 0;
		@include bp(m) {
			margin-left: -0.5rem;
		}
		.cmb-row {
			border-bottom: 0 none;
			margin: 0 0 0.5rem 0;
			padding: 0;
			&.cmb-type-text {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				padding: 0;
				width: 100%;
				@include bp(m) {
					padding-left: 0.5rem;
					width: (math.div(100%, 3) * 2);
				}
				input[type='text'] {
					box-sizing: border-box;
					width: 100%;
				}
			}
			&.cmb-type-select {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				padding: 0;
				width: 100%;
				@include bp(m) {
					padding-left: 0.5rem;
					width: (math.div(100%, 3));
				}
			}
			&[class*='map-highlight-color'],
			&[class*='map-highlight-opacity'],
			&[class*='map-border-color'] {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				width: 100%;
				@include bp(m) {
					padding-left: 0.5rem;
					width: (math.div(100%, 3));
				}
			}
			&[class*='map-hover-color'],
			&[class*='map-hover-opacity'] {
				box-sizing: border-box;
				flex-direction: column;
				width: 100%;
				@include bp(m) {
					padding-left: 0.5rem;
					width: (50%);
				}
			}
			&.cmb-remove-field-row {
				text-align: right;
				width: 100%;
				@include bp(m) {
					padding-left: 0.5rem;
				}
			}
			.cmb-th {
				border: 1px solid #e9e9e9;
				border-bottom: 0 none;
				float: none;
				line-height: normal;
				padding: 0.5rem;
				vertical-align: baseline;
				width: auto;
			}
			.cmb-td {
				border: 1px solid #e9e9e9;
				border-top: 0 none;
				flex: 1;
				float: none;
				padding: 0 0.5rem 0.5rem;
				width: auto;
			}
		}
	}
	.cmb-row[class*='map-hover-color'],
	.cmb-row[class*='map-hover-opacity'] {
		display: none;
	}
	&.always-visible {
		.cmb-row[class*='map-hover-color'],
		.cmb-row[class*='map-hover-opacity'] {
			display: flex;
		}
	}
	.cmb-nested .closed .cmb-nested {
		display: none;
	}
}

#cmb2-metabox-field_group {
	.cmb-repeat-group-wrap {
		max-width: 100% !important;
	}
}

.cmb2-wrap .wp-picker-container {
	.wp-color-result {
		white-space: nowrap;
	}
	.wp-picker-input-wrap {
		display: block;
		margin-top: 0.5rem;
	}
	.wp-picker-holder {
		position: absolute;
		z-index: 1;
	}
	input:not([type=hidden])+.button, .cmb2-wrap input:not([type=hidden])+input {
		font-size: 12px;
		margin: 1px 0 0 0;
		padding: 3px 12px;
		@include bp(wp) {
			height: auto;
			line-height: normal;
			margin: 0 0 0 0.5rem;
			padding: 5px 12px;
		}
	}
}


#field_group {
	.cmb-row[class*='coordinates'] {
		.cmb-td {
			// overflow: auto;
			// padding-bottom: 2rem;
		}
	}
}

.status {
	background: #cfe2ff;
	border: 1px solid #b6d4fe;
	border-radius: 0.25rem;
	color: #084298;
	display: inline-block;
	margin: 1em 0 0 0;
	padding: 0.5em 1em;
	position: relative;

	a {
		color: #06357a;
	}

	&.status-yellow {
		background: #fff3cd;
		border-color: #ffecb5;
		color: #664d03;

		a {
			color: #523e02;
		}
	}

	&.status-green {
		background: #d1e7dd;
		border-color: #badbcc;
		color: #0f5132;

		a {
			color: #0c4128;
		}
	}

	&.status-red {
		background: #f8d7da;
		border-color: #f5c2c7;
		color: #842029;

		a {
			color: #6a1a21;
		}
	}

}

@import 'leaflet';
@import 'leaflet-draw';
@import 'da-leaflet';