@import '@automattic/typography/styles/variables';

/* Override very specific css on an attribute */
.sidebar {
	.accessible-focus div.global-sidebar & {
		.sidebar-streams__conversations .sidebar__menu-link,
		.sidebar__menu.is-togglable .sidebar__heading {
			&:focus {
				border-radius: 2px;
				z-index: 1;
			}
		}
	}
}

body.is-section-reader {
	&.rtl .layout__content {
		padding: calc( var( --masterbar-height ) + var( --content-padding-top ) )
			calc( var( --sidebar-width-max ) ) var( --content-padding-bottom ) 16px;
	}

	.layout__content {
		// Add border around everything
		overflow: hidden;
		min-height: 100vh;
		padding-top: calc( var( --masterbar-height ) + var( --content-padding-top ) );
		padding-bottom: var( --content-padding-bottom );
		@media only screen and ( min-width: 782px ) {
			padding: calc( var( --masterbar-height ) + var( --content-padding-top ) ) 16px
				var( --content-padding-bottom ) calc( var( --sidebar-width-max ) ) !important;
		}
		.layout_primary > div {
			padding-bottom: 0;
		}
	}

	.layout__secondary .global-sidebar {
		border: none;
	}

	.has-no-masterbar .layout__content .main {
		padding-top: var( --content-padding-top );
	}

	@media only screen and ( max-width: 600px ) {
		.navigation-header__main {
			justify-content: normal;
			align-items: center;
		}
	}

	@media only screen and ( max-width: 781px ) {
		.layout__primary > div {
			background: var( --color-surface );
			margin: 0;
			border-radius: 8px;
			height: calc(
				100vh - var( --masterbar-height ) - var( --content-padding-top ) - var(
						--content-padding-bottom
					)
			);
		}
	}
}

:root .theme-default .is-section-reader .global-sidebar {
	.sidebar-menu-container {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 0 16px;
	}
	.sidebar__menu {
		.sidebar__expandable-content {
			padding: 0;
			margin: 0;
		}
		.sidebar__heading {
			margin: 0;
		}
		&:not( .is-togglable ) {
			gap: 3px;
		}
		.sidebar__menu-link {
			margin: 0;
		}
		.sidebar__menu--selected {
			.sidebar__heading {
				color: var( --color-sidebar-menu-selected-text );
				background-color: var( --color-sidebar-menu-hover-background );
				&:hover {
					background-color: var( --color-sidebar-menu-hover-background );
					color: var( --color-sidebar-menu-selected-text );

					.sidebar__expandable-arrow {
						fill: currentColor;
					}
				}
			}

			.sidebar__expandable-title {
				color: currentColor;
			}
			.sidebar__menu-icon {
				fill: currentColor;
				&.sidebar_svg-a8c {
					fill: none;
					g {
						fill: none;
					}
				}
			}
			.sidebar__expandable-button {
				color: currentColor;
			}

			.sidebar__expandable-arrow {
				fill: currentColor;
			}
		}
	}
	.sidebar__menu-icon {
		margin-right: 12px;
	}
	.sidebar-header {
		display: flex;
		justify-content: space-between;
		padding: 24px 8px;

		h3 {
			font-weight: 500;
			font-size: 20px;
			line-height: 26px;
		}

		p {
			color: var( --studio-gray-50 );
			font-size: $font-body-small;
			margin: 0;
		}

		.reader-search-icon {
			padding-inline: 0;
			height: 30px;
		}

		.sidebar_svg-search {
			margin: 0;
		}
	}

	.sidebar__menu-link-reader {
		line-height: 1.8;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.sidebar__menu .count {
		position: relative;
		flex-shrink: 0;
		top: 0;
		font-size: 0.67rem; /* stylelint-disable-line scales/font-sizes */
		font-weight: normal;
		box-sizing: border-box;
		padding: 4px 6px;
		line-height: 1;
		min-width: 22px;
		background-color: transparent;
		border-color: currentColor;
		outline-color: currentColor;
		color: currentColor;
		margin: 0 auto;
	}

	.sidebar__menu-link:hover .count {
		border-color: var( --color-sidebar-menu-hover-text );
		outline-color: #f00;
		color: var( --color-sidebar-menu-hover-text );
	}

	.selected .sidebar__menu-link .count {
		background: transparent;
		border-color: var( --color-sidebar-menu-selected-text );
		color: var( --color-sidebar-menu-selected-text );
	}

	.sidebar__menu-item-siteicon {
		margin-right: 15px;
		position: relative;
		flex-shrink: 0;
		border-radius: 4px;
	}

	.sidebar__menu-item-last-updated {
		display: block;
		font-size: 0.67rem; /* stylelint-disable-line scales/font-sizes */
		font-style: italic;
		color: var( --color-sidebar-text-alternative );
	}

	.sidebar__separator {
		height: 0;
	}

	.sidebar__menu-item-sitename {
		line-height: 14px;
		max-width: 80%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		margin-right: 8px;

		// If the site name is marked with ltr or rtl, ensure we use that directionality.
		&:has( span[direction='ltr'] ) {
			/*!rtl:ignore*/
			direction: ltr;
		}

		&:has( span[direction='rtl'] ) {
			/*!rtl:ignore*/
			direction: rtl;
		}
	}

	.sidebar-streams__following-load-more {
		color: var( --color-link );
		cursor: pointer;
		font-size: $font-body-extra-small;
		text-align: center;
		margin-top: 15px;
		padding: 10px 12px;
		width: 100%;

		&:hover {
			color: var( --color-link-dark );
		}
	}
	.sidebar-streams__tags {
		.sidebar-menu__item.add-tag-form {
			padding-top: 12px;
		}
	}
}

.is-reader-page.theme-default .sidebar .sidebar__menu-link::after {
	border-right-color: #fff;
}

.theme-default .global-sidebar .sidebar .sidebar__menu {
	&:is( .is-togglable ) {
		&.is-toggle-open {
			outline: 1px solid #e0e0e0;
			border-radius: 4px;
			.sidebar__heading {
				background-color: #fff;
			}
			margin-bottom: 16px;
		}
		.sidebar__menu-link {
			display: grid;
			grid-template-columns: 24px 1fr 36px;
			align-items: center;
			gap: 4px;
			line-height: 1.5;
			padding: 12px 10px 12px 18px;
			box-sizing: content-box;

			&.view-more-link {
				color: var( --color-link );
				text-decoration: underline;
				cursor: pointer;
			}

			&:has( > :nth-child( 1 ):last-child ) > :first-child {
				grid-column-start: 2;
			}
		}

		.selected {
			.sidebar__menu-link {
				font-weight: 600;
			}

			svg:not( .sidebar_svg-a8c-conversations, .sidebar_svg-a8c, .sidebar_svg-a8c-conversations ) {
				fill: currentColor;
			}

			svg:is( .sidebar_svg-a8c-conversations, .sidebar_svg-a8c, .sidebar_svg-a8c-conversations ) {
				fill: none;
				g {
					stroke: currentColor;
				}
			}

			&:hover,
			&:focus {
				color: var( --color-sidebar-submenu-selected-hover-text );
				--color-sidebar-gridicon-fill: currentColor;
				--color-sidebar-gridicon-hover-fill: currentColor;
				--color-sidebar-menu-hover-text: currentColor;
			}
		}
	}
	.sidebar_svg-a8c-conversations,
	.sidebar_svg-a8c {
		fill: none;
		g {
			stroke: currentColor;
		}
	}
	.selected {
		.sidebar__menu-link {
			color: var( --color-sidebar-menu-selected-text );
			--color-sidebar-gridicon-fill: currentColor;
		}
	}
}
