@use '~@wordpress/base-styles/mixins' as mixins;
@include mixins.wordpress-admin-schemes();

$default-scheme-color: #007cba;
$border-color: #c3c4c7;
$input-border-color: #8c8f94;
$background-color: #f9f9f9;

.rtex-wrapper #poststuff {

	h2 {
		font-size: 18px;
	}

	ul {
		margin: 0 0 16px 1.5em;
		list-style: outside disc;
	}

	.inside {
		padding: 16px;
		margin: 0;

		> *:last-child {
			margin-bottom: 0 !important;
		}
	}
}

.rtex-table {

	th,
	td {
		padding: 0.5em 1em;
		border: 1px solid $border-color;
	}

	th {
		background: $background-color;
	}

	[type="text"] {
		width: 100%;
	}

	.wp-picker-container {
		position: relative;

		.wp-picker-input-wrap:not(.hidden) {
			display: flex;
			margin-top: 8px;
		}

		.wp-picker-holder {
			position: absolute;
			z-index: 1;
		}

		.wp-color-result.button {
			margin: 0;
		}
	}
}

.rtex-range {
	display: flex;
	flex-wrap: wrap;
	gap: 2em 1em;
	align-items: center;
	padding-top: 7px;

	[type="range"] {
		flex: 1;
		height: 2px;
		background-color: $border-color;
		-webkit-appearance: none;
		appearance: none;

		&::-webkit-slider-thumb {
			position: relative;
			display: block;
			width: 14px;
			height: 14px;
			cursor: pointer;
			background-color: var(--wp-admin-theme-color, $default-scheme-color);
			border: none;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			-webkit-appearance: none;
			appearance: none;
		}
	}
}

.rtex-input {

	display: flex;
	overflow: hidden;
	border: $input-border-color solid 1px;
	border-radius: 4px;

	input {
		max-width: 100%;
		margin: 0;
		border: none;
		border-radius: 0;

		&[type="number"] {
			width: 5em;
		}

		+ span {
			display: flex;
			align-items: center;
			padding: 0 8px;
			background: $background-color;
			border-left: $border-color solid 1px;
		}
	}
}

.rtex-switch {
	position: relative;
	display: inline-block;
	vertical-align: top;

	input {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;

		&:checked ~ .rtex-switch-thumb {
			left: 23px;
			background-color: #fff;
		}

		&:checked ~ .rtex-switch-track {
			background-color: var(--wp-admin-theme-color, #007cba);
			border-color: var(--wp-admin-theme-color, #007cba);
		}

		&:focus ~ .rtex-switch-track {
			outline: 2px solid transparent;
			outline-offset: 2px;
			box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
		}
	}
}

.rtex-switch-track {
	box-sizing: border-box;
	display: block;
	width: 40px;
	height: 20px;
	border: 1px solid;
	border-radius: 12px;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.rtex-switch-thumb {
	position: absolute;
	top: 50%;
	left: 4px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background-color: currentcolor;
	border-radius: 50%;
	transition: 0.3s ease;
}

@media screen and (max-width: 960px) {

	.rtex-table-wrap {
		overflow-x: scroll;
	}

	.rtex-table {
		min-width: 1200px;

		th,
		td {
			display: table-cell;
		}
	}
}