@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";
@import "@automattic/typography/styles/variables";
$brand-text: "SF Pro Text", $sans;
.global-sidebar {
	bottom: 0;
	display: flex;
	flex-direction: column;
	left: 0;
	height: 100%;
	position: relative;
	top: 0;
	transition: all 220ms ease-out;
	background-color: var(--color-sidebar-background);

	ul.sidebar__menu:not(.is-togglable) {
		height: 100%;
	}

	.tooltip {
		@include tooltip-base(0.95);
	}

	.tooltip-bottom {
		@include tooltip-bottom;
	}

	.tooltip-top {
		@include tooltip-top;
	}

	.tooltip-right {
		@include tooltip-right;
	}

	.sidebar__body .tooltip-right::after {
		left: 90%;
	}

	.sidebar__item {
		border-radius: 2px;
	}

	.sidebar__header {
		align-items: center;
		// Hide the header when the masterbar is visible.
		display: none;
		gap: 8px;
		padding: 30px 24px 29px;

		a {
			color: var(--nav-link);
			text-decoration: none;
		}

		span.dotcom {
			display: flex;
			width: 125px;
			height: 28px;
			margin: 0;
			background-image: url(calypso/assets/images/global-sidebar/dotcom.svg);
			background-repeat: no-repeat;
			background-position: center;
		}

		.link-logo {
			border-radius: 2px;
		}

		.sidebar__skip-navigation {
			position: absolute;
			left: -10000px;
			z-index: z-index("root", ".sidebar__skip-navigation");
			border-radius: 2px;

			&:focus {
				left: auto;
			}
		}
	}

	.sidebar__body {
		@include custom-scrollbars-on-hover(transparent, $gray-600);
		flex: 1;
		overflow-y: auto;
		padding-top: 16px;

		.sidebar,
		.sidebar__menu:not(.is-togglable) {
			display: flex;
			min-height: unset;
			flex-direction: column;
			gap: 3px;
		}

		.sidebar {
			overflow: visible;

			.sidebar__menu.is-togglable .sidebar__heading,
			.sidebar__expandable-content .sidebar__menu-link {
				font-size: $default-font-size;
				line-height: 15px;
			}

			.sidebar__expandable-content {
				.sidebar__menu-link {
					margin: 0;
					color: var(--color-sidebar-submenu-text);
					border-radius: 0;
				}

				.reader-sidebar-tags__text-input {
					padding-inline-end: 2px;
				}
			}

			&.is-collapsed {
				.sidebar__back-link {
					justify-content: center;
					padding-left: 0;

					a {
						padding: 6px 10px;
					}
				}

				li.sidebar__menu-item--plugins a {
					padding-top: 6px;
					padding-bottom: 6px;
				}
			}
		}

		li.sidebar__separator {
			margin: 0 0 32px;
		}

		.sidebar__expandable-arrow {
			fill: var(--color-sidebar-text);
			height: 15px;
			width: 15px;
		}

		.selected .sidebar__menu-link::after {
			display: none;
		}

		.sidebar__menu-link {
			.sidebar__menu-icon {
				&.svg_all-sites,
				&.svg_all-domains,
				&.svg-plugins,
				&.svg-calendar {
					.is-global-sidebar-visible:not(.is-global-sidebar-collapsed) & {
						margin-left: -2px;
					}
				}
				&.sidebar_svg-reader {
					.is-global-sidebar-visible:not(.is-global-sidebar-collapsed) & {
						margin-right: 10px;
					}
				}
			}
		}
	}

	.sidebar__footer {
		padding: 16px 24px;

		.sidebar__menu-icon {
			margin-right: 0;
		}
		.sidebar__footer-link {
			display: flex;
			align-items: center;
			border-radius: 2px;
		}
		.sidebar__item-help,
		.sidebar__item-notifications,
		.sidebar__item-search {
			display: flex;
			align-items: center;
			padding: 4px;
			cursor: pointer;

			svg {
				height: 24px;
				width: 24px;
			}
		}
		.sidebar__footer-reader {
			padding: 4px;
		}
		.sidebar__footer-profile {
			padding: 6px;
		}
		.sidebar__footer-wpadmin {
			display: flex;
			flex-grow: 1;
			align-items: center;
			height: 16px;
			padding: 8px 0;
			font-size: $font-body-small;
			border-radius: 2px;

			svg {
				&.wpicon {
					margin-right: 10px;
				}
				&.external {
					margin-left: auto;
				}
			}
		}

		.sidebar__footer-language-switcher {
			align-items: center;
			color: var(--color-sidebar-text);
			cursor: pointer;
			display: flex;
			font-size: $font-body-extra-small;
			height: 32px;
			gap: 6px;
			line-height: 32px;
			padding: 6px;
			justify-content: center;
			margin-inline-start: auto;

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

		.sidebar__item-help,
		.sidebar__footer-link,
		.sidebar__footer-wpadmin,
		.sidebar__item-search {
			color: var(--color-sidebar-text);

			svg path,
			svg rect {
				fill: var(--color-sidebar-gridicon-fill);
			}

			&:hover {
				color: var(--color-sidebar-menu-hover-text);
				text-decoration: none;

				svg path,
				svg rect {
					fill: var(--color-sidebar-menu-hover-text);
				}
			}
		}

		.sidebar__footer-language-switcher,
		.sidebar__footer-link,
		.sidebar__item-help,
		.sidebar__item-search {
			&:hover,
			&.is-active {
				background-color: var(--color-sidebar-menu-hover-background);
				border-radius: 4px;
			}
			&.is-active {
				svg path {
					fill: var(--color-sidebar-gridicon-selected-fill);
				}
			}
		}

		.sidebar__footer-write-post {
			order: -1;
			width: 100%;
			display: none; //hide by default
			justify-content: center;
			align-items: center;
			text-align: center;
			gap: 4px;
			color: var(--studio-gray-50);
			border-radius: 2px;

			&:hover,
			&.is-active {
				background-color: var(--color-surface);
				border-radius: 2px;
				color: var(--studio-gray-100);
			}
		}
	}

	.sidebar-notifications {
		.sidebar__menu-icon.sidebar_svg-notifications {
			fill: var(--color-sidebar-background);
			path {
				stroke: var(--color-sidebar-gridicon-fill);
			}
		}
		&:hover {
			background-color: var(--color-sidebar-menu-hover-background);
			.sidebar__menu-icon.sidebar_svg-notifications {
				fill: var(--color-sidebar-menu-hover-background);
			}
		}
		&.is-active {
			background-color: var(--color-sidebar-menu-hover-background);
			.sidebar__menu-icon.sidebar_svg-notifications {
				fill: var(--color-sidebar-menu-hover-background);
				path {
					stroke: var(--color-sidebar-gridicon-selected-fill);
				}
			}
		}
		&.has-unread .sidebar__menu-icon.sidebar_svg-notifications path {
			fill: var(--color-sidebar-gridicon-fill);
			stroke: unset;
		}
	}

	.sidebar__back-link {
		padding-left: 12px;
		margin-bottom: 24px;
		display: flex;
		align-items: center;
		gap: 4px;

		a {
			color: var(--nav-link);
			text-decoration: none;
			align-items: center;
			display: inline-flex;
			padding: 9px;
			border-radius: 4px;

			&:hover {
				background-color: var(--color-sidebar-menu-hover-background);
			}
		}

		svg.gridicons-chevron-left {
			vertical-align: top;
			fill: var(--color-sidebar-gridicon-fill);
		}

		.sidebar__app-title {
			font-size: $default-font-size;
			vertical-align: text-bottom;
		}
	}

	.site {
		background: var(--color-sidebar-menu-hover-background);
		flex: unset;
		padding: 0;
		margin: 16px 12px;
		border-radius: 2px;

		a.site__content {
			padding: 12px;
			border-radius: 2px;
		}
		&.is-selected,
		&:hover {
			background: var(--color-sidebar-menu-selected-background);

			.site__title,
			.site__domain {
				color: var(--color-sidebar-menu-selected-text);
			}
		}
	}

	.is-section-reader & .sidebar__menu-item-siteicon {
		margin-inline-end: 12px;
	}

	.sidebar__menu .sidebar__heading {
		outline: none;
	}
}

.accessible-focus div.global-sidebar {
	*:focus {
		outline-style: solid;
		outline-color: var(--color-primary-light);
		outline-width: 2px;
		outline-offset: 2px;
	}


	.button,
	.site__content,
	.components-button {
		&:focus {
			box-shadow: none;
			border-color: inherit;
		}
	}

	.sidebar__menu-link,
	.sidebar__menu.is-togglable.is-toggle-open .sidebar__heading {
		&:focus {
			background-color: var(--color-sidebar-menu-hover-background);
		}
	}

	.selected {
		.sidebar__menu-link,
		.sidebar__menu.is-togglable.is-toggle-open .sidebar__heading {
			&:focus {
				background-color: var(--color-sidebar-menu-selected-background);
			}
		}
	}
}

.masterbar {
	border: none;
}

.has-no-masterbar {
	.layout__content {
		padding-top: 0;
		margin-top: 0;
		top: 0;
	}

	.global-sidebar {
		.sidebar__header {
			display: flex;
		}

		.sidebar__body {
			padding-top: 0;
		}
	}
}

@media (min-width: 661px) {
	.is-global-sidebar-collapsed {
		.global-sidebar {
			.sidebar__header,
			.sidebar__footer {
				flex-direction: column;
			}

			.sidebar__header {
				span.dotcom {
					background-position: left;
					width: 24px;
					margin-left: 6px;

					.rtl & {
						background-position: right;
						margin-right: 6px;
					}
				}
			}

			.sidebar__footer {
				.sidebar__footer-language-switcher {
					font-size: 0;
					gap: 0;
					margin-inline-start: unset;
				}
			}

			.sidebar__body {
				overflow-y: visible;
				.sidebar__menu-item-parent .sidebar__menu-link {
					> *:not(:first-child) {
						display: none;
					}
				}
			}
		}
	}
}

@media (max-width: 660px) {
	.global-sidebar .tooltip:hover::after {
		display: none;
	}
}

body.has-global-sidebar .is-global-sidebar-visible.is-support-session {
	&::before {
		border: 2px solid var(--studio-orange);
		bottom: 0;
		content: "";
		left: 0;
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 0;
		z-index: z-index("root", ".layout__secondary") + 1;
	}
}

body.is-section-reader .global-sidebar {
	.sidebar__footer-write-post {
		display: flex !important;
	}
}
