$settings-container-width: 750px;

.gblocks-dashboard-wrap {
    margin: 0;
    overflow: hidden;
}

.gblocks-dashboard-header {
    background: #fff;
	border-bottom: 1px solid #e2e4e7;
    padding: 0 20px;
	text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;

	h1 {
		font-size: 17px;
		font-weight: 600;
		padding-bottom: 0;
		display: flex;
		align-items: center;

		svg {
			width: 1em;
    		height: 1em;
			padding-right: 10px;
			fill: #006eb7;
		}
	}
}

.gblocks-navigation {
    background: #fff;
	display: flex;

	a {
		padding: 1rem;
		display: flex;
		align-items: center;
		color: inherit;
		text-decoration: none;

		&.active {
			font-weight: 600;
			box-shadow: inset 0 -3px #007cba;
		}
	}
}

.generateblocks-settings-area {
	.components-placeholder.gblocks-settings-placeholder {
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		max-width: $settings-container-width;
		background: #fff;
		border: 1px solid #e2e4e7;
		box-shadow: none;
	}

	.generateblocks-settings-main {
		margin-left: auto;
		margin-right: auto;
		max-width: $settings-container-width;

		.gblocks-action-button {
			display: flex;
			align-items: center;
		}

		.gblocks-action-message {
			padding-left: 10px;
			opacity: 0;
			transition: opacity 200ms ease-in-out;
			color: green;
			pointer-events: none;

			&.gblocks-action-message--show {
				opacity: 1;
				transition: opacity 200ms ease-in-out;
			}

			&.gblocks-action-message--error {
				color: red;
			}
		}

		/* Only needed until WP 5.6 */
		.gblocks-css-print-method {
			.components-base-control__label {
				display: block;
			}
		}

		.components-button .components-spinner {
			margin: 0;
		}

		.components-button.is-primary .components-spinner {
			background: rgba(0,0,0,0.1);
			border-radius: 100%;
		}

		.components-panel__body {
			margin: 25px 0;
			background: #fff;
			border: 1px solid #e2e4e7;

			.components-panel__body-toggle {
				border-bottom: 1px solid #d6e2ed;
			}

			.gblocks-dashboard-panel-row-wrapper {
				padding-top: 10px;

				& > *:last-child {
					margin-bottom: 0;
				}
			}

			.components-panel__row {
				padding: 0;
				margin: 0 0 25px;
				display: block;

				.components-base-control {
					.components-base-control__help {
						margin: 0;
					}

					.components-base-control__field {
						margin-bottom: 5px;
					}
				}
			}

			.components-notice {
				margin: 0 0 10px;
			}
		}
	}
}

.generateblocks-dashboard-page {
	#wpcontent {
		padding-left: 0;
	}

	.update-nag {
		margin-bottom: 20px;
		margin-left: 22px;
	}

	#wpbody-content .wrap {
		padding: 0 20px;
		margin: 0;
	}
}

.gblocks-units {
    position: absolute;
    top: 0;
    right: 0;
	font-size: 12px;
	font-weight: bold;
}

.gblocks-container-width {
    position: relative;
}

.gblocks-library {
	margin-bottom: 1.5em;

	h3 {
		font-size: 16px;
		margin-bottom: 1em;
		font-weight: 500;
	}

	&:first-child {
		margin-bottom: 2.5em;
	}
}

.gblocks-library-item {
	display: flex;
	gap: 24px;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: #ffffff;
	flex-wrap: wrap;

	&:nth-child(even) {
		background: #efefef;
	}

	&__edit {
		flex-basis: 100%;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	&__name {
		display: flex;
		align-items: center;
		gap: 10px;

		button.components-button {
			min-width: 25px;
			height: 25px;
			width: 25px;
		}
	}

	&__actions {
		display: flex;
		align-items: center;
		gap: 10px;

		button.components-button {
			min-width: 25px;
			height: 25px;
			width: 25px;
		}

		.components-toggle-control {
			label {
				font-size: 11px;
			}
		}
	}

	.components-toggle-control {
		margin-bottom: 0;

		.components-base-control__field {
			margin-bottom: 0!important;
		}
	}
}
