.botiga-metabox {
	display: flex;
}

.botiga-metabox-tabs {
	display: flex;
	flex-direction: column;
	width: 225px;
	background-color: #f7f7f7;
	border: 1px solid #ddd;

	a {
		position: relative;
		display: flex;
		color: #1a1a1a;
		padding: 15px 20px;
		text-decoration: none;
		transition: all .1s;
		border-bottom: 1px solid #ddd;

		&:last-child {
			border-bottom: 0;
		}

		&.active:after {
			content: "";
			position: absolute;
			z-index: 1;
			top: calc(50% - 8px);
			right: -1px;
			pointer-events: none;
			border: solid transparent;
			border-right-color: #fff;
			border-width: 8px;
		}

		&:focus,
		&:active {
			box-shadow: none;
			outline: none;
		}

		&:hover {
			background-color: #eee;
		}

		&.active {
			color: #fff;
			background-color: #007cba;
		}
	}
}

.botiga-metabox-contents {
	flex: 1;
	display: flex;
	flex-direction: column;
	border: 1px solid #ddd;
	border-left: 0;
}

.botiga-metabox-content {
	display: flex;
	flex-direction: column;

	&:not(.active) {
		display: none;
	}
}

.botiga-metabox-content-title {
	display: none;
	margin: 0;
	padding: 10px 15px;
	color: #1e1e1e;
	background-color: #eee;
}

.botiga-metabox-field {
	display: flex;
	grid-gap: 20px;
	padding: 20px;

	+.botiga-metabox-field {
		border-top: 1px solid #eee;
	}
}

.botiga-metabox-field-title {
	width: 300px;
	display: flex;
	grid-gap: 5px;
	flex-direction: column;

	h4 {
		margin: 0;
		color: #1e1e1e;
	}

	small {
		opacity: 0.75;
	}
}

.botiga-metabox-field-content {
	flex: 1
}

.botiga-metabox-field-description {
	font-size: 80%;
	opacity: 0.75;
	margin-top: 10px;
}

.botiga-metabox-field-text {

	input {
		min-width: 50%;
		max-width: 100%;
	}
}

.botiga-metabox-field-number {

	input {
		width: 100px;
		max-width: 100%;
	}
}

.botiga-metabox-field-textarea {

	textarea {
		width: 100%;
		max-width: 100%;
		min-height: 100px;
		vertical-align: top;
	}
}

.botiga-metabox-field-checkbox {

	label {
		display: flex;
		grid-gap: 6px;
		align-items: center;
		user-select: none;

		input {
			margin: 0;
		}
	}
}

.botiga-metabox-field-switcher {

	label {
		display: flex;
		grid-gap: 6px;
		align-items: center;
		user-select: none;
	}

	i {
		position: relative;
		overflow: hidden;
		display: flex;
		width: 45px;
		height: 22px;
		background-color: #c8c8c8;
		border-radius: 20px;
		transition: all 0.2s;

		&:before {
			content: "";
			position: absolute;
			display: block;
			width: 14px;
			height: 14px;
			top: 4px;
			left: 6px;
			background-color: #fff;
			border-radius: 20px;
			transition: all 0.1s;
		}
	}

	input {
		display: none;

		&:checked {

			+i {
				background-color: #2271b1;

				&:before {
					left: 26px;
				}
			}
		}
	}
}

.botiga-metabox-field-choices-images {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 2px;

	label {
		display: flex;
		user-select: none;
	}

	figure {
		padding: 4px;
		margin: 0;
		border: 2px solid transparent;
		border-radius: 4px;
		transition: all .2s;
		max-width: 80px;
		max-height: 80px;

		img {
			width: 100%;
			vertical-align: top;
		}
	}

	input {
		display: none;

		&:checked {

			+figure {
				border-color: #1e1e1e;

				&:before {
					left: 26px;
				}
			}
		}
	}
}

#side-sortables {

	.botiga-metabox-tabs {
		display: none;
	}

	.botiga-metabox-content-title,
	.botiga-metabox-content:not(.active) {
		display: block;
	}

	.botiga-metabox-field {
		grid-gap: 8px;
		padding: 10px 15px;
		flex-direction: column;
	}

	.botiga-metabox-field-title {
		width: auto;
		font-size: 12px;
	}

	.botiga-metabox-contents {
		border-left: none;
		border-right: none;
	}

	#botiga_metabox {

		.postbox-header {
			border-top: none;

			h2 {
				color: #1e1e1e;
				padding: 0 0 0 15px;
				font-size: 13px;
				font-weight: 500;
			}
		}

		.inside {
			padding: 0;
		}
	}
}

@media only screen and (max-width: 991px) {

	.botiga-metabox-tabs {
		display: none;
	}

	.botiga-metabox-content-title,
	.botiga-metabox-content:not(.active) {
		display: block;
	}

	.botiga-metabox-field {
		grid-gap: 8px;
		padding: 15px;
		flex-direction: column;
	}

	.botiga-metabox-field-title {
		width: auto;
	}

	.botiga-metabox-contents {
		border-left: none;
		border-right: none;
	}

	#botiga_metabox {

		.inside {
			padding: 0;
		}
	}
}