<commit_before>// _tab-bar.scss --partials
// Styles for global tab bar. This is actually the top-bar but it is
// called tab-bar when using off-canvas.
/////////////////////////////////////////////////////////////////////////
// This file is called in foundation_components/_offcanvas.scss



$hamburger-size: rem-calc(27);
$profile-size: rem-calc(44);

.tab-bar{
	.title{
		padding-left: 20px;
		.logo{
			width: $logo-width;
			background: url($tab-bar-logo) no-repeat center;
			background-size: contain;
			text-indent: -99999px;
		}
	}
}

// Add menu icon to the tab-bar left toggle button
.off-canvas-wrap{
	.left-off-canvas-toggle{
		cursor: pointer;
		.hamburger{
			width: $hamburger-size;
			height: $hamburger-size;
			position: absolute;
			top: calc(#{$tabbar-height} / 2 - #{$hamburger-size} / 2);
			left: calc(#{$tabbar-height} / 2 - #{$hamburger-size} / 2);
		}
	}
}

// Add menu icon to the tab-bar right toggle
// button (when signed in)
.off-canvas-wrap{
	.right-off-canvas-toggle{
		cursor: pointer;
		.hamburger{
			width: $hamburger-size;
			height: $hamburger-size;
			position: absolute;
			top: calc(#{$tabbar-height} / 2 - #{$hamburger-size} / 2);
			right: calc(#{$tabbar-height} / 2 - #{$hamburger-size} / 2);
			transform: rotate(180deg);
		}
	}
}

// Align the title text
.off-canvas-wrap{
  .tab-bar{
    border-bottom: 1px solid transparent;
  }
	.TitleBar {
	  text-align: left;
    border-right: 1px solid;
    border-left: 1px solid;
	}
}

// Right tab-bar menu items (signedin)
.off-canvas-wrap{
	.right-menu-signedin{
		width: rem-calc(600);
		position: absolute;
		right: 0;
		top: 0;
	}
}

// Profile image
.off-canvas-wrap{
	.ProfilePhoto{
		height: $profile-size;
		width: $profile-size;
		border-radius: 50%;
		border: 2px solid;
		position: absolute;
		top: calc(#{$tabbar-height} / 2 - #{$profile-size} / 2);
		right: calc(#{$tabbar-height} + #{rem-calc(22)});
	}
}

// Hide Profile Image in Top Bar on Small Devices
@media #{$small-only} {
	.off-canvas-wrap .tab-bar{
		.ProfilePhoto{
			display: none;
		}
	}
}

// Username (signedin)
.off-canvas-wrap{
	.UserName{
		position: absolute;
		top: 0;
		right: calc(#{$tabbar-height} + #{$profile-size} + #{rem-calc(22)} + #{rem-calc(22)});
	}
}

// Right tab-bar menu items (signedout)
.off-canvas-wrap{
	.right-menu-signedout{
		width: rem-calc(220);
		position: absolute;
		right: 0;
		top: 0;
	}
}

// Avatar Placeholder
.off-canvas-wrap{
	.avatar-placeholder{
    height: $profile-size;
    width: $profile-size;
	}
	.right-menu-signedout{
		a{
			&:first-of-type{<commit_msg>Fix sign in link spacing when register link is no longer displayed<commit_after>// _tab-bar.scss --partials
// Styles for global tab bar. This is actually the top-bar but it is
// called tab-bar when using off-canvas.
/////////////////////////////////////////////////////////////////////////
// This file is called in foundation_components/_offcanvas.scss



$hamburger-size: rem-calc(27);
$profile-size: rem-calc(44);

.tab-bar{
	.title{
		padding-left: 20px;
		.logo{
			width: $logo-width;
			background: url($tab-bar-logo) no-repeat center;
			background-size: contain;
			text-indent: -99999px;
		}
	}
}

// Add menu icon to the tab-bar left toggle button
.off-canvas-wrap{
	.left-off-canvas-toggle{
		cursor: pointer;
		.hamburger{
			width: $hamburger-size;
			height: $hamburger-size;
			position: absolute;
			top: calc(#{$tabbar-height} / 2 - #{$hamburger-size} / 2);
			left: calc(#{$tabbar-height} / 2 - #{$hamburger-size} / 2);
		}
	}
}

// Add menu icon to the tab-bar right toggle
// button (when signed in)
.off-canvas-wrap{
	.right-off-canvas-toggle{
		cursor: pointer;
		.hamburger{
			width: $hamburger-size;
			height: $hamburger-size;
			position: absolute;
			top: calc(#{$tabbar-height} / 2 - #{$hamburger-size} / 2);
			right: calc(#{$tabbar-height} / 2 - #{$hamburger-size} / 2);
			transform: rotate(180deg);
		}
	}
}

// Align the title text
.off-canvas-wrap{
  .tab-bar{
    border-bottom: 1px solid transparent;
  }
	.TitleBar {
	  text-align: left;
    border-right: 1px solid;
    border-left: 1px solid;
	}
}

// Right tab-bar menu items (signedin)
.off-canvas-wrap{
	.right-menu-signedin{
		width: rem-calc(600);
		position: absolute;
		right: 0;
		top: 0;
	}
}

// Profile image
.off-canvas-wrap{
	.ProfilePhoto{
		height: $profile-size;
		width: $profile-size;
		border-radius: 50%;
		border: 2px solid;
		position: absolute;
		top: calc(#{$tabbar-height} / 2 - #{$profile-size} / 2);
		right: calc(#{$tabbar-height} + #{rem-calc(22)});
	}
}

// Hide Profile Image in Top Bar on Small Devices
@media #{$small-only} {
	.off-canvas-wrap .tab-bar{
		.ProfilePhoto{
			display: none;
		}
	}
}

// Username (signedin)
.off-canvas-wrap{
	.UserName{
		position: absolute;
		top: 0;
		right: calc(#{$tabbar-height} + #{$profile-size} + #{rem-calc(22)} + #{rem-calc(22)});
	}
}

// Right tab-bar menu items (signedout)
.off-canvas-wrap{
	.right-menu-signedout{
		width: rem-calc(220);
		position: absolute;
		right: 0;
		top: 0;
		.SignInPopup{
			float: right;
			margin-right: rem-calc(60);
		}
	}
}

// Avatar Placeholder
.off-canvas-wrap{
	.avatar-placeholder{
    height: $profile-size;
    width: $profile-size;
	}
	.right-menu-signedout{
		a{
			&:first-of-type{
{'fraction_non_alphanumeric': 0.19453406718542418, 'fraction_numerical': 0.01821977604858607, 'mean_word_length': 2.7349397590361444, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3219495', 'n_tokens_mistral': 2238, 'n_tokens_neox': 1980, 'n_words': 461}