@use 'common/codemirror';

$sections: general, editor, debug;

p.submit {
	display: flex;
	justify-content: space-between;
}

.settings-section,
p.submit {
	max-inline-size: 1020px;
}

.nav-tab-wrapper {
	margin-block-end: 1em;
}

input[type="number"] {
	inline-size: 4em;
}

.CodeMirror {
	max-inline-size: 800px;
	inline-size: 100%;
	padding-inline-end: 1em;
}

.CodeMirror-sizer::before {
	content: '<?php';
}

body.no-js {
	.nav-tab-wrapper {
		display: none;
	}

	.settings-section {
		display: block !important;
	}
}

body.js {
	.settings-section-title {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		block-size: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		inline-size: 1px;
		word-wrap: normal !important;
	}

	.nav-tab:not(.nav-tab-active) {
		cursor: pointer;
	}

	.settings-section {
		display: none;
	}

	@each $section in $sections {
		.wrap[data-active-tab=#{$section}] .#{$section}-settings {
			display: block;
		}
	}
}

.license-status {
	display: inline-block;
	padding-inline-end: 2em;
	line-height: 2;
	color: #aaa;
}

.license-status-valid {
	color: #2ecc40;
}

.license-status-expired {
	color: #dc3232;
}

.wrap[data-active-tab="license"] .submit {
	display: none;
}

#code_snippets_remove_license {
	color: #b32d2e;
	border-color: #b32d2e;
}

#code_snippets_license_key {
	font-family: Consolas, Monaco, monospace;
}

#cloud_token {
	max-inline-size: 450px;
	inline-size: 90vw;
}

.cloud-message {
	inline-size: fit-content;
	padding: 5px;
	border-radius: 5px;
	font-weight: 600;
}

.cloud-error {
	background: #e53935;
	color: #ffebee;
}

.cloud-success {
	background: #43a047;
	color: #e8f5e9;
}

.refresh-success {
	background: #2271b1;
	color: #ffeb3b;
}

.cloud-settings tbody tr:nth-child(n+5) {
	display: none;
}