@import "../common/css/variables";
@import "../common/css/functions";
@import "../common/css/common";

// Set the colors of the sidebar icon.
.components-button[aria-controls="wp-parsely-block-editor-sidebar:wp-parsely-content-helper"] {
	&:hover {
		background-color: #fff;
	}

	&:focus {
		background-color: #fff;
	}

	&.is-pressed,
	&.is-pressed:hover {

		background-color: var(--parsely-green-65);

		.wp-parsely-sidebar-icon path {
			fill: var(--parsely-green-10);
		}
	}
}

.content-helper-error-message {
	margin-top: to_rem(15px) !important;
}

.wp-parsely-content-helper-error .content-helper-error-message {
	margin-top: to_rem(15px) !important;
}

p.content-helper-error-message-hint {
	color: var(--gray-700);
}

// Notice components with errors that appear within Sidebar panels.
.wp-parsely-content-helper-error.components-notice {
	.components-notice__content {
		margin: 0;

		.content-helper-error-message {
			margin-top: 0 !important;

			p:last-child {
				margin-bottom: 0 !important;
			}
		}
	}
}

.wp-parsely-content-helper {
	.wp-parsely-sidebar-header {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: to_rem(24px);
		align-self: stretch;

		.components-button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
		}
	}

	.wp-parsely-sidebar-main-panel {
		// Settings button for panels.
		.components-panel button.panel-settings-button,
		.components-panel .panel-settings-button > button {
			height: unset;
			min-width: unset;
			padding: 0;
		}

		.wp-parsely-sidebar-tabs {
			// Error messages that are not contained within a panel.
			.components-panel > .content-helper-error-message {
				margin: var(--grid-unit-20);
			}

			.components-tab-panel__tabs {
				// Individual tab.
				button {
					display: flex;
					height: to_rem(48px);
					flex-direction: column;
					align-items: center;
					flex: 1 0 0;
				}

				// Divider line.
				.components-tab-panel__tabs-item::after {
					height: calc(var(--wp-admin-border-width-focus) * 1);
					outline: 2px solid transparent;
					outline-offset: -1px;
					background: var(--gray-400);
				}

				// Make the active tab divider WP blue.
				.components-tab-panel__tabs-item.is-active::after {
					background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
				}
			}

			.components-button.boost-engagement {
				display: flex;
				justify-content: center;
				margin: var(--grid-unit-15);
			}
		}
	}

	.parsely-spinner-wrapper {
		display: flex;
		justify-content: center;
		margin: to_rem(40px) 0;

		svg {
			width: 22px;
			height: 22px;
		}
	}
}