tabs-menu-panel,
panel[is=tabs-menu-panel] {
	width: 350px;
	--panel-padding: 8px;

	&::part(content) {
		--panel-background: var(--material-sidepane);
	}

	& #zotero-tabs-menu-wrapper {
		width: 100%;
		border-radius: 5px;
		--width-focus-border: 2px;
		display: flex;
		flex-direction: column;
		min-height: 0;
		gap: 6px;

		& #zotero-tabs-menu-filter {
			margin: 0;
			border-radius: 5px;
			border: 1px solid transparent;
			padding-inline-start: 5px !important;
			padding: 2px;
		
			@media not (-moz-platform: windows) {
				@include focus-ring;
			}
		}

		& #zotero-tabs-menu-list {
			appearance: none;
			margin: 0;
			overflow-x: hidden;
			scrollbar-width: thin;
		
			.row {
				display: flex;
				border-radius: 5px;
				padding: 2px 3px 2px 6px;
				gap: 4px;
				align-items: center;
				height: 18px;

				&:hover,
				&:focus-visible {
					background-color: var(--fill-quinary);
				}

				&:active {
					background-color: var(--fill-quarternary);
				}

				&.selected {
					background-color: var(--color-accent) !important;
					color: #fff;

					@include state("#zotero-tabs-menu-wrapper:not(:focus-within)") {
						color: currentColor;
						background-color: var(--color-quarternary-on-sidepane) !important;
					}

					.zotero-tabs-menu-entry.close {
						&:hover,
						&:focus-visible {
							background-color: #ffffff1a;
						}

						&:active {
							background-color: #ffffff33;
						}
					}
				}

				&:not(:hover, .selected) {
					.zotero-tabs-menu-entry.close {
						display: none;
					}
				}

				.zotero-tabs-menu-entry {
					// @include focus-ring;
					border-radius: 2px;
					height: 18px;
					margin: 0;

					// Use windows-focus-ring on all platforms according to the design
					--color-focus-outer-border: light-dark(var(--fill-primary), var(--accent-white));
					--color-focus-border: light-dark(var(--accent-white), #00000080);
					--width-focus-border: 1px;
					--width-focus-outer-border: 2px;
					@include windows-focus-ring;

					&.close {
						height: 16px;
						width: 16px;
						// Center the icon within the larger box
						display: flex;
						justify-content: center;
						align-items: center;
						
						&[hidden] {
							display: none;
						}

						&:hover,
						&:focus-visible {
							background-color: var(--fill-quinary);
						}

						&:active {
							background-color: var(--fill-quarternary);
						}
						
						.icon-x-8 {
							fill: currentColor;
						}
					}

					&.title {
						padding: 0;
						// Align the left edge of the row when focused
						padding-inline-start: 3px;
  						margin-inline-start: -3px;
						color: unset;
						// Align label with the icon
						display: flex;
						align-items: center;
						width: 100%;
						min-width: 0;
						&.selected {
							font-weight: 600;
						}
						label {
							overflow: hidden;
							// override default description margins
							margin-bottom: 0;
							margin-block-start: 0;
							// show as much of the description as possible
							white-space: nowrap;
							text-overflow: ellipsis;
							display: inline-block;
						}
						.tab-icon {
							width: 16px;
							height: 16px;
							margin-inline-end: 4px;
							flex-shrink: 0;
						}
					}
				}
			}
			
			#zotero-tabs-menu-row-empty {
				pointer-events: none;

				.zotero-tabs-menu-entry {
					padding-inline: 8px;
					color: var(--fill-tertiary);
				}
			}
			
			#zotero-tabs-menu-dragged {
				opacity: 0;
			}	
		}
	}
}