/* stylelint-disable-next-line selector-class-pattern */
.progress-planner_page_progress-planner-settings {

	#wpwrap {
		background-color: var(--prpl-background);
	}

	ul#adminmenu {

		a.wp-has-current-submenu,
		> li.current > a.current {

			&::after {
				border-right-color: var(--prpl-background) !important;
			}
		}
	}

	.prpl-settings-wrap {

		h1 {
			display: flex;
			align-items: center;
			padding: 1.2rem;
			margin-bottom: 2rem;

			span {
				font-weight: 600;
			}
		}

		#prpl-settings {

			.prpl-widget-wrapper {
				padding: var(--prpl-settings-page-gap) var(--prpl-settings-page-gap) 2rem var(--prpl-settings-page-gap);
			}
		}
	}

	.prpl-settings-form-wrap {
		background-color: var(--prpl-background-paper);

		border: 1px solid var(--prpl-color-border);
		border-radius: var(--prpl-border-radius);
		padding: var(--prpl-padding);
		box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.07), -2px 0 6px rgba(0, 0, 0, 0.07);
	}

	.prpl-settings-section-wrapper {
		border: 1px solid var(--prpl-color-border);
		border-radius: var(--prpl-border-radius);
		padding: var(--prpl-padding);
		flex-grow: 1;
	}

	.prpl-settings-section-title {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		background: var(--prpl-background-monthly);
		padding: 1.2rem;
		border-radius: 0.5rem;
		margin-bottom: var(--prpl-padding);

		&:first-child {
			margin-top: 0;
		}

		.icon {
			width: 1.25em;
			height: 1.25em;
		}
	}

	.prpl-pages-item {
		border: 1px solid var(--prpl-color-border);
		border-radius: var(--prpl-border-radius);
		padding: var(--prpl-padding);
		flex-grow: 1;
		width: 45%;

		&:has(input[type="radio"][value="yes"]:checked),
		&:has(input[type="radio"][value="no"]:checked) {

			h3 {

				.icon-exclamation-circle {
					display: block;
				}

				.icon-check-circle {
					display: none;
				}
			}
		}

		&:has(option[value=""]:not(:checked)):has(input[type="radio"][value="yes"]:checked),
		&:has(input[type="radio"][value="not-applicable"]:checked) {

			h3 {

				.icon-check-circle {
					display: block;
				}

				.icon-exclamation-circle {
					display: none;
				}
			}
		}

		.item-actions,
		.prpl-select-page {
			display: flex;
			align-items: center;
			gap: 1rem;
		}

		.remind-button,
		.assign-button {

			svg {
				width: 1rem;
				height: 1rem;
			}
		}

		h3 {
			font-size: 1.15rem;
			margin: 0;

			display: flex;
			align-items: center;
			gap: 0.5rem;

			.icon {
				width: 1em;
				height: 1em;
				display: none;
			}
		}

		p {
			margin-block-start: 0.5rem;
			margin-block-end: 1rem;
		}

		.radios {
			margin-bottom: 1rem;
		}

		.prpl-radio-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;

			[data-action="select"],
			[data-action="create"] {
				visibility: hidden;
			}

			&:has(input[type="radio"]:checked) {

				[data-action="select"],
				[data-action="create"] {
					visibility: visible;
				}
			}

			&:has(input[type="radio"][value="not-applicable"]) {
				padding-top: 0.25rem; /* Add bit height, because we dont have button or select */
			}
		}
	}

	.prpl-column-pages {
		margin-bottom: var(--prpl-gap);

		.prpl-settings-section-title {
			background: var(--prpl-background-setting-pages);

			.icon {

				path {
					fill: var(--prpl-color-setting-pages-icon);
				}
			}
		}
	}

	.prpl-pages-list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--prpl-settings-page-gap);

		.item-description {

			h3 {
				margin-bottom: 2rem;
			}

			& > p {
				display: none;
			}
		}

		.radios {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}
	}

	.prpl-button {
		color: var(--prpl-color-gray-7);
		text-decoration: none;
		border: 1px solid var(--prpl-color-border);
		border-radius: var(--prpl-border-radius);
		padding: 0.5em 0.5em;
		font-size: 14px; /* It matches <select> font size, which comes from Core */
		display: inline-flex;

		&:hover,
		&:focus {
			color: var(--prpl-color-link);
			border-color: var(--prpl-color-link);
			background-color: var(--prpl-background-content-badge);
		}
	}

	.radios {
		display: flex;
		gap: 3rem;
	}
}

/* Post types */
.prpl-column-post-types {

	.prpl-settings-section-title {

		svg {
			color: var(--prpl-color-setting-posts-icon);

			path {
				fill: currentcolor;
			}
		}

		background-color: var(--prpl-background-setting-posts);
	}

}

/* Login destination */
.prpl-column-login-destination {

	.prpl-settings-section-title {

		svg {
			color: var(--prpl-color-setting-login-icon);
		}

		background-color: var(--prpl-background-setting-login);
	}

}

/* Grid layout for wrapper for:
- Valuable post types
- Default login destination
- License keys
*/
#prpl-grid-column-wrapper {
	display: grid;
	margin-bottom: var(--prpl-gap);

	/* There are 5 or less valuable post types */
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: var(--prpl-settings-page-gap);

	.prpl-column {
		align-self: stretch;
		display: flex;
		flex-direction: column;

		.prpl-widget-wrapper {
			flex: 1;
			margin-bottom: 0;
		}
	}

	/* Valuable post types */
	.prpl-column:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	/* Default login destination */
	.prpl-column:nth-child(2) {
		grid-column: 2;
		grid-row: 1;
	}

	/* License keys */
	.prpl-column:nth-child(3) {
		grid-column: 1 / span 2;
		grid-row: 2;
	}

	/* We have more than 5 valuable post types */
	&:has([data-has-many-valuable-post-types]) {
		grid-template-rows: auto auto;

		/* Valuable post types */
		.prpl-column:nth-child(1) {
			grid-column: 1;
			grid-row: 1 / span 2;

			/* Span 2 rows on the left */
		}

		/* Default login destination */
		.prpl-column:nth-child(2) {
			grid-column: 2;
			grid-row: 1;
		}

		/* License keys */
		.prpl-column:nth-child(3) {
			grid-column: 2;
			grid-row: 2;
		}
	}
}

/* Valuable post types */
#prpl-post-types-include-wrapper {
	padding-top: 0.75rem;

	label {
		display: block;
		margin-top: 0.75rem;

		&:first-child {
			margin-top: 0;
		}
	}
}