.item-list {
margin: 0;
padding: 0;
border: 1px solid var(--mcpui-border);
border-radius: var(--mcpui-radius-card);
background: var(--mcpui-surface);
box-shadow: var(--mcpui-shadow-card);
overflow: hidden;
}
.ordered-list,
.unordered-list {
padding-left: var(--mcpui-space-6);
}
.unstyled-list {
list-style: none;
}
.list-item {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--mcpui-space-2);
padding: var(--mcpui-space-3) var(--mcpui-space-4);
border-bottom: 1px solid var(--mcpui-border);
transition: background var(--mcpui-duration) var(--mcpui-ease);
}
.list-item:last-child {
border-bottom: none;
}
.list-item::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 2px;
background: var(--mcpui-accent);
opacity: 0;
transition: opacity var(--mcpui-duration) var(--mcpui-ease);
}
.list-item:hover {
background: var(--mcpui-accent-wash);
}
.list-item:hover::before {
opacity: 1;
}
.item-icon {
min-width: 1.5rem;
font-size: var(--mcpui-text-lg);
line-height: 1;
}
.item-title {
color: var(--mcpui-ink);
font-weight: 600;
}
.item-link {
color: var(--mcpui-accent);
font-weight: 600;
text-decoration: none;
}
.item-link:hover {
text-decoration: underline;
}
.item-description {
flex-basis: 100%;
margin-top: var(--mcpui-space-1);
max-width: 68ch;
color: var(--mcpui-ink-dim);
font-size: var(--mcpui-text-sm);
}
.unstyled-list .item-description {
padding-left: 0;
}
.list-info {
padding: var(--mcpui-space-3) var(--mcpui-space-4);
border-top: 1px solid var(--mcpui-border);
background: var(--mcpui-surface-sunken);
}
.item-count {
color: var(--mcpui-ink-faint);
font-size: var(--mcpui-text-xs);
letter-spacing: var(--mcpui-tracking-wide);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.list-empty {
padding: var(--mcpui-space-6) var(--mcpui-space-4);
text-align: center;
color: var(--mcpui-ink-dim);
border: 1px solid var(--mcpui-border);
border-radius: var(--mcpui-radius-card);
background: var(--mcpui-surface);
}
.item-category {
margin-left: var(--mcpui-space-2);
padding: 0.1em 0.5em;
border-radius: var(--mcpui-radius-pill);
background: var(--mcpui-accent-wash);
color: var(--mcpui-ink-dim);
font-size: var(--mcpui-text-xs);
letter-spacing: var(--mcpui-tracking-wide);
text-transform: uppercase;
white-space: nowrap;
}
.item-title,
.item-link,
.item-description {
overflow-wrap: anywhere;
}
.list-item:not(.is-linked):hover { background: transparent; }
.list-item:not(.is-linked):hover::before { opacity: 0; }
.list-item.is-linked .item-link::after {
content: "";
position: absolute;
inset: 0;
}
.list-item.is-linked:focus-within {
background: var(--mcpui-accent-wash);
}
.list-item.is-linked:focus-within::before { opacity: 1; }
.item-description {
padding-left: 0;
}
.list-item:has(.item-icon) .item-description {
padding-left: calc(1.5rem + var(--mcpui-space-2));
}