/* Media */
@mixin wp-mobile {
	@media screen and ( max-width: 782px ) {
		@content;
	}
}
@mixin wp-not-mobile {
	@media screen and ( min-width: 782px ) {
		@content;
	}
}

/* Variables */
:root {
	--ymfseo-settings-background: #fefefe;
	--ymfseo-settings-border:     #dcdcde;

	--ymfseo-red:    #dc3232;
	--ymfseo-green:  #46B450;
	--ymfseo-yellow: #ffb900;
	--ymfseo-blue:   #0073aa;

	--ymfseo-gap-primary: 20px;

	--ymfseo-border-radius: 4px;
}

/* Columns */
th.manage-column.column-ymfseo {
	width: 40px;

	text-align: center;
}
td.ymfseo.column-ymfseo {
	vertical-align: middle;
}
.column-ymfseo__dot {
	width: 40px;
	height: 40px;

	display: flex;
	align-items: center;
	justify-content: center;

	span {
		background-color: #f0f0f0;
		width: 8px;
		height: 8px;
		border-radius: 50%;

		display: block;

		&.good {
			background-color: var( --ymfseo-green );
		}

		&.alert {
			background-color: var( --ymfseo-yellow );
		}

		&.bad {
			background-color: var( --ymfseo-red );
		}

		&.noindex {
			background-color: var( --ymfseo-blue );
		}
	}
}

/* Meta box */
#ymfseo_fields.postbox {
	/* Container */
	> .inside {
		margin-top: 0;
		padding: 12px;

		.ymfseo-box {
			/* Container */
			&__container {
				display: flex;
				flex-direction: column;
				gap: 16px;
			}
	
			/* Field */
			&__field-box {
				display: flex;
				flex-direction: column;
				gap: 6px;
	
				> label {
					font-size: 11px;
					font-weight: 500;
					line-height: 1.4;
					text-transform: uppercase;
					display: inline-block;
				}

				textarea {
					height: auto;
				}

				p {
					margin: 2px 0 0 0;
	
					font-size: 12px;
					color: #757575;
				}
			}

			/* Checkbox */
			&__checkbox {
				display: flex;
				align-items: center;
				gap: 8px;

				> span {
					display: flex;
					align-items: center;

					input {
						margin: 0;
					}
				}
			}

			details {
				&:not( [ open ] ) + details {
					margin-top: -16px;
				}

				summary {
					margin-bottom: 10px;

					cursor: pointer;

					text-transform: uppercase;
				}
			}
		}
	}

	/* Gutenberg fix */
	&:has( .ymfseo-box_gutenberg ) {
		/* Header tab */
		> .postbox-header {
			.components-panel__body + .edit-post-meta-boxes-area:has( #ymfseo_fields.postbox ) & {
				border-top: none;
			}

			h2 {
				padding: 0 16px ;
	
				font-size: 13px;
			}
		}

		/* Container */
		> .inside {
			padding: 5px 16px 16px 16px;

			.ymfseo-box {
				/* Checkbox */
				&__checkbox {
					margin-top: 2px;
	
					gap: 10px;
				}
			}
		}
	}
}

/* Length indicator */
.ymfseo-length-checker {
	background-color: rgba( 0, 0, 0, .2 );
	width: 100%;
	height: 2px;

	position: relative;

	&::after {
		content: '';

		background-color: var( --ymfseo-yellow );
		width: var( --ymfseo-checker-width );
		max-width: 100%;

		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
	}

	&_term {
		margin-top: 6px;
	}

	&.good::after {
		background-color: var( --ymfseo-green );
	}
	&.bad::after {
		background-color: var( --ymfseo-red );
	}
}

/* Tags table */
.ymfseo-box__tags-table {
	display: grid;
	grid-template-columns: max-content 1fr;
	row-gap: 5px;

	> div {
		&:nth-child( odd ) {
			display: flex;
			align-items: flex-start;

			span {
				background-color: #f0f0f0;
				margin-right: 6px;
				padding: 1px 4px 3px 4px;
				border-radius: 4px;

				display: block;

				word-wrap: nowrap;
			}
		}

		&:nth-child( even ) {
			overflow-wrap: anywhere;
		}
	}
}

