@import "./app-api";
@import "../styles/base";

.#{$eps-prefix}app {
	display: flex;
	height: 100vh;
	flex-direction: column;
	color: var(--body-color);
	background-color: var(--app-background-color);
	position: absolute;
	border-radius: $app-radius;
	box-shadow: $eps-box-shadow-3;
	overflow: hidden;
	font-family: $eps-font-family; // todo: we have body definition for font family,consider removing
	width: 100%;
	max-width: $app-max-width;

	&__lightbox {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		height: 100%;
		width: 100%;
		background-color: var(--app-lightbox-background-color);
		z-index: $app-lightbox-z-index;
		bottom: 0;
		@include start(0);
	}

	&__header {
		flex-shrink: 0;
		font-size: $app-header-font-size;
		border-block-end: var(--e-a-border);
		position: relative;
		z-index: $app-header-z-index;
		height: $app-header-height;
		padding-block: $app-header-padding-block;
		padding-inline: $app-header-padding-inline;
	}

	&__header-buttons {
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		font-size: $app-header-buttons-font-size;
	}

	&__header-btn {
		padding-inline-start: $app-header-btn-padding-inline;
		font-size: $app-header-btn-font-size;
		line-height: $app-header-btn-line-height;

		&:hover {
			color: var(--app-header-buttons-color-hover);
		}

		&:first-child {
			border-inline-start: 1px solid var(--app-header-buttons-separator-color);
		}

		&:not(:first-child) {
			padding-inline-end: $app-header-btn-padding-inline;
		}
	}


	&__logo-title-wrapper {
		display: flex;
		align-items: center;
	}

	//todo: consider refactoring as a stand alone block.
	&__logo {
		display: block;
		width: $app-logo-size;
		height: $app-logo-size;
		line-height: $app-logo-size;
		text-align: center;
		font-size: $app-logo-font-size;
		border-radius: $app-logo-radius;
		color: var(--app-logo-color);
		background-color: var(--app-logo-background-color);

		&:not(:last-child) {
			margin-inline-end: $app-logo-margin-inline-end;
		}
	}

	//todo: consider refactoring as logo element.
	&__title {
		color: var(--app-title-color);
		font-size: $app-title-font-size;
		font-weight: $app-title-font-weight;
		text-transform: uppercase;
		margin-block-end: 0;
	}

	&__main {
		display: flex;
		overflow: hidden;
		flex-grow: 1;
	}

	&__sidebar {
		background-color: var(--app-sidebar-background-color);
		padding-block-start: $app-sidebar-padding-block-start;
		width: $app-sidebar-width;
		max-width: $app-sidebar-max-width;
		border-inline-end: var(--e-a-border);
		flex-grow: 0;
		overflow-y: auto;
		z-index: $app-sidebar-z-index;
	}

	&__content {
		flex-grow: 1;
		position: relative;
		padding: $app-content-padding;
		height: 100%;
		overflow-y: auto;
	}
}
