baseline

web/css/components/app-list-tabs.css

@@ -0,0 +1,37 @@
+:root {
+  --list-tabs-border: var(--app-border);
+  --list-tabs-active: var(--app-primary);
+  --list-tabs-muted: var(--app-muted-color);
+}
+
+.app-list-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: var(--app-spacing);
+  border-bottom: 1px solid var(--list-tabs-border);
+}
+
+.app-list-tabs button,
+.app-list-tabs a {
+  background: transparent;
+  border: 0;
+  padding: 5px 10px 5px 10px;
+  color: var(--list-tabs-muted);
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  text-decoration: none;
+}
+
+.app-list-tabs button:hover,
+.app-list-tabs button:focus-visible,
+.app-list-tabs a:hover,
+.app-list-tabs a:focus-visible {
+  color: var(--app-color);
+}
+
+.app-list-tabs button.is-active,
+.app-list-tabs a.is-active {
+  color: var(--app-color);
+  border-color: var(--list-tabs-active);
+}