/**
 * Main Juiz Lang Admin styles.
 */

/**
 * Buttons
 */
.juizl-button.juizl-button {
	display: inline-block;
	height: auto;
	padding: 8px 12px;
	margin-right: 15px;
	border: 0 none;
	vertical-align: middle;
	font-weight: bold;
	color: #444;
	background: #EEE;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
}

.juizl-button-mini.juizl-button-mini {
	padding: 6px 15px;
}

/*
// Ajax action response.
[data-ajax-action] + .juizl-success,
[data-ajax-action] + .juizl-error {
	display: inline-block;
	vertical-align: middle;
	font-size: 13px;
	font-weight: bold;
}
[data-ajax-action] + .juizl-success {
	color: var(--success);

	a {
		color: var(--successdark);

		&:hover,
		&:focus {
			color: #444;
		}
	}
}
[data-ajax-action] + .juizl-error {
	color: var(--error);

	a {
		color: var(--errordark);
		&:hover,
		&:focus {
			color: #444;
		}
	}
}
*/

/**
 * Metaboxes.
 */
.juizl-mb-line {
	transition: all .375s;
}

.juizl-mb-line label {
	font-weight: bold;
}

.juizl-mb-line [type="checkbox"] + label {
	font-weight: normal;
}

.juizl-mb-line input {
	width: 100%;
}

.juizl-mb-line [type="checkbox"] {
	width: auto;
}

.juizl-mb-line.to-remove {
	transform: translateX(-50px);
	opacity: 0;
}

.juizl-remove-link {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.juizl-remove-link .juizl-button {
	margin-right: 0;
	padding: 9px 9px 8px 12px;
}

.juizl-remove-link .dashicons,
.juizl-remove-link .dashicons:before {
	width: 22px;
	height: 22px;
	font-size: 22px;
}

.juizl-mb-description label {
	font-weight: normal;
}

.juizl-description {
	color: #555;
	font-style: italic;
}

/**
 * Icons.
 */
.juizl-button i {
	vertical-align: middle;
	margin-left: -3px;
}

.juizl-loader {
	display: none;
	vertical-align: middle;
	margin: -2px 0 -2px 10px;
}

.juizl-loader svg {
	height: 1em;
}
	
.juizl-loader rect {
	fill: #555;
}

.juizl-loading .juizl-loader {
	display: inline-block;
}

/**
 * Some layout stuff
 */
.juizl-inlined-inputs {
	display: flex;
	align-item: flex-start;
}
.juizl-inlined-inputs > * input,
.juizl-inlined-inputs > * select {
	width: 100%;
}
.juizl-inlined-inputs > * + * {
	margin-left: 20px;
}

.juizl-small-col {
	flex-basis: 33%;
}
.juizl-big-col {
	flex-basis: 67%;
}