$autobar-height: 20px;
$masterbar-font-size: 13px;
$masterbar-mobile-font-size: 14px;
$masterbar-color-primary: #23282d;
$masterbar-color-secondary: #101517;

@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "calypso/assets/stylesheets/shared/animation";
@import url( //s0.wp.com/wp-includes/css/dashicons.min.css?v=20250127 );
@import "@automattic/typography/styles/variables";

// Hide the masterbar on WP Mobile App views.
body.is-mobile-app-view {
	.masterbar {
		display: none;
	}
	/* We are ignoring these lines because without the px value the calc function does not work as expected */
	/* stylelint-disable-next-line length-zero-no-unit */
	--masterbar-checkout-height: 0px;
	/* stylelint-disable-next-line length-zero-no-unit */
	--masterbar-height: 0px;
}

// The WordPress.com Masterbar
.masterbar {
	background: var(--color-masterbar-background);
	color: var(--color-masterbar-text);
	font-size: $masterbar-font-size;
	display: flex;
	height: var(--masterbar-height);
	margin: 0;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	max-width: 100vw;
	z-index: z-index("root", ".masterbar");
	-webkit-font-smoothing: subpixel-antialiased;
	box-sizing: border-box;
	justify-content: space-between;
	opacity: 1;
	transition: all 0.3s ease-in-out;
	--masterbar-item-active-border-radius: 4px;

	.is-support-session & {
		// Use generic colors so that they override whatever theme colors the user has picked.
		background: var(--studio-orange);
		border-bottom: 1px solid var(--studio-orange-60);

		.masterbar__item.has-global-border::before,
		.masterbar__item.has-global-border::after {
			background: var(--studio-orange-70);
		}
	}

	&.masterbar__loggedout {
		padding-top: 10px;
		padding-bottom: 40px;

		.masterbar__item-wrapper:first-child {
			flex: none;
		}

		.masterbar__item:hover {
			background: transparent;
			text-decoration: underline;
		}
		.masterbar__item-wrapper:last-child .masterbar__item {
			margin-left: 6px;
			margin-right: 12px;
			background-color: #fff;
			border-radius: 2px;

			.masterbar__item-content {
				font-weight: 600;
				color: var(--studio-gray-100);
			}
		}
		.masterbar__item-wrapper:last-child:hover .masterbar__item {
			background: #fff;
			text-decoration: none;
		}
		.masterbar__item-wrapper:last-child:hover .masterbar__item-content {
			color: var(--studio-gray-100);
		}
		@media only screen and (max-width: 781px) {
			padding-top: 0;

			.masterbar__login-links {
				.masterbar__item-wrapper {
					.masterbar__item {
						height: 30px;
						line-height: 30px;
						width: unset !important;
						padding: 0 8px;
						margin: 8px 8px 0 0;

						.masterbar__item-content {
							display: block !important;
						}
					}
				}
			}
		}
	}

	&.masterbar--is-checkout {
		background-color: var(--studio-white);
		border-bottom: none 0;
		color: var(--color-checkout-masterbar-text);
		height: var(--masterbar-height);
		position: absolute;
		padding-inline-end: 1.5em;

		&.masterbar--is-akismet,
		&.masterbar--is-jetpack {
			padding-inline-start: 1.5em;
		}

		@include break-mobile {
			height: var(--masterbar-checkout-height);
		}

		@include breakpoint-deprecated( ">960px" ) {
			background-color: var(--color-checkout-masterbar-background);
		}
	}

	// stylelint-disable-next-line unit-allowed-list
	@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
		body.font-smoothing-antialiased & {
			text-rendering: optimizeLegibility;
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
		}
	}
}

.masterbar__section {
	display: flex;

	@include breakpoint-deprecated( ">480px" ) {
		flex: 2;
		.masterbar__item-wrapper {
			flex: 0 0 auto;
		}
	}

	&--left {
		.masterbar__item-subitems {
			left: 0;
		}


		@include breakpoint-deprecated( "<660px" ) {
			a .masterbar__item-content {
				display: none;
			}
		}
	}

	&--right {
		flex: 1;
		justify-content: flex-end;

		.masterbar__item-subitems {
			right: 0;
			padding-bottom: 0 !important;
		}
		@include breakpoint-deprecated( ">480px" ) {
			flex-grow: 0;
		}

		@media only screen and (max-width: 480px) {
			position: absolute;
			top: 0;
			right: 0;
			background: var(--color-masterbar-background);
		}
	}
}

