@use "snackbar";

.settings_page_form-block {
	.column-data {
		strong {
			display: block;
			font-size: 14px;
			margin-bottom: .2em;
		}
	}
	
	.column-actions {
		width: 20%;
	}
	
	.column-source {
		width: 14%;
	}
}

.form-block__button {
	--background: #007cba;
	--background-dark: #005a87;
	
	&.is-busy[aria-disabled="true"] {
		@media not (prefers-reduced-motion) {
			animation: form-block-button__busy-animation 2500ms infinite linear;
		}
		
		background-image: linear-gradient(-45deg, var(--background) 33%, var(--background-dark) 33%, var(--background-dark) 70%, var(--background) 70%);
	}
}

.form-block__compare-table {
	.green,
	.grey,
	.red {
		border-radius: 15px;
		padding: 3px 8px;
		white-space: nowrap;
	}
	
	.green {
		background-color: #48a03e;
		color: #111;
	}
	
	.grey {
		background-color: #8c8f94;
		color: #111;
	}
	
	.red {
		background-color: #c5443f;
		color: #fff;
	}
}

.form-block__content-wrapper {
	max-width: 692px;
}

.form-block__data-details {
	margin-top: .5em;
	
	dl {
		display: flex;
		flex-flow: row wrap;
		margin-block: .5em 1.5em;
	}
	
	dt,
	dd {
		background-color: #f6f7f7;
		border-block-end: 1px solid #ddd;
		border-inline: 1px solid #ddd;
		box-sizing: border-box;
		padding: .75em .5em;
	}
	
	dt {
		flex: 0 0 200px;
		
		&:first-child {
			border-block-start: 1px solid #ddd;
		}
		
		&:nth-child(4n - 3) {
			background-color: #fff;
		}
	}
	
	dd {
		border-inline-start: 0;
		flex: 0 0 calc(100% - 200px);
		margin: 0;
		white-space: pre-wrap;
		
		&:first-of-type {
			border-block-start: 1px solid #ddd;
		}
		
		&:nth-child(4n - 2) {
			background-color: #fff;
		}
	}
}

.form-block__delete {
	--background: #fcf0f1;
	--background-dark: #facfd2;
	
	&.form-block__delete {
		background-color: #fcf0f1;
		border-color: #d63638;
		color: #d63638;
		
		&:focus,
		&:hover {
			background-color: #fcf0f1;
			border-color: #710d0d;
			color: #710d0d;
		}
	}
}

@keyframes form-block-button__busy-animation {
	0% {
		background-position: 200px 0;
	}
}

.form-block__field-output {
	margin-block-start: .5em;
	
	> :first-child {
		margin-block-start: 1em;
	}
}

.form-block__settings {
	.is-hidden {
		display: none;
	}
	
	.nav-tab {
		cursor: pointer;
	}
	
	&:has(#nav-tab__content--pro.nav-tab-content-active) .submit {
		display: none;
	}
}