/* Settings */
.ymfseo-settings-page {
	html:has( & ) {
		scroll-behavior: smooth;
	}

	/* Notice */
	.notice {
		border-top-color: var( --ymfseo-settings-border );
		border-right-color: var( --ymfseo-settings-border );
		border-bottom-color: var( --ymfseo-settings-border );
		border-radius: var( --ymfseo-border-radius );
		box-shadow: none;
	}

	/* Navigation */
	&__nav {
		margin: 10px 0;

		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;

		&-item {
			background-color: var( --ymfseo-settings-background );
			padding: 6px 10px 6px 6px;
			border: 1px solid var( --ymfseo-settings-border );
			border-radius: var( --ymfseo-border-radius );

			cursor: pointer;

			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5px;

			text-decoration: none;

			&:hover {
				color: var( --ymfseo-primary );
			}

			&.active {
				background-color: var( --ymfseo-primary );

				color: #fff;
			}

			.dashicons {
				margin-bottom: -1px;
				transition: none;

				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 14px;

				&::before {
					transition: none;
				}
			}

			.label {
				margin-top: -1px;
			}
		}
	}

	/* Form */
	form {
		/* Section */
		section {
			background-color: var( --ymfseo-settings-background );
			margin-top: var( --ymfseo-gap-primary );
			border: 1px solid var( --ymfseo-settings-border );
			border-radius: var( --ymfseo-border-radius );

			&:not( .active ) {
				visibility: hidden;
				position: absolute;
				top: -200vh;
				left: -200vw;
			}

			&:last-of-type {
				display: none;
			}

			/* Title */
			> h2 {
				margin: 0;
				padding: var( --ymfseo-gap-primary );

				display: flex;
				align-items: center;
				gap: 10px;

				color: var( --ymfseo-secondary );

				@include wp-not-mobile {
					scroll-margin-top: var( --ymfseo-gap-primary );
				}
			}

			/* Description */
			> p {
				&:not( .submit ) {
					margin: 0;
					padding: 0 var( --ymfseo-gap-primary ) var( --ymfseo-gap-primary ) var( --ymfseo-gap-primary );

					&:not( :last-of-type ) {
						margin-bottom: -15px;
					}
				}
			}

			/* Code */
			code {
				margin: 0;
				padding: 2px 5px 2px;
				border-radius: 3px;
			}

			/* Table */
			.form-table {
				margin: 0;
				padding: var( --ymfseo-gap-primary );
				border-top: 1px solid var( --ymfseo-settings-border );
				
				display: block;

				@include wp-mobile {
					th {
						padding-bottom: 4px;
					}

					tr:first-of-type th {
						padding-top: 0;
					}
				}

				tbody {
					width: 100%;
					display: block;

					tr {
						width: 100%;
						display: block;

						th {
							flex-shrink: 0;

							label {
								display: flex;
								align-items: center;
								gap: 6px;

								.dashicons {
									display: flex;
									align-items: center;
									justify-content: center;

									font-size: 16px;
								}
							}
						}

						&.sub-field {
							th {
								font-weight: 400;
								color: #494e51;
							}
						}

						&:has( .CodeMirror ) {
							@include wp-not-mobile {
								display: flex;
							}

							td {
								width: 100%;

								overflow-x: auto;

								.CodeMirror {
									width: 100%;
									box-sizing: border-box;

									border-radius: 4px;
									border: 1px solid var( --ymfseo-settings-border );
								}
							}
						}

						&:has( .ymfseo-settings-redirects-section ) {
							display: flex;

							td:last-of-type {
								flex: 1;
							}
						}
					}
				}
			}

			/* Custom save button */
			> .ymfseo-submit {
				padding: var( --ymfseo-gap-primary );
				border-top: 1px solid var( --ymfseo-settings-border );

				display: flex;

				@include wp-mobile {
					justify-content: flex-end;
				}
			}
		}

		/* WordPress save button */
		> .submit {
			display: none;
		}
	}

	/* Separator grid */
	.ymfseo-settings-separator-grid {
		width: 25em;
		margin-bottom: 10px;
	
		display: grid;
		grid-template-columns: repeat( 7, 1fr );
		gap: 8px;
	
		@include wp-mobile {
			width: 100%;
	
			display: flex;
			flex-wrap: wrap;
		}
	
		&__item {
			background-color: #fff;
			max-width: 50px;
			border-radius: 4px;
			border: 1px solid #8c8f94;
			aspect-ratio: 1;
	
			position: relative;
	
			display: flex;
			align-items: center;
			justify-content: center;
	
			@include wp-mobile {
				width: 45px;
			}
	
			&:has( input:checked ) {
				border-color: var( --ymfseo-secondary );
				box-shadow: 0 0 0 1px var( --ymfseo-secondary );
				outline: 2px solid transparent;
			}
	
			input {
				width: 100%;
				height: 100%;
				margin: 0 !important;
				border-radius: 0;
	
				position: absolute;
	
				opacity: 0;
			}

			span {
				width: 100%;
				height: 100%;
	
				display: flex;
				align-items: center;
				justify-content: center;
	
				font-size: 17px;
				color: #2c3338;
			}
		}
	}

	/* Image */
	.ymfseo-settings-image-section {
		img {
			width: 25em;
			height: auto;
			margin-bottom: 16px;
			border-radius: 6px;
	
			@include wp-mobile {
				width: 100%;
			}
		}
	
		.action-buttons {
			button {
				&[ hidden ] {
					display: none;
				}
			}
		}
	}

	/* Redirects */
	.ymfseo-settings-redirects-section {
		display: flex;
		flex-direction: column;
		gap: 14px;

		&__grid {
			display: flex;
			flex-direction: column;
			row-gap: 20px;
		}

		&__item {
			display: grid;
			grid-template-columns: auto 1fr auto 1fr auto;
			align-items: center;
			gap: 6px;

			@include wp-mobile {
				width: 100%;

				grid-template-columns: 1fr auto 1fr;
			}

			.regex {
				padding: 0 10px;

				display: flex;
				align-items: center;
				gap: 8px;

				input {
					margin: 0;

					justify-self: center;

					@include wp-mobile {
						order: 4;
					}
				}
			}

			> .dashicons {
				padding-left: 8px;

				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 18px;

				&:hover {
					cursor: pointer;

					color: var( --ymfseo-red );
				}
			}
		}

		.button {
			margin-bottom: 10px;

			align-self: flex-end;
		}
	}

	/* Representative */
	tbody:has( tr.rep-type option[ value=org ][ selected ] ) tr.rep-person {
		display: none;
	}
	tbody:has( tr.rep-type option[ value=person ][ selected ] ) tr.rep-org {
		display: none;
	}
}

/* Site Health */
.ymfseo-site-health {
	.health-check-accordion {
		h4.health-check-accordion-heading {
			.dashicons {
				margin-right: 10px;

				&.dashicons-yes-alt {
					color: var( --ymfseo-green );
				}

				&.dashicons-warning {
					color: var( --ymfseo-yellow );
				}

				&.dashicons-dismiss {
					color: var( --ymfseo-red );
				}
			}	
		}

		.health-check-accordion-panel {
			overflow-x: auto;
		}
	}
}