@use "~admin-stylesheets/colors";
@use "~admin-stylesheets/variables";

.nab-css-editor-sidebar {
	display: flex;
	flex-direction: column;
	background: colors.$nab-background-light-grey;
	border-right: 1px solid colors.$nab-border-light;

	.components-button.is-link {
		align-items: center;
		background: none;
		border: none;
		box-shadow: none;
		display: flex;
		text-decoration: none;

		&::-moz-focus-inner {
			border: 0;
		}
	}

	&__header {
		border-bottom: 1px solid colors.$nab-border-light;
		display: flex;
		flex-direction: row;
		padding: 0;
	}

	&__back-to-experiment {
		align-items: center;
		border-right: 1px solid colors.$nab-border-light;
		display: flex;
		flex-grow: 0;
		padding-left: 0.8em;
		padding-right: 0.8em;
	}

	&__back-to-experiment-link {
		line-height: 1;
		box-shadow: none;
		text-decoration: none;

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

	&__header-actions {
		display: flex;
		gap: 0.5em;
		flex-direction: row;
		flex-grow: 1;
		justify-content: flex-end;
		padding: 0.5em;

		&__css-toggle {
			box-shadow: none !important;
		}
	}

	&__save-info {
		display: flex;
		flex-direction: row;
	}

	&__saving-label {
		align-items: center;
		animation: pulse 500ms infinite;
		color: colors.$nab-text-light-grey;
		display: flex;
		padding: 0 1.5em;

		svg,
		.dashicons-cloud {
			margin-right: 4px;
		}
	}

	&__body {
		background: colors.$nab-background-white;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		overflow-y: auto;

		#tab-panel-1-css-editor-view,
		#tab-panel-1-visual-editor-view,
		#tab-panel-1-content-editor-view {
			display: flex;
			flex-grow: 1;
			overflow-y: auto;
		}
	}

	.components-tab-panel__tabs {
		background: colors.$nab-background-white;
		border-top: 0;
		display: flex;
		padding-left: 0;
		top: 0;
		margin-top: 0;
		border-bottom: 1px solid colors.$nab-border-light;

		.components-button {
			border-radius: 0;
			height: 50px;
		}

		.components-button:focus:not(:disabled) {
			background-color: colors.$nab-background-white;
			box-shadow: inset 0 -3px colors.$wp-components-color-accent;
			outline: none;
		}
	}

	&__tab {
		align-items: center;
		display: flex;
		flex-grow: 1;
		line-height: 1;
		justify-content: center;

		&--active {
			box-shadow: inset 0 -3px colors.$wp-components-color-accent;
			font-weight: 600;
		}
	}

	&__css-editor {
		width: 100%;

		.cm-editor {
			height: 100% !important;
			margin: 0 !important;
			padding: 0 !important;
			outline: none !important;
		}
	}

	&__visual-editor {
		background: colors.$nab-background-white;
		flex-grow: 1;
	}

	&__footer {
		border-top: 1px solid colors.$nab-border-light;
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	&__visibility-toggle {
		align-items: center;
		display: flex;
		flex-grow: 0;
		padding: 0 0.5em;

		&-label {
			display: inline-block;
			margin-left: 2em;
		}

		svg,
		.dashicons-admin-collapse {
			background: colors.$nab-background-white;
			border-radius: 50%;
			margin-right: 0.5em;
			position: fixed;
			left: 0.5em;
		}

		&--show {

			svg,
			.dashicons-admin-collapse {
				transform: rotate(180deg);
				margin-right: 0;
			}
		}

		.components-button.is-link:active {
			margin-top: 2px;
		}
	}

	&__resolutions {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		justify-content: flex-end;
	}

	&__resolution {
		padding: 14px 10px;
		box-shadow: none;

		&--is-active {
			box-shadow: inset 0 -5px 0 colors.$wp-components-color-accent;
			background-color: colors.$nab-background-white;
		}
	}
}