@import "../../themes/themes.style.scss";

.mb[topbar] {
	width: 100%;
	height: $topbarHeight;
	background-color: #ffffff;

	@include themify(background-color, backgroundTopBar);

	border-bottom: solid 1px #f4f4f4;
	text-align: center;
	font-family: 'MontSerrat', sans-serif;
	position: relative;
	z-index: 900;

	> .mb-t-content {
		width: 100%;
		height: 100%;
		max-width: 1920px;
		display: inline-block;

		> .mb-t-container {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: left;
			align-items: center;

			.mb-t-logo-link {
				height: 100%;

				&:visited, &:focus, &:active {
					color: inherit;
					text-decoration: none;
					outline: none;
					box-shadow: none;
				}

				> .mb-t-logo-container {
					min-width: 220px;
					height: 100%;
					border-bottom: 3px solid #ccc;

					@include themify(border-color, logoDetail);

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

					@media screen and (max-width: 768px) {
						display: none;
					}

					> .mb-t-logo {
						height: 85%;
						width: 85%;
						background-size: contain;
						background-position: center center;
						background-repeat: no-repeat;
					}
				}
			}

			> .mb-t-buguer-btn-container {
				height: 100%;
				width: 10%;
				font-size: 35px;
				line-height: 80px;

				@include themify(color, color1);

				display: none;
				cursor: pointer;

				@media screen and (max-width: 768px) {
					display: block;
					margin-left: 12px;
					margin-right: 12px;
				}
			}

			> .mb-t-inside-content {
				height: 100%;
				display: flex;
				flex-grow: 1;
				flex-direction: row;
				justify-content: left;
				align-items: left;

				> .mb-t-search-container {
					height: 100%;
					flex-grow: 1;
					display: flex;
					flex-direction: row;
					justify-content: left;
					align-items: center;

					// padding-top: calc((#{$topbarHeight} / 2) - 40px / 2);
					padding-right: 15px;

					@media screen and (max-width: 768px) {
						padding-left: 0px;
						padding-top: 20px;
						flex: 1;
						mb-t-search {
							display: none;
						}
					}
				}

				> .mb-t-window-title{
					display: flex;
					align-items: center;
					justify-items: center;
					
					span{
						color: var(--color1);
						font-size: 22px;
						font-weight: bolder;
					}
				}

				> .mb-t-cashier{
					padding: 0px;
					padding-left: 15%;
				}

				> .mb-t-notifications-container {
					height: 100%;
					width: 100px;
					position: relative;
				}

				> .mb-birthday-wrapper {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 25px;
					position: relative;
					text-align: center;
					cursor: pointer;
					i {
						color: #8034ad;
						@include themify(color, color1);
					}
					.mb-tn-number {
						position: absolute;
						top: 0;
						right: 0;
						line-height: 23px;
						width: 23px;
						height: 23px;
						border-radius: 11.5px;
						background-color: map-get($semantic, error);
						font-size: 12px;
						font-weight: 700;
						color: white;
					}
					.mb-tn-number, i.bell {
						transition: transform 350ms ease;
					}
				}

				> .sg-mode-on-wrapper {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 25px;
					position: relative;
					height: 50px;
					width: 50px;
					text-align: center;
					cursor: pointer;
				}

				> .sg-mode-off-wrapper {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 25px;
					position: relative;
					height: 50px;
					width: 50px;
					text-align: center;
					cursor: pointer;
				}

				> .mb-t-user-container {
					height: 100%;
					position: relative;
					z-index: 550;
					font-size: 16px;
					min-width: 256px;
					margin-left: 8px;
					@media screen and (max-width: 768px) {
						// flex: 1;
					}
				}

				@media screen and (max-width: 768px) {
					> .mb-t-user-container {
						min-width: auto;
					}
				}

			}
		} // mb-t-container

	} // mb-t-content
} // mb[topbar]