@use "~admin-stylesheets/colors";
@use "~admin-stylesheets/variables";

.nab-heatmap-results-sidebar {
	background: colors.$nab-background-light-grey;
	border-right: 1px solid colors.$nab-border-light;
	z-index: 2;

	.components-button.is-link {
		align-items: center;
		background: none;
		border: none;
		box-shadow: none;
		display: flex;
		text-decoration: none;

		&::-moz-focus-inner {
			border: 0;
		}
	}

	&__header-actions {
		align-items: center;
		border-bottom: 1px solid colors.$nab-border-light;
		display: flex;
		flex-direction: row;
		flex-shrink: 0;
		height: 3.8em;
		padding: 0;
	}

	&__running-actions {
		align-items: center;
		flex-grow: 1;
		display: flex;
		gap: 0.5em;
		justify-content: flex-end;
		margin-right: 0.5em;
	}

	&__progress {
		animation: pulse 700ms infinite;
	}

	&__back {
		align-items: center;
		border-right: 1px solid colors.$nab-border-light;
		display: flex;
		flex-grow: 0;
		height: 100%;
		padding-left: 0.8em;
		padding-right: 0.8em;
	}

	&__back-link {
		line-height: 1;
		box-shadow: none;
		text-decoration: none;

		&:focus,
		&:active,
		&:hover {
			box-shadow: none;
		}
	}

	&__save-info,
	&__alt-switcher {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		justify-content: flex-end;
		padding: 0.5em;
	}

	&__wrapper {
		background: colors.$nab-background-white;
		flex-grow: 1;
		overflow-y: auto;
	}

	&__error-message {
		align-items: center;
		background: colors.$nab-background-light-grey;
		color: colors.$nab-text-red;
		display: flex;
		flex-direction: row;
		flex-shrink: 0;
		padding: 1em;
		width: calc(100% - 2em);

		> * {
			flex-grow: 0;
			flex-shrink: 1;
		}

		> div:first-child {
			padding-right: 1em;
			flex-grow: 1;
		}

		.components-button {
			height: auto;
			min-height: 0;
			min-width: 0;
			padding: 0.2em;
			width: auto;
		}
	}

	&__footer-actions {
		border-top: 1px solid colors.$nab-border-light;
		display: flex;
		flex-direction: row;
		flex-shrink: 0;
		height: 3.8em;
		width: 100%;
	}

	&__visibility-toggle {
		align-items: center;
		display: flex;
		flex-grow: 0;
		padding: 0 0.5em;

		&-label {
			display: inline-block;
			margin-left: 2em;
		}

		svg,
		.dashicons-admin-collapse {
			background: colors.$nab-background-white;
			border-radius: 50%;
			margin-right: 0.5em;
			position: fixed;
			left: 0.5em;
		}

		&--show {

			svg,
			.dashicons-admin-collapse {
				transform: rotate(180deg);
				margin-right: 0;
			}
		}

		&:hover {

			svg,
			.dashicons-admin-collapse {
				box-shadow: 0 0 0 1px colors.$wp-admin-theme-color-darker-10;
			}
		}

		.components-button.is-link:active {
			margin-top: 2px;
		}

		.components-button.is-link:hover {
			color: colors.$wp-admin-theme-color-darker-10;
		}
	}

	&__resolutions {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		justify-content: flex-end;
	}

	&__resolution {
		padding: 14px 10px;
		box-shadow: none;

		&--is-active {
			box-shadow: inset 0 -5px 0 colors.$wp-components-color-accent;
			background-color: colors.$nab-background-white;
		}
	}
}