.masterbar__section--center {
	flex: 1;
	justify-content: center;

	@include breakpoint-deprecated( ">480px" ) {
		flex: 0 0 auto;
	}
}

.masterbar__drafts {
	white-space: nowrap;
}

.masterbar__item-wrapper {
	position: relative;
	flex: 1;
}

.masterbar__item {
	display: flex;
	align-items: center;
	color: var(--color-masterbar-text);
	font-size: $masterbar-font-size;
	height: var(--masterbar-height);
	line-height: var(--masterbar-height);
	padding: 0 8px;
	text-decoration: none;
	cursor: default;
	justify-content: center;

	&.masterbar__reader {
		padding: 0 8px;
	}

	&.masterbar__item-my-site,
	&.masterbar__item-my-site-actions,
	&.masterbar__item-updates,
	&.masterbar__item-comments {
		padding-left: 7px;
		gap: 6px;
	}

	@media only screen and (max-width: 781px) {
		&.masterbar__item-my-site {
			padding-left: inherit;
		}
		&.masterbar__item-my-site-actions {
			padding: 0;
		}

		&.masterbar__reader {
			padding: 0;
		}
	}

	&.has-subitems {
		&:hover,
		&.is-open {
			z-index: 2;
		}
	}

	& + .masterbar__item-subitems {
		margin: 0;
		padding: 6px 0;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
		display: none;
		position: absolute;
		float: none;
		min-width: 100%;
		text-align: left;
		top: var(--masterbar-height);
		background: var(--color-global-masterbar-submenu-background, var(--color-masterbar-item-hover-background));
		list-style: none;
		clear: none;
		text-indent: 0;

		.masterbar__item-subitems-item {
			padding-left: 6px;
			padding-right: 6px;
			white-space: nowrap;
			min-width: 140px;
			line-height: 2;

			&.masterbar__item-subitems-item--odd {
				background: var(--color-sidebar-submenu-background, var(--color-masterbar-item-hover-background));
			}

			a,
			button {
				display: inline-block;
				box-sizing: border-box;
				width: 100%;
				padding: 0 6px;
				color: var(--color-masterbar-submenu-text, var(--color-masterbar-text));
			}

			.is-link {
				border: none;
				background: none;
				text-decoration: none;
				outline: none;
				margin: 0;
				text-align: left;

				&:hover {
					color: var(--color-masterbar-submenu-hover-text, var(--color-masterbar-highlight));
				}
			}

			&:hover {
				background: var(--color-global-masterbar-submenu-hover-background, var(--color-masterbar-item-hover-background));
				a {
					color: var(--color-masterbar-submenu-hover-text, var(--color-masterbar-highlight));
				}
			}

		}

		@media only screen and (max-width: 781px) {
			position: fixed;
			.masterbar__item-subitems-item {
				padding: 8px 16px;
			}
		}
	}

	.masterbar--is-checkout & {
		height: var(--masterbar-height);
		line-height: var(--masterbar-height);
		padding: 0;
		@include break-mobile {
			height: var(--masterbar-checkout-height);
			line-height: var(--masterbar-checkout-height);
		}
	}

	&:visited {
		color: var(--color-masterbar-text);
	}

	&[href] {
		cursor: pointer;
	}

	.masterbar__item-content {
		white-space: nowrap;
		color: var(--color-masterbar-text);

		.masterbar--is-checkout & {
			color: var(--color-checkout-masterbar-text);
		}
	}

	.gridicon,
	svg {
		fill: var(--color-masterbar-icon);
		width: 24px;
		height: 24px;
	}

	.gridicon {
		.masterbar--is-checkout & {
			fill: var(--color-checkout-masterbar-text);
		}
	}

	.gridicon + .masterbar__item-content {
		padding: 0 0 0 6px;
	}

	.dashicons-before {
		height: 20px;
		color: var(--color-masterbar-icon);
	}
	.dashicons-plus {
		padding-top: 4px;
	}
	.dashicons-admin-comments {
		padding-top: 2px;

		& + span .count-0 {
			opacity: .5;
		}
	}

	&:hover,
	&.is-open,
	&:has(+ .masterbar__item-subitems:hover) {
		& + .masterbar__item-subitems {
			display: block;
			z-index: 99999;
		}
	}

	// The hover colors are supposed to be the same as those in wp-admin.
	&:hover,
	&.is-open {
		svg path,
		.gridicon {
			fill: var(--color-masterbar-highlight);
		}

		@include breakpoint-deprecated( ">480px" ) {
			background: var(--color-masterbar-item-hover-background);
			color: var(--color-masterbar-highlight);
			.masterbar--is-checkout & {
				background: var(--color-checkout-masterbar-item-hover-background);
				color: var(--color-checkout-masterbar-text);
			}
			.masterbar__item-content {
				color: var(--color-masterbar-highlight);
			}
			.dashicons-before {
				color: var(--color-masterbar-highlight);
			}
		}
	}

	&:focus {
		outline: none;

		.accessible-focus & {
			box-shadow: inset 0 0 0 2px var(--color-primary-light);
			color: var(--color-masterbar-text);
		}

		.masterbar--is-checkout & {
			box-shadow: inset 0 0 0 2px var(--color-checkout-masterbar-item-hover-background);
			color: var(--color-checkout-masterbar-text);
		}
	}

	.accessible-focus & a:focus,
	.accessible-focus & button:focus {
		box-shadow: inset 0 0 0 2px var(--color-primary-light);
		outline: none;
	}

	&.is-active {
		background: var(--color-masterbar-item-active-background);
	}

	&:hover .masterbar__item-bubble {
		border-color: var(--color-masterbar-item-hover-background);
	}

	&.has-unseen .masterbar__item-bubble {
		display: block;
		background: var(--color-masterbar-unread-dot-background);
	}

	&.is-active .masterbar__item-bubble {
		display: none;
	}

	&.is-initial-load .masterbar__item-bubble {
		animation: none;
	}

	&.masterbar__close-button {
		color: var(--color-checkout-masterbar-text);
		cursor: pointer;

		.masterbar__item-content {
			display: none;
		}
	}

	.is-support-session &.is-active {
		background: var(--studio-orange-70);
		--color-masterbar-icon: var(--studio-gray-5) !important;
		--color-masterbar-text: var(--studio-gray-5) !important;
		--color-masterbar-highlight: var(--studio-gray-5) !important;
	}

	.is-support-session &:hover {
		background: var(--studio-orange-50);
	}

	.is-support-session &.is-active:hover {
		background: var(--studio-orange-70);
		color: var(--studio-gray-5);
	}

	&.masterbar__item-notifications {
		margin-right: 0;
	}

	@media only screen and (max-width: 781px) {
		padding: 0;

		&,
		& + .masterbar__item-subitems {
			font-size: $masterbar-mobile-font-size;
		}

		&:not(.masterbar__item--always-show-content) {
			width: 46px;
		}
		// Show gravatar content
		&:not(.masterbar__item-howdy) .masterbar__item-content {
			display: none;
		}

		.masterbar__item-howdy-howdy {
			display: none;
		}

		&.masterbar__item--always-show-content .masterbar__item-content {
			display: block;
		}

		svg,
		svg path,
		.gridicon {
			height: 36px;
			width: 36px;
		}

		.dashicons-plus {
			padding-top: 0;
			&::before {
				font-size: 40px !important;
				vertical-align: middle;
				top: 2px !important;
			}
		}

		.dashicons-before {
			height: unset;
			&::before {
				width: 52px;
				display: inline-block;
				position: relative;
				font-size: 32px;
				text-align: center;
				top: 7px;
				height: unset;
			}

			&:hover {
				color: var(--color-masterbar-highlight);
			}
		}

		.dashicons-update {
			&::before {
				font-size: 40px;
				top: 3px;
			}
		}

		.dashicons-menu-alt {
			padding-top: 0;
			position: relative;
			float: left;
			&::before {
				font-size: 40px;
				top: -1px;
				vertical-align: middle;
			}
		}
	}

	@media only screen and (max-width: 600px) {
		&.masterbar__item-updates {
			display: none;
		}
	}

	@media only screen and (max-width: 480px) {
		// reset flex value on mobile
		flex: 0 1 auto;
		padding: 0;

		.masterbar__item-content {
			display: none;
		}

		&.masterbar__item--always-show-content .masterbar__item-content {
			display: block;
		}

		&.masterbar__item-my-site-actions {
			display: none;
		}
	}

	@media only screen and (max-width: 360px) {
		&.masterbar__reader {
			display: none;
		}
	}

	&:disabled {
		&:hover {
			background: initial;
			color: initial;
		}
	}

	&.masterbar__item-sidebar-menu {
		display: none;
		@media only screen and (max-width: 781px) {
			display: inline-block;
			margin-right: 2px;
			margin-left: -1px;
			cursor: pointer;
		}
	}


	&.masterbar__item-my-sites,
	&.masterbar__item-no-sites {
		padding: 0 8px;

		@media only screen and (max-width: 781px) {
			padding: 0;

			svg {
				width: 32px;
				height: 32px;
			}
		}
	}

	&.masterbar__item-help {
		cursor: pointer;
		// todo may need flex: unset
	}

	// Outward border styles for active global items.
	.is-global-sidebar-visible &.has-global-border {
		&::before,
		&::after {
			content: "";
			position: absolute;
			width: var(--masterbar-item-active-border-radius);
			height: var(--masterbar-item-active-border-radius);
			background-color: var(--color-sidebar-background);
			opacity: 0;
			bottom: 0;
			z-index: 1;
			pointer-events: none;
		}

		body.rtl & {
			&::before {
				left: auto;
				right: calc(-1 * var(--masterbar-item-active-border-radius));
				mask: radial-gradient(circle at 0 0, transparent var(--masterbar-item-active-border-radius), var(--color-sidebar-background) var(--masterbar-item-active-border-radius));
			}

			&::after {
				right: auto;
				left: calc(-1 * var(--masterbar-item-active-border-radius));
				mask: radial-gradient(circle at 100% 0, transparent var(--masterbar-item-active-border-radius), var(--color-sidebar-background) var(--masterbar-item-active-border-radius));
			}
		}

		&::before {
			left: calc(-1 * var(--masterbar-item-active-border-radius));
			mask: radial-gradient(circle at 0 0, transparent var(--masterbar-item-active-border-radius), var(--color-sidebar-background) var(--masterbar-item-active-border-radius));
		}

		&::after {
			right: calc(-1 * var(--masterbar-item-active-border-radius));
			mask: radial-gradient(circle at 100% 0, transparent var(--masterbar-item-active-border-radius), var(--color-sidebar-background) var(--masterbar-item-active-border-radius));
		}

		&.is-active {
			border-top-left-radius: var(--masterbar-item-active-border-radius);
			border-top-right-radius: var(--masterbar-item-active-border-radius);
			--color-masterbar-text: var(--color-sidebar-menu-selected-text);
			--color-masterbar-icon: var(--color-sidebar-menu-selected-text);
			--color-masterbar-highlight: var(--color-sidebar-menu-selected-text);
			--color-masterbar-item-active-background: var(--color-sidebar-background);

			&.masterbar__item-howdy {
				border-top-right-radius: 0;
			}

			&::before,
			&::after {
				opacity: 1;
			}

			@media only screen and (min-width: 781px) {
				&.masterbar__item-my-sites {
					border-top-left-radius: 0;
				}
			}
		}
	}
}

.masterbar__item-subitems {
	a {
		text-decoration: none;
	}
}

.masterbar__item-launch-site {
	gap: 6px;
	cursor: pointer;
	@media only screen and (max-width: 480px) {
		display: none;
	}
	svg {
		width: 15px;
		height: 15px;
		@media only screen and (max-width: 781px) {
			width: 28px;
			height: 28px;
		}
	}
}

.masterbar__item-logo {
	flex: 0 0 auto;
	padding: 0 0 0 8px;

	.masterbar__wpcom-logo {
		display: none;
	}

	.masterbar__wpcom-wordmark {
		display: block;
		width: 150px;
		height: 25px;
		margin: 0 5px;

		.masterbar--is-checkout & {
			margin: 0;
		}
	}

	@include breakpoint-deprecated( "<480px" ) {
		& {
			padding-right: 14px;
		}

		.masterbar__wpcom-logo {
			display: block;
			height: 24px;
			width: 24px;
			margin-left: 5px;
			fill: var(--color-text-inverted);

			.masterbar--is-checkout & {
				margin-left: 0;
			}
		}

		.masterbar__wpcom-wordmark {
			display: none;
		}
	}

	&:hover,
	&:focus {
		background: transparent;
	}
}

.masterbar__item-title {
	flex: 0 0 auto;
	padding-left: 0;
	text-transform: uppercase;

	@include breakpoint-deprecated( "<480px" ) {
		display: none;
	}

	.masterbar__item-content {
		display: block;

		@include breakpoint-deprecated( ">480px" ) {
			margin-top: 3px; /*Align with logo*/
		}
	}

	&:hover,
	&:focus {
		background: transparent;
	}
}

.masterbar__item-howdy {
	a {
		outline: none;
	}

	.masterbar__item-content {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	&,
	+ .masterbar__item-subitems {
		.gravatar {
			border: 1px solid var(--color-masterbar-border);
			border-radius: unset;
			margin-left: 1px;

			@media only screen and (max-width: 781px) {
				width: 26px;
				height: 26px;
				margin-left: 4px;
			}
		}
	}

	+ .masterbar__item-subitems {
		min-width: 264px !important;
		padding-top: 12px;


		@media only screen and (max-width: 781px) {
			max-height: 100%;
		}

		.masterbar__item-howdy-account-wrapper {
			display: flex;
			flex-direction: row;
			gap: 12px;
			padding: 4px 3px;

			.masterbar__item-howdy-account-gravatar {
				border: none;
				flex-basis: auto;
				max-width: 50%;
			}

			.masterbar__item-howdy-account-details {
				flex-basis: auto;
				flex-grow: 0;
				flex-shrink: 0;
				max-width: 50%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				padding: 3px 5px;
				margin: 0;
				line-height: 18px;

				.username {
					font-size: 11px;
					line-height: 14px;
					margin-bottom: 4px;
				}
			}
		}

		.masterbar__item-subitems-item {
			&.account-link,
			&.logout-link {
				position: relative;
				top: -5px;
				left: 85px;
				margin-bottom: 5px;
			}

			&.wpcom-link {
				box-sizing: border-box;
			}
		}

		span.wpcom-button {
			display: inline-block;
			color: #fff;
			background-color: #3858e9;
			border-color: #3858e9;
			border-radius: 2px;
			padding: 0 14px;
			box-sizing: border-box;
			height: 34px;
			line-height: 32px;
			width: 100%;
			text-align: center;
			margin: 12px 0;
			font-size: inherit;

			&:hover {
				background-color: #4664eb;
				border-color: #4664eb;
			}

			svg {
				display: inline-block;
				position: relative;
				top: -1px;
				margin-left: -2px;
				margin-right: -4px;
				vertical-align: middle;
				fill: currentColor;
				transform: scale(0.8);
			}
		}
	}

	@media only screen and (max-width: 781px) {
		.masterbar__item-howdy-howdy,
		+ .masterbar__item-subitems .masterbar__item-howdy-account-gravatar {
			display: none;
		}

		+ .masterbar__item-subitems {
			.masterbar__item-howdy-account-wrapper {
				padding-inline-start: 0;

				.masterbar__item-howdy-account-details {
					padding: 0;
				}
			}

			.masterbar__item-subitems-item {

				min-width: 100% !important;
				&.account-link {
					top: -10px;
					left: 0;
				}

				&.logout-link {
					top: -10px;
					left: 0;
				}
			}
		}
	}

}

.masterbar__login-links {
	display: flex;
	margin-left: auto;

	.masterbar__item-content {
		display: block;
		padding-left: 0;
	}

	@include breakpoint-deprecated( ">480px" ) {
		.masterbar__item-wrapper:last-child .masterbar__item {
			margin-right: 20px;
		}
	}
}

.masterbar__reader {
	@media only screen and (max-width: 781px) {
		.gridicon + .masterbar__item-content {
			padding-left: 6px;
		}
	}
}

.masterbar__site-infos {
	box-sizing: border-box;
	min-width: 260px;
	margin: 6px -6px -6px;
	padding: 12px;
	background-color: var(--color-global-masterbar-site-info-background, color-mix(in srgb, var(--color-masterbar-item-hover-background), $white 15% ));
	color: var(--color-masterbar-submenu-text);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.masterbar__site-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	.masterbar__site-info-label {
		margin-bottom: 4px;
	}

	.masterbar__info-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	// TODO: Remove this once the new Badge APIs are implemented (DS-203).
	.masterbar__info-badge {
		background-color: var(--color-global-masterbar-site-info-badge-background, rgba(255, 255, 255, 0.1));
		color: var(--color-global-masterbar-site-info-badge-color, var(--color-masterbar-submenu-text)) !important; //override the link color
	}
}

.button > .masterbar__site-info {
	padding: 6px 0;
}

.masterbar__item-reader-label {
	padding-left: 6px;
}

.masterbar-cart-button {
	svg {
		overflow: visible;

		@media only screen and (max-width: 781px) {
			width: 52px;
			height: 32px;
		}

		@media only screen and (max-width: 481px) {
			width: 44px;
		}
	}
	.cart-circle {
		transform: translate(10%, 2%) scale(0.93);
		stroke-width: 6%;
		stroke: var(--color-masterbar-background);
		transition: all 200ms ease-in-out;
	}

	&:hover .cart-circle {
		@media only screen and (min-width: 481px) {
			stroke: var(--color-masterbar-item-hover-background);
		}
	}
}

.masterbar-notifications {
	svg {
		overflow: visible;
		width: 24px;
		height: 24px;

		@media only screen and (max-width: 781px) {
			width: 32px;
			height: 32px;
		}
	}

	.notifications-bell-icon__bubble {
		animation: bubble-unread-indication 0.5s linear both;
		transform-origin: 20px 4px;

		use {
			transition: all 200ms ease-in-out;
			transform-origin: 20px 4px;
			transform: translate(-2%, 2%) scale(0.93);
			stroke-width: 6%;
			stroke: var(--color-masterbar-background);
		}
	}

	&:hover use {
		@media only screen and (min-width: 481px) {
			stroke: var(--color-masterbar-item-hover-background);
		}
	}
}

@keyframes bubble-unread-indication {
	30% {
		transform: scale3d(1.5, 1.5, 1.5);
	}
	60% {
		transform: scale3d(0.85, 0.85, 0.85);
	}
	80% {
		transform: scale3d(1.15, 1.15, 1.15);
	}
}

a.masterbar__quick-language-switcher {
	cursor: pointer;
}

.is-section-gutenberg-editor .masterbar {
	@include break-medium {
		opacity: 0;
		pointer-events: none;

		.masterbar__item {
			transform: translateY(-48px);
		}
	}
}

.has-no-masterbar .masterbar {
	opacity: 0;
	pointer-events: none;
}

.masterbar__secure-checkout {
	display: flex;
	align-items: center;

	.masterbar--is-akismet &,
	.masterbar--is-jetpack & {
		column-gap: 1em;
	}

	.masterbar__wpcom-wordmark {
		margin-left: 8px;
		color: var(--color-checkout-masterbar-text);
		fill: var(--color-checkout-masterbar-text);
	}

	.masterbar__jetpack-wordmark {
		height: 25px;

	}

	/* empty for now, saved for future use if needed
		.masterbar__akismet-wordmark {
		}
	*/

	.masterbar__close-button {
		flex: initial;
		width: initial;
		padding: 1em;

		@include breakpoint-deprecated( ">480px" ) {
			padding: 1.5em;
		}

		&:hover {
			.gridicon {
				fill: var(--studio-gray-90);
			}
		}
	}

	.masterbar__secure-checkout-text {
		color: var(--color-checkout-masterbar-text);
		font-size: 0.75rem;
		position: relative;

		/* Hide the secure checkout text on very small devices */
		@media screen and (max-width: 300px) {
			display: none;
		}

		@include breakpoint-deprecated( ">480px" ) {
			font-size: 100%;
		}

		.masterbar--is-wpcom & {
			transform: translateY(1px);
			margin-left: 16px;
		}

		.masterbar--is-jetpack & {
			transform: translateY(0.5px);
		}

		.masterbar--is-akismet & {
			transform: translateY(4px);
		}
	}
}

.masterbar__item-help {
	@media only screen and (min-width: 782px) {
		padding: 0 11px;
	}

	svg {
		fill: var(--color-masterbar-icon);
		width: 22px;
		height: 22px;

		@media only screen and (max-width: 781px) {
			width: 30px;
			height: 30px;
		}
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
