:root {
  --sl-hsl-neutral-50: var(--sl-hsl-gray-50);
  --sl-hsl-neutral-100: var(--sl-hsl-gray-100);
  --sl-hsl-neutral-200: var(--sl-hsl-gray-200);
  --sl-hsl-neutral-300: var(--sl-hsl-gray-300);
  --sl-hsl-neutral-400: var(--sl-hsl-gray-400);
  --sl-hsl-neutral-500: var(--sl-hsl-gray-500);
  --sl-hsl-neutral-600: var(--sl-hsl-gray-600);
  --sl-hsl-neutral-700: var(--sl-hsl-gray-700);
  --sl-hsl-neutral-800: var(--sl-hsl-gray-800);
  --sl-hsl-neutral-900: var(--sl-hsl-gray-900);
  --sl-hsl-neutral-950: var(--sl-hsl-gray-950);
}

.sl-theme-light {
  --sl-color-neutral-0: hsl(var(--sl-hsl-neutral-0));
  --sl-hsl-neutral-0: 0 0% 100%;
  --sl-hsl-gray-50: 0 0% 97.5%;
  --sl-hsl-gray-100: 240 4.8% 95.9%;
  --sl-hsl-gray-200: 240 5.9% 90%;
  --sl-hsl-gray-300: 240 4.9% 83.9%;
  --sl-hsl-gray-400: 240 5% 64.9%;
  --sl-hsl-gray-500: 240 3.8% 46.1%;
  --sl-hsl-gray-600: 240 5.2% 33.9%;
  --sl-hsl-gray-700: 240 5.3% 26.1%;
  --sl-hsl-gray-800: 240 3.7% 15.9%;
  --sl-hsl-gray-900: 240 5.9% 10%;
  --sl-hsl-gray-950: 240 7.3% 8%;
}

.sl-theme-dark {
  --sl-color-neutral-0: hsl(var(--sl-hsl-neutral-0));
  --sl-hsl-neutral-0: 240 5.9% 11%;
  --sl-hsl-gray-50: 240 5.1% 15%;
  --sl-hsl-gray-100: 240 5.7% 18.2%;
  --sl-hsl-gray-200: 240 4.6% 22%;
  --sl-hsl-gray-300: 240 5% 27.6%;
  --sl-hsl-gray-400: 240 5% 35.5%;
  --sl-hsl-gray-500: 240 3.7% 44%;
  --sl-hsl-gray-600: 240 5.3% 58%;
  --sl-hsl-gray-700: 240 5.6% 73%;
  --sl-hsl-gray-800: 240 7.3% 84%;
  --sl-hsl-gray-900: 240 9.1% 91.8%;
  --sl-hsl-gray-950: 0 0% 95%;
}

sl-button[variant=neutral-200]::part(base) {
  background-color: var(--sl-color-neutral-200);
  border-color: var(--sl-color-neutral-300);
  color: var(--sl-color-neutral-900);
}

sl-button[variant=neutral-200]::part(base):hover {
  background-color: var(--sl-color-neutral-300);
  border-color: var(--sl-color-neutral-300);
}

sl-button[variant=neutral-200]::part(base):active {
  background-color: var(--sl-color-neutral-400);
  border-color: var(--sl-color-neutral-400);
}

nsl-group {
  --border-color: var(--sl-color-neutral-200);
  --border-radius: var(--sl-border-radius-medium);
  --border-width: 1px;
  --padding: var(--sl-spacing-large);
  display: block;
  background-color: var(--sl-panel-background-color);
  box-shadow: var(--sl-shadow-x-small);
  border: solid var(--border-width) var(--border-color);
  border-radius: var(--sl-border-radius-small);
  padding: var(--padding);
}

nsl-group > .nsl-group-full-width {
  margin-left: calc(var(--padding) * -1);
  margin-right: calc(var(--padding) * -1);
  width: calc(100% + var(--padding) * 2);
}

nsl-group-title {
  position: relative;
  top: -0.25rem;
  margin-bottom: 0.75rem;
  display: block;
  font-size: var(--sl-font-size-large);
}

nsl-group-footer {
  position: relative;
  margin-top: var(--padding);
  display: block;
}

nsl-sidenav {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  padding: var(--sl-padding-x-small);
  --item-color: var(--sl-color-neutral-200);
  --item-color-hover: var(--sl-color-neutral-100);
  --item-color-selected: var(--sl-color-neutral-300);
}

/*
nsl-sidenav[collapsed] {

}

nsl-sidenav-item {
	background-color: var(--item-color);
	border-radius: var(--sl-border-radius-small);
	display: flex;
}
nsl-sidenav-item.selected {
	background-color: var(--item-color-selected);
}
nsl-sidenav-item:not(.selected):hover {
	background-color: var(--item-color-hover);
}

nsl-sidenav-item > sl-icon {
	aspect-ratio : 1 / 1;
}

nsl-sidenav-item > :not(sl-icon) {
	flex-grow: 1;
}
nsl-sidenav-item[collapsed] > :not(sl-icon) {
	display: none;
}
*/
/* The next two rules were moved here from bundle.scss in the Mtel.BlazorApp project -- is this the right place for them? */
nsl-masthead sl-button::part(base), nsl-masthead sl-icon-button::part(base) {
  background: transparent;
  border: 0;
  color: var(--sl-color-neutral-200);
  border-radius: 0;
  transition: none;
  outline-offset: -3px;
}
nsl-masthead sl-button::part(base):hover, nsl-masthead sl-icon-button::part(base):hover {
  background-color: var(--sl-color-neutral-700);
  color: white;
}
nsl-masthead sl-button::part(label) {
  padding: 0 var(--sl-spacing-small);
}
nsl-masthead sl-icon-button {
  display: flex;
}
nsl-masthead sl-icon-button::part(base) {
  padding: var(--sl-spacing-small);
}
nsl-masthead sl-dropdown[open] {
  background-color: var(--sl-color-neutral-600);
}
nsl-masthead sl-dropdown:not([open]) sl-icon-button:hover {
  background-color: var(--sl-color-neutral-700);
}
nsl-masthead sl-dropdown > sl-icon-button::part(base) {
  color: white;
  height: 100%;
}
nsl-masthead sl-dropdown > sl-menu {
  --sl-panel-border-color: var(--sl-color-neutral-600);
  --sl-panel-background-color: var(--sl-color-neutral-900);
  --sl-border-radius-medium: 0;
}
nsl-masthead sl-dropdown > sl-menu sl-menu-item::part(base) {
  color: var(--sl-color-neutral-200);
}
nsl-masthead sl-dropdown > sl-menu sl-menu-item::part(base):hover {
  background-color: var(--sl-color-neutral-700);
}

nsl-responsive-radio-group sl-radio-group::part(button-group__base) {
  flex-wrap: wrap;
}