@import "variables";
@import "functions";

/**
 * Import custom components SCSS here.
 */
@import "../components/tone-selector/style";
@import "../components/persona-selector/style";
@import "../components/input-range/style";
@import "../components/thumbnail/style";
@import "../components/snackbar-notices/style";
@import "../components/loading/style";

/**
 * Common styles for Content Intelligence.
 */
.parsely-panel-settings {
	width: 100%;

	.parsely-panel-settings-header {
		margin: to_rem(10px) 0;
		display: flex;
		width: 100%;

		.parsely-panel-settings-header-label {
			margin: 0 0 0 to_rem(5px);
			flex-grow: 2;
			text-align: left;

			.components-base-control__field {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.components-base-control__label {
					margin-bottom: 0;
				}
			}
		}
	}

	.parsely-panel-settings-body {
		display: flex;
		padding: to_rem(6px) 0 var(--grid-unit-20) 0;
		flex-direction: column;
		gap: to_rem(10px);
		align-self: stretch;
	}
}

.wp-parsely-editor-sidebar-label {
	// Replicate native label styles.
	align-self: stretch;
	color: var(--sidebar-black);
	font-size: var(--font-size--smaller);
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
}

.wp-parsely-content-helper-error {
	margin: 0;
	align-self: flex-start;

	p {
		margin: 0;
	}

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

.wp-parsely-collapsible-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--grid-unit-20);
	align-self: stretch;
	border-radius: 2px;
	border-bottom: none;
	border-top: none;
	margin: 0;
	padding: 0;
	margin-bottom: to_rem(8px);

	.components-panel__body-title {
		display: flex;
		align-items: center;
		align-self: stretch;
		margin: 0 to_rem(-16px) to_rem(6px);
		padding: 0;

		.components-panel__icon,
		svg {
			order: -1;
			margin-right: var(--grid-unit-10);
			margin-left: 0;
		}

		&:hover {
			background-color: transparent;
		}
	}

	&.is-opened {
		padding: 0;

		> div:first-of-type {
			margin-top: calc(-1 * var(--grid-unit-20));
		}

		.components-panel__body-title {
			margin: 0 calc(-1 * var(--grid-unit-20)) to_rem(6px);
			padding-bottom: 0;
		}
	}

	.components-panel__body-toggle.components-button {
		padding: var(--grid-unit-20) var(--grid-unit-20);
		color: var(--Gutenberg-Gray-900, #1e1e1e);
		font-size: to_rem(11px);
		font-style: normal;
		font-weight: 600;
		line-height: to_rem(16px); /* 145.455% */
		text-transform: uppercase;

		.components-panel__arrow {
			margin-right: 0;
		}
	}

	.components-panel__body {
		&.is-opened {
			padding: 0;
		}
	}
}