@use "../../styles/variables" as *;

// Values from the "Reno Settings Split View" design (Settings tab).
$wcgs-card-border: #e4e6e9;
$wcgs-card-shadow: 0 1px 2px rgba(16, 17, 20, 0.04);
$wcgs-danger: #d63638;
$wcgs-danger-hover: #b32d2e;
$wcgs-error: #b42318;
$wcgs-success: #1e6b41;

// White card of the nav and the panel (`boxWrap`).
@mixin wcgs-card {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid $wcgs-card-border;
	border-radius: 8px;
	box-shadow: $wcgs-card-shadow;
}

// Label/control row of the settings and migration lists.
@mixin wcgs-row {
	gap: 12px 40px;
	padding: 12px 0;
}

// Solid colored button (primary, danger, destroy).
@mixin wcgs-btn-fill($color, $hover) {
	border-color: $color;
	background: $color;
	color: #fff;

	&:hover {
		border-color: $hover;
		background: $hover;
	}
}

@keyframes wcgs-spin {

	to {
		transform: rotate(360deg);
	}
}

// `layBarIn`.
@keyframes wcgs-bar-in {

	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

// `layPopIn`.
@keyframes wcgs-pop-in {

	from {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

// `pvScrimIn`.
@keyframes wcgs-scrim-out {

	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes wcgs-pop-out {

	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}
}

@keyframes wcgs-scrim-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

// Page (`boxWrap` + `pgSettings`).
.wcgs-settings-page {
	min-height: 0;
	overflow-y: auto;
	padding: 20px max(24px, calc((100% - 1440px) / 2));
	background: $wcgs-wp-gray;
	color: $wcgs-text;

	&__inner {
		gap: 18px;
	}

	&__head {
		min-height: 38px;

		// Beats the wp-admin `h1` rules.
		h1 {
			margin: 0;
			padding: 0;
			font-size: 22px;
			font-weight: 600;
			line-height: 1.3;
			letter-spacing: -0.01em;
			color: $wcgs-text;
		}
	}

	&__count {
		margin-right: 6px;
		font-size: 13px;
		color: $wcgs-muted;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
		animation: wcgs-pop-in 200ms $wcgs-ease;
	}

	&__reset-wrap {

		@include wcgs-reveal;
	}

	&__reset {

		@include wcgs-reset-button;
		width: 30px;
		height: 30px;
		color: $wcgs-faint;
		transition: color 160ms $wcgs-ease;

		&:hover {
			color: $wcgs-text;
		}
	}

	// `rs-tip-box`.
	&__tip {

		@include wcgs-tip;
		top: calc(100% + 6px);
		padding: 6px 10px;
		line-height: 18px;
		white-space: nowrap;
	}

	&__reset-wrap:hover &__tip {

		@include wcgs-tip-visible;
	}

	&__save {

		@include wcgs-reset-button;
		height: 38px;
		padding: 0 16px;
		border-radius: 4px;
		background: $wcgs-accent;
		font-size: 14px;
		font-weight: 500;
		color: #fff;
		white-space: nowrap;
		opacity: 0.45;
		cursor: default;
		transition:
			background 160ms $wcgs-ease,
			color 160ms $wcgs-ease;

		&.is-dirty {
			opacity: 1;
			cursor: pointer;
		}
	}

	// Not `sp-align-start`: the narrow-screen @media rule must override it.
	&__body {
		align-items: flex-start;
	}
}

// Sub-tab nav (`setTabs`).
.wcgs-settings-nav {
	position: sticky;
	top: 0;
	flex: 0 0 240px;
	max-height: calc(100vh - 132px);
	overflow-y: auto;
	padding: 8px 0;

	@include wcgs-card;

	&__item {

		@include wcgs-reset-button;
		width: calc(100% - 16px);
		margin: 0 8px 3px;
		padding: 10px 12px;
		border-radius: 6px;
		font-size: 15px;
		font-weight: 500;
		color: $wcgs-text-2;
		text-align: left;
		transition:
			background 120ms $wcgs-ease,
			color 120ms $wcgs-ease;

		svg {
			flex: 0 0 16px;
		}

		&:hover {
			background: #efeff1;
		}

		&.is-active {
			background: $wcgs-accent-tint;
			color: $wcgs-accent;
		}
	}
}

.wcgs-settings-card {

	@include wcgs-card;

	&__body {
		padding: 28px 32px;

		> * {
			max-width: 820px;
		}
	}

	&__loading {
		min-height: 240px;
	}
}

// Rows.
.wcgs-settings-heading {
	margin: 28px 0 4px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: $wcgs-faint;

	&:first-child {
		margin-top: 4px;
	}
}

.wcgs-settings-intro {
	max-width: 72ch;
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
	color: $wcgs-body;
	text-wrap: pretty;

	a {
		font-weight: 500;
		color: $wcgs-accent;
		text-decoration: none;

		&:hover,
		&:focus {
			color: $wcgs-accent;
			text-decoration: underline;
			box-shadow: none;
		}
	}
}

.wcgs-settings-row {

	@include wcgs-row;

	&__label {
		width: 320px;
		max-width: 100%;
		box-sizing: border-box;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
		color: $wcgs-text;
	}

	// Switch rows never wrap; the label shrinks instead.
	&.is-inline {
		flex-wrap: nowrap;
	}

	&.is-inline &__label {
		flex: 0 1 320px;
		width: auto;
		min-width: 0;
	}

	&__control {
		flex: 1 1 280px;
		min-width: 240px;
	}

	&__fill {
		flex: 1 0 auto;
	}
}

.wcgs-settings-field {
	max-width: 440px;
}

.wcgs-settings-reveal {
	animation: wcgs-bar-in 200ms $wcgs-ease;
}

// Help tip (`lt-tip`).
.wcgs-lt-tip {
	position: relative;
	flex: 0 0 15px;
	color: $wcgs-faint;
	cursor: help;
	outline: none;

	&__box {
		position: absolute;
		bottom: calc(100% + 8px);
		left: 50%;
		z-index: 30;
		max-width: calc(100vw - 48px);
		box-sizing: border-box;
		padding: 7px 10px;
		border-radius: 6px;
		background: $wcgs-text;
		box-shadow: 0 6px 20px rgba(16, 17, 20, 0.18);
		font-size: 12px;
		font-weight: 400;
		line-height: 1.45;
		letter-spacing: normal;
		text-transform: none;
		color: #fff;
		white-space: normal;
		text-align: left;
		cursor: default;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(-50%) translateY(4px);
		transition:
			opacity 160ms $wcgs-ease,
			transform 160ms $wcgs-ease,
			visibility 0s linear 160ms;

		// Bridge the gap so the pointer can reach a link in the tip.
		&::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			height: 10px;
		}

		.wcgs-lt-tip__link {
			font-weight: 500;
			color: #c4b5fd;
			text-decoration: underline;
			text-underline-offset: 2px;

			&:hover,
			&:focus {
				color: #c4b5fd;
				box-shadow: none;
			}
		}
	}

	&:hover &__box,
	&:focus &__box,
	&:focus-within &__box {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
		transition:
			opacity 160ms $wcgs-ease,
			transform 160ms $wcgs-ease,
			visibility 0s;
	}
}

// Switch (`tog` / `knb`).
.wcgs-switch {

	@include wcgs-reset-button;
	position: relative;
	flex: 0 0 40px;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: $wcgs-off;
	box-shadow: inset 0 1px 2px rgba(16, 17, 20, 0.14);
	transition:
		background 220ms $wcgs-ease,
		box-shadow 220ms $wcgs-ease;

	&:focus {
		box-shadow: inset 0 1px 2px rgba(16, 17, 20, 0.14);
	}

	&.is-on {
		background: $wcgs-accent;
		box-shadow: inset 0 1px 2px rgba(16, 17, 20, 0.08);
	}

	&:focus-visible {
		box-shadow: $wcgs-focus-ring;
	}

	&__knob {
		position: absolute;
		left: 2px;
		top: 2px;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #fff;
		box-shadow:
			0 1px 2px rgba(16, 17, 20, 0.28),
			0 0 1px rgba(16, 17, 20, 0.18);
		transition: transform 200ms $wcgs-ease;
	}

	&.is-on &__knob {
		transform: translateX(18px);
	}
}

// Text field with a note (`spIn`).
.wcgs-text-field {
	max-width: 440px;

	input.wcgs-text-field__input {
		height: 40px;
		min-height: 0;
		margin: 0;
		padding: 0 12px;
		box-sizing: border-box;
		border: 1px solid $wcgs-border;
		border-radius: 4px;
		background: #fff;
		box-shadow: none;
		outline: none;
		font-size: 14px;
		color: $wcgs-text;
		transition: border-color 120ms $wcgs-ease;

		&::placeholder {
			color: $wcgs-faint;
		}

		&:hover {
			border-color: $wcgs-border-hover;
		}

		&:focus {
			border-color: $wcgs-text;
			box-shadow: none;
		}
	}

	&__note {
		font-size: 13px;
		line-height: 1.45;
		color: $wcgs-muted;
	}
}

// Checkbox and radio lists (`spCb`, `expItems`).
.wcgs-check-list {

	&__item {

		@include wcgs-reset-button;
		font-size: 14px;
		color: $wcgs-text;
		text-align: left;
	}
}

.wcgs-box {

	@include wcgs-check-box;
	transition:
		background 120ms $wcgs-ease,
		border-color 120ms $wcgs-ease;

	&.is-on {
		border-color: $wcgs-accent;
		background: $wcgs-accent;
	}
}

.wcgs-ring {

	@include wcgs-check-box($radius: 50%);
	transition: border-color 160ms $wcgs-ease;

	span {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: $wcgs-accent;
		opacity: 0;
		transform: scale(0);
		transition:
			transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
			opacity 160ms $wcgs-ease;
	}

	&.is-on {
		border-color: $wcgs-accent;

		span {
			opacity: 1;
			transform: scale(1);
		}
	}
}

// Shortcode copy box.
.wcgs-shortcode {

	&__button {

		@include wcgs-reset-button;
		height: 36px;
		box-sizing: border-box;
		padding: 0 10px 0 12px;
		border: 1px solid $wcgs-border;
		border-radius: 4px;
		background: $wcgs-bg-soft;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
		font-size: 13px;
		color: $wcgs-text-2;
		transition:
			border-color 160ms $wcgs-ease,
			background-color 160ms $wcgs-ease;

		&:hover {
			border-color: $wcgs-border-hover;
			background-color: $wcgs-bg-subtle;
		}
	}

	&__rule {
		width: 1px;
		height: 18px;
		background: $wcgs-border;
	}

	&__icon {
		color: $wcgs-muted;
	}

	&__copied {
		font-size: 13px;
		font-weight: 500;
		color: $wcgs-success;
		opacity: 0;
		transform: translateX(-4px);
		pointer-events: none;
		transition:
			opacity 180ms $wcgs-ease,
			transform 200ms $wcgs-ease;

		&.is-visible {
			opacity: 1;
			transform: none;
		}
	}
}

// Buttons.
.wcgs-btn {

	@include wcgs-reset-button;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 40px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition:
		background-color 160ms $wcgs-ease,
		border-color 160ms $wcgs-ease,
		color 160ms $wcgs-ease;

	&.is-small,
	&.is-modal {
		height: 36px;
		padding: 0 14px;
	}

	&.is-large {
		padding: 0 18px;
		font-weight: 600;
	}

	&.is-primary {

		@include wcgs-btn-fill($wcgs-accent, $wcgs-accent-hover);
	}

	&.is-secondary {
		border-color: $wcgs-border;
		background: #fff;
		color: $wcgs-text;

		&:hover {
			border-color: $wcgs-border-hover;
			background: $wcgs-bg-soft;
		}
	}

	&.is-ghost {
		color: $wcgs-text-2;

		&:hover {
			background: $wcgs-bg-subtle;
		}
	}

	&.is-danger {

		@include wcgs-btn-fill($wcgs-danger, $wcgs-danger-hover);
	}

	&.is-destroy {
		font-weight: 600;

		@include wcgs-btn-fill(#c0392b, #a93226);
	}

	&:disabled,
	&[aria-disabled="true"] {
		opacity: 0.45;
		cursor: not-allowed;
		pointer-events: none;
	}
}

.wcgs-link-button {

	@include wcgs-reset-button;
	font-size: 13.5px;
	font-weight: 500;
	color: $wcgs-body;

	&:hover {
		color: $wcgs-text;
		text-decoration: underline;
	}

	&:disabled {
		opacity: 0.6;
		cursor: default;
	}
}

.wcgs-dot {
	color: $wcgs-off;
}

.wcgs-done {
	font-size: 13.5px;
	font-weight: 500;
	color: $wcgs-success;
	animation: wcgs-bar-in 200ms $wcgs-ease;

	svg {
		flex: 0 0 15px;
	}
}

.wcgs-error-text {
	font-size: 13px;
	line-height: 1.45;
	color: $wcgs-error;
	animation: wcgs-bar-in 180ms $wcgs-ease;
}

.wcgs-spinner {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wcgs-spin 700ms linear infinite;

	&.is-muted {
		width: 14px;
		height: 14px;
		flex-basis: 14px;
		border-color: $wcgs-divider;
		border-top-color: $wcgs-text;
	}
}

// Migration (`migRows`).
.wcgs-migration-row {

	@include wcgs-row;

	&__name {
		width: 420px;
		max-width: 100%;
		line-height: 1.4;
	}

	&__title {
		font-size: 14px;
		font-weight: 500;
		color: $wcgs-text;
	}

	&__author {
		margin-top: 2px;
		font-size: 13px;
		color: $wcgs-muted;
	}

	&__action {
		flex: 1 1 220px;
		min-width: 200px;
	}

	&__progress,
	&__result {
		animation: wcgs-bar-in 200ms $wcgs-ease;
	}

	&__progress {
		font-size: 13.5px;
		color: $wcgs-text-2;
		font-variant-numeric: tabular-nums;
	}

	&__bar {
		width: 120px;
		height: 4px;
		overflow: hidden;
		border-radius: 2px;
		background: $wcgs-line;

		.wcgs-migration-row__fill {
			display: block;
			height: 100%;
			border-radius: 2px;
			background: $wcgs-text;
			transition: width 400ms $wcgs-ease;
		}
	}
}

// Import & Export.
.wcgs-dropzone {

	@include wcgs-reset-button;
	padding: 22px 16px;
	border: 1px dashed $wcgs-off;
	border-radius: 6px;
	background: $wcgs-bg-faint;
	transition:
		border-color 160ms $wcgs-ease,
		background-color 160ms $wcgs-ease;

	&:hover,
	&.is-dragging {
		border-color: $wcgs-border-hover;
		background-color: #f5f5f7;
	}

	&__title {
		font-size: 14px;
		color: $wcgs-text;
	}

	&__browse {
		font-weight: 500;
		color: $wcgs-accent;
	}

	&__hint {
		font-size: 12.5px;
		color: $wcgs-faint;
	}
}

.wcgs-import-file {
	height: 44px;
	box-sizing: border-box;
	padding: 0 6px 0 12px;
	border: 1px solid $wcgs-border;
	border-radius: 6px;
	background: #fff;
	animation: wcgs-bar-in 200ms $wcgs-ease;

	&__name {

		@include wcgs-truncate;
		font-size: 14px;
		color: $wcgs-text;
	}

	&__size {
		font-size: 12.5px;
		color: $wcgs-faint;
	}

	&__remove {

		@include wcgs-reset-button;
		width: 32px;
		height: 32px;
		border-radius: 4px;
		color: $wcgs-faint;

		&:hover {
			background: $wcgs-bg-subtle;
			color: $wcgs-text;
		}
	}
}

.wcgs-import-preview {

	&__row {
		align-items: baseline;
		padding: 9px 0;
		border-bottom: 1px solid $wcgs-wp-gray;
		font-size: 14px;
		color: $wcgs-text;
	}

	&__meta {
		font-size: 13px;
		color: $wcgs-muted;
		text-align: right;
	}
}

// Additional CSS & JS.
.wcgs-code-field {
	margin-bottom: 20px;

	&:last-child {
		margin-bottom: 0;
	}

	&__label {
		margin-bottom: 6px;
		font-size: 14px;
		font-weight: 500;
		color: $wcgs-text;
	}

	// Specific enough to beat the wp-admin `textarea` rules.
	textarea.wcgs-code-field__input {
		display: block;
		width: 100%;
		min-height: 120px;
		margin: 0;
		padding: 12px 14px;
		box-sizing: border-box;
		border: 1px solid $wcgs-off;
		border-radius: 4px;
		background: $wcgs-text;
		box-shadow: none;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
		font-size: 12.5px;
		line-height: 1.6;
		color: $wcgs-off;
		tab-size: 4;
		resize: vertical;

		&::placeholder {
			color: $wcgs-muted;
		}

		&:focus {
			border-color: $wcgs-off;
			outline: none;
			box-shadow: none;
		}

		&[readonly] {
			cursor: not-allowed;
		}
	}

	&__note {
		margin-top: 6px;
		font-size: 13px;
		color: $wcgs-muted;
	}
}

// Dialogs (rendered in a portal on <body>), over the admin content area only.
.wcgs-confirm {
	position: fixed;
	top: 32px;
	left: 160px;
	right: 0;
	bottom: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 24px;
	background: rgba(16, 17, 20, 0.4);
	color: $wcgs-text;
	-webkit-font-smoothing: antialiased;
	animation: wcgs-scrim-in 200ms ease;

	&__card {
		width: 440px;
		max-width: 100%;
		box-sizing: border-box;
		padding: 24px;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 24px 60px rgba(16, 17, 20, 0.25);
		animation: wcgs-pop-in 220ms $wcgs-ease;
	}

	&.is-closing {
		animation: wcgs-scrim-out 180ms ease forwards;
	}

	&.is-closing &__card {
		animation: wcgs-pop-out 160ms $wcgs-ease forwards;
	}

	&__icon {
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
		border-radius: 50%;
		background: #fdecec;
		color: $wcgs-danger;
	}

	&__title {
		font-size: 16px;
		font-weight: 600;
		letter-spacing: -0.01em;
		color: $wcgs-text;
	}

	&__text {
		margin: 6px 0 0;
		font-size: 14px;
		line-height: 1.55;
		color: $wcgs-body;
		text-wrap: pretty;
	}

	&__actions {
		margin-top: 22px;

		.wcgs-btn {
			height: 38px;
			padding: 0 14px;
			font-weight: 500;

			&.is-primary,
			&.is-danger {
				padding: 0 16px;
			}

			&.is-secondary:hover {
				background: #fff;
			}
		}
	}

	&__card.is-danger &__actions {
		margin-top: 20px;
	}
}

body.folded .wcgs-confirm {
	left: 36px;
}

@media (max-width: 960px) {

	body.auto-fold .wcgs-confirm {
		left: 36px;
	}
}

@media (max-width: 782px) {

	body.wp-admin .wcgs-confirm {
		top: 46px;
		left: 0;
	}
}

// Larger dialog with a footer bar (clean-up warning).
.wcgs-modal {
	position: relative;
	width: 500px;
	max-width: 100%;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow:
		0 1px 2px rgba(16, 17, 20, 0.06),
		0 24px 64px rgba(16, 17, 20, 0.22);
	animation: wcgs-pop-in 220ms $wcgs-ease;

	&__close {

		@include wcgs-reset-button;
		position: absolute;
		top: 14px;
		right: 14px;
		width: 30px;
		height: 30px;
		border-radius: 6px;
		color: $wcgs-faint;
		transition:
			background 120ms $wcgs-ease,
			color 120ms $wcgs-ease;

		&:hover {
			background: $wcgs-bg-subtle;
			color: $wcgs-text;
		}
	}

	&__body {
		padding: 24px 24px 20px;
	}

	&__icon {
		width: 36px;
		height: 36px;
		flex: 0 0 36px;
		border-radius: 8px;
		background: #fdf1ef;
		color: #c0392b;
	}

	&__content {
		padding-right: 20px;
	}

	&__list {
		margin-top: 10px;
		font-size: 13.5px;
		color: $wcgs-text-2;
	}

	&__muted {
		margin: 12px 0 0;
		font-size: 13.5px;
		line-height: 1.5;
		color: $wcgs-muted;
	}

	&__footer {
		padding: 14px 24px;
		border-top: 1px solid $wcgs-line;
		background: $wcgs-bg-faint;

		.wcgs-btn.is-secondary:hover {
			background: $wcgs-bg-soft;
		}
	}
}

// Narrow screens: nav on top, rows stack.
@media (max-width: 960px) {

	.wcgs-settings-page {
		padding: 16px;

		&__body {
			flex-direction: column;
			align-items: stretch;
		}
	}

	.wcgs-settings-nav {
		position: static;
		flex: 0 0 auto;
		max-height: none;
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		padding: 8px;

		&__item {
			width: auto;
			margin: 0;
		}
	}

	.wcgs-settings-card__body {
		padding: 20px;
	}
}