// Ask Josh
@import "../../../../assets/dev/scss/helpers/direction";
@import "../../../../assets/dev/scss/helpers/variables";
@import "../../../../assets/dev/scss/helpers/mixins";
@import "../../../../assets/dev/scss/editor/breakpoints";

$top-bar-height: 50px;

// Hide the widget in admin dashboard that was created by checking the screen option checkbox.
// "display: none" won't work here since it will influence the mechanism for saving the state for the checkbox in screen options.
#e-dashboard-widget-admin-top-bar {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

// The width for top bar is calculated according to the width of the wordpress admin sidebar menu.
#e-admin-top-bar-root {
	@include end( 0 );
	font-family: var(--e-a-font-family);
	background: var(--e-a-bg-default);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
	display: none;
	position: absolute;
	top: 0;
	width: calc(100% - 160px);
	z-index: $first-layer;

	body.folded & {
		width: calc(100% - 36px);
	}

	.e-admin-top-bar {
		display: flex;
		height: $top-bar-height;
		justify-content: space-between;
		padding: 0 16px;
	}

	.page-title-action {
		font-size: 12px;
		font-weight: 500;
		line-height: 1.2;
		text-transform: uppercase;
		text-decoration: none;
		padding: 8px 16px;
		outline: none;
		border: none;
		border-radius: var(--e-a-border-radius);
		background-color: var(--e-a-btn-bg);
		color: var(--e-a-btn-color-invert);
		transition: var(--e-a-transition-hover);

		&:hover {
			background-color: var(--e-a-btn-bg-hover);
			color: var(--e-a-btn-color-invert);
		}
	}

	.e-admin-top-bar__heading {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-inline-end: 40px;
	}

	.e-admin-top-bar__main-area {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		button {
			margin: 0 4px
		}
	}

	.e-admin-top-bar__secondary-area {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.e-admin-top-bar__heading-title {
		color: var(--e-a-color-txt);
		font-size: 15px;
		font-weight: 700;
		padding: 0 8px;
		line-height: normal;
	}

	.e-admin-top-bar__main-area-buttons {
		display: inline-flex;
		gap: 5px;
	}

	&.e-admin-top-bar--active {
		display: block;

		&~ #wpbody {
			#wpbody-content {
				margin-block-start: $top-bar-height;
			}

			.wrap {
				// Since there is no h1 tag (in the normal place of the admin page) we need to break the page content under screen options button.
				clear: both;
				padding-block-start: 10px;

				h1 {
					display: none;
				}
			}
		}
	}

	&:not(.e-admin-top-bar--active) ~ #wpbody {
		.wrap {
			h1, .page-title-action {
				display: inline-block;
			}
		}
	}

	.e-admin-top-bar__bar-button {
		align-items: center;
		cursor: pointer;
		display: inline-flex;
		justify-content: center;
		margin: 0 10px;
		text-decoration: none;
		color: var(--e-a-color-txt);

		&.accent {
			color: var(--e-a-color-accent);


			&:hover {
				.e-admin-top-bar__bar-button-title,
				.e-admin-top-bar__bar-button-icon {
					color: var(--e-a-color-accent);
				}
			}
		}

		.crown-icon {
			font-size: 14px;
		}

		.e-admin-top-bar__bar-button-icon {
			margin: 0 4px;
		}

		&:hover {

			.e-admin-top-bar__bar-button-title,
			.e-admin-top-bar__bar-button-icon{
				color: var(--e-a-color-txt-hover);
			}
		}
	}

	.e-admin-top-bar__bar-button-title {
		font-size: 13px;
		font-weight: 500;
		margin: 0 4px;
		line-height: normal;
	}

	// The title and buttons are not visible by default in the original place. They might be visible according to the result of the admin top bar.
	&~ #wpbody {
		.wrap {
			h1, .page-title-action {
				display: none;
			}
		}
	}
}

// The width for top bar is calculated according to the width of the wordpress admin sidebar menu.
@media screen and (max-width: 960px) {
	#e-admin-top-bar-root {
		width: calc(100% - 36px);
	}
}

@media screen and (max-width: 782px) {
	#e-admin-top-bar-root {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	#e-admin-top-bar-root {
		top: 46px;
	}
}

// Mobile mode
@media (max-width: $editor-screen-md-min) {
	#e-admin-top-bar-root {
		.e-admin-top-bar__main-area-buttons {
			position: absolute;
			top: calc(100% + 10px);
		}

		display: inline-flex;
		align-items: center;
		justify-content: center;

		.e-admin-top-bar__secondary-area {
			.e-admin-top-bar__secondary-area-buttons {
				display: none;
			}

			> .e-admin-top-bar__bar-button {
				.e-admin-top-bar__bar-button-title {
					display: none;
				}
			}
		}
	}
}

// Desktop mode
@media (min-width: $editor-screen-md-min) {
	#e-admin-top-bar-root {
		.e-admin-top-bar__secondary-area {
			.e-admin-top-bar__secondary-area-buttons {
				display: flex;
			}
		}
	}
}
