:host {
	display: flex;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	height: 100%;
	position: relative;
}

:host>div {
	overflow-y: auto;
	height: 100%;
}

:not(:host[label], :host[icon]),
:host[disabled] {
	display: none;
}

:host>div {
	display: none;
}

:host>li {
	height: 100%;
	list-style: none;
}

:host>li>a {
	padding: 0 1.5em;
	height: 100%;
}

:host[selected]>li>a {
	display: flex;
	color: rgb(var(--smoothly-color-contrast));
	background: rgb(var(--smoothly-color-shade));
}

:host:hover>li>a {
	color: rgb(var(--smoothly-color-contrast));
	background-color: rgb(var(--smoothly-color-tint));
	transition: 0.2s;
}

:host>li>a>smoothly-icon {
	align-self: inherit;
}
:host[icon]>li>a>.label {
	display: none;
}
:host([icon][label]):hover::before,
:host([icon][label]):hover::after {
	position: absolute;
	color: rgb(var(--smoothly-color-contrast));
	background-color: rgb(var(--smoothly-color-tint));
	border-radius: 0.25rem;
	pointer-events: none;
}
:host([icon][label]):hover::before {
	content: "";
  bottom: -1.75rem;
  transform: rotate(45deg);
  width: 1.25em;
  height: 1.25em;
}
:host([icon][label]):hover::after {
	content: attr(label);
	white-space: nowrap;
	bottom: -3.25rem;
	padding: .5rem 1rem;
	border-radius: .25rem;
}

/* Mobile mode */
:host.smoothly-mobile-mode>li>a {
	padding: 0;
}
:host.smoothly-mobile-mode[icon]>li>a>.label {
	display: unset;
	padding: 0 1rem;
}
:host.smoothly-mobile-mode>li>a {
	margin-left: -1.5rem;
	margin-right: -1.5rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
:host.smoothly-mobile-mode[icon][label]:hover::before,
:host.smoothly-mobile-mode[icon][label]:hover::after {
	content: unset;
}