ui-menu{
	>ui-header{
		grid-template-areas:'icon heading';
		grid-template-columns:16px auto;
	}
	>menu{
		&.context{
			>a{
				border-radius:3px;
				border:1px solid rgba(0,0,0,0);
				white-space:nowrap;
				&:hover{
					border:1px solid var(--color-stroke);
				}
			}
			border-radius:3px;
			border:1px solid var(--color-stroke);
			font-size:85%;
			min-width:200px;
			padding:0.25em;
			white-space:nowrap;
		}
		>li{
			&.active{
				>a{
					background:var(--color-bg);
					color:var(--color-fg);
					font-weight:bold;
				}
			}
			>a{
				&:last-child{
					border-width:1px;
				}
				align-items:center;
				background:var(--color-bg);
				border:1px solid var(--color-stroke);
				border-width:1px 1px 0px 1px;
				color:var(--color-fg);
				column-gap:0.25em;
				display:grid;
				grid-template-columns:16px auto;
				padding:0.25em;
				text-decoration:none;
			}
			list-style:none;
		}
		background:var(--color-bg);
		padding:0px;
	}
	display:inline-block;
}
body{
	>nav{
		>ui-menu{
			>header{
				display:none;
			}
			>menu{
				>li{
					>a{
						&:last-child{
							border:0px;
						}
						border-right:1px solid var(--color-stroke);
						border-width:0px 1px 0px 0px;
						display:inline-grid;
						padding:0.25em 1em;
					}
					display:inline-block;
				}
				background:var(--color-bg);
				color:var(--color-fg);
			}
			>li{
				>a{
					border:0px;
					border-radius:2px 2px 0px 0px;
					display:inline-grid;
				}
			}
			display:inline-block;
		}
	}
	>aside{
		>ui-menu{
			&:last-child{
				margin-bottom:0px;
			}
			>ui-header{
				border:0px;
				font-weight:normal;
			}
			>menu{
				>li{
					>a{
						border:0px;
						padding-left:0.75em;
					}
				}
			}
			display:block;
			font-size:90%;
			margin-bottom:0.5em;
		}
	}
	>main{
		>ui-menu{
			>header{
				display:none;
			}
			>menu{
				>li{
					>a{
						border:0px;
						border-radius:2px 2px 0px 0px;
						display:inline-grid;
					}
				}
				display:flex;
				gap:2px;
			}
			display:block;
			background:var(--color-bg);
			border:1px solid var(--color-stroke);
			border-width:1px 1px 0px 1px;
			padding:2px 2px 0px 2px;
		}
		>ui-menu+nav.breadcrumb{
			border-top:0px;
		}
	}
}