/*
 * ADMIN DASHBOARD LAYOUT CSS.
 */

@use "styles/variables" as *;
// `sp-*` layout utility classes.
@use "styles/tailwind-class";

.wcgs-admin-dashboard-wrapper {
	margin-left: -20px;
	color: $wcgs-text;

	* {
		box-sizing: border-box;
	}

	a {
		text-decoration: none;
	}

	// Full-height app: header on top, split view fills the rest.
	.wcgs-admin-dashboard {
		height: calc(100vh - 32px);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #fff;
	}

	// Header (60px bar of the Reno settings design).
	.wcgs-dashboard-header {
		flex: 0 0 60px;
		display: flex;
		align-items: center;
		gap: 20px;
		padding: 0 24px;
		background: #fff;
		border-bottom: 1px solid $wcgs-divider;

		&__logo {
			flex: 0 0 auto;
			display: flex;
			align-items: center;
			gap: 9px;

			img {
				display: block;
				height: 28px;
				width: auto;
			}
		}

		// A button: opens the changelog drawer.
		&__version {
			appearance: none;
			margin: 0;
			display: inline-flex;
			align-items: center;
			gap: 4px;
			padding: 2px 8px;
			border: 1px solid #e8e9ec;
			border-radius: 999px;
			background: #fff;
			font: inherit;
			font-size: 11px;
			font-weight: 500;
			line-height: 1.4;
			color: $wcgs-muted;
			cursor: pointer;
			transition:
				background-color 120ms ease,
				border-color 120ms ease,
				color 120ms ease;

			&:hover,
			&:focus {
				background-color: $wcgs-bg-subtle;
				border-color: $wcgs-border;
				color: $wcgs-text;
				outline: none;
				box-shadow: none;
			}

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

	.wcgs-dashboard-notice {
		flex: 0 0 auto;
		padding: 12px 16px 0;
		background: $wcgs-wp-gray;

		.components-notice {
			margin: 0;
		}
	}

	@media (max-width: 782px) {
		margin-left: -10px;

		.wcgs-admin-dashboard {
			height: calc(100vh - 46px);
		}
	}
}

// Let the dashboard fill the screen: no bottom padding, no admin footer.
body.wcgs-dashboard-page {

	#wpbody-content {
		padding-bottom: 0;
	}

	#wpfooter {
		display: none;
	}
}