@react95/core/cjs/List/List.css.ts.vanilla.css

Windows 95 styleguide

.r95_1lxkvz40 {
  position: relative;
  display: flex;
  align-items: center;
  user-select: none;
  margin: var(--r95-space-0);
  padding-block: var(--r95-space-2);
  padding-inline: var(--r95-space-6);
  color: var(--r95-color-materialText);
}
.r95_1lxkvz40:hover {
  background: var(--r95-color-headerBackground);
  color: var(--r95-color-materialTextInvert);
}
.r95_1lxkvz40:not(:has(svg)) {
  padding-inline-start: 26px;
}
.r95_1lxkvz40:has(ul):after {
  content: '';
  position: absolute;
  width: var(--r95-space-5);
  height: var(--r95-space-8);
  right: var(--r95-space-8);
  background-color: var(--r95-color-materialText);
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTS4wMDQgMTguMDA3bDMuMDE2LS4wMTMuMDEtMy4wMSAyLjE4Ni4wMXYtMi4wMjVsMi44MTYtLjAxLS4wMDktMi45NEgxMHYtMmMuMDEtLjAxLTEuOTktLjAzNi0yLS4wMjYuMDEtLjAxLjAzNS0zLjAxLjAyNi0zIC4wMS0uMDEtMi44NDUtLjAxMS0yLjg1NS0uMDAxdi0yTDMgMi45OWMuMDEtLjAxLjAzNS0zLjAxMS4wMjUtMy4wMDEuMDEtLjAxLTMuMDQuMDEzLTMuMDI1LjAyM2wuMDA0IDE3Ljk5NHoiIGZpbGwtb3BhY2l0eT0ibnVsbCIvPjwvc3ZnPg==');
  mask-position: center center;
  mask-size: var(--r95-space-5) var(--r95-space-8);
  mask-repeat: no-repeat;
}
.r95_1lxkvz40:has(ul):hover:after {
  background-color: var(--r95-color-materialTextInvert);
}
.r95_1lxkvz40 svg {
  margin-right: var(--r95-space-10);
  min-width: var(--r95-space-16);
}
.r95_1lxkvz40 ul {
  display: none;
  position: absolute;
  top: calc(var(--r95-space-2) * -1);
  left: 97%;
  color: var(--r95-color-materialText);
  z-index: var(--r95-zIndex-taskbar);
}
.r95_1lxkvz40:has(ul):hover > ul {
  display: block;
}
.r95_1lxkvz41 {
  height: var(--r95-space-1);
  border-top-style: solid;
  border-top-width: var(--r95-space-1);
  border-top-color: var(--r95-color-borderDark);
  border-bottom-width: var(--r95-space-1);
  border-bottom-style: solid;
  border-bottom-color: var(--r95-color-borderLightest);
  width: 98%;
  margin-left: var(--r95-space-2);
}
.r95_1lxkvz42 {
  background-color: var(--r95-color-material);
  padding: var(--r95-space-2);
  border: none;
  margin: 0;
  list-style: none;
  box-shadow: var(--r95-shadow-out);
}