:host {
  display: block;
}

.item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--sidebar-item-gap);
  inline-size: 100%;
  min-block-size: var(--sidebar-item-min-block-size);
  padding-block: var(--sidebar-item-padding-block);
  padding-inline-start: var(--sidebar-item-padding-inline-start);
  padding-inline-end: var(--sidebar-item-padding-inline-end);
  border: 0;
  background-color: var(--sidebar-item-background-default);
  color: var(--sidebar-item-text-default);
  font-family: var(--sidebar-item-font-family);
  font-size: var(--sidebar-item-font-size);
  line-height: var(--sidebar-item-line-height);
  font-weight: var(--sidebar-item-font-weight-default);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

/* A second-level row indents so its icon sits under the parent's label (1523:4046). */
:host([slot='children']) .item {
  padding-inline-start: var(--sidebar-item-padding-inline-start-nested);
}

.icon {
  flex: none;
  color: var(--sidebar-item-icon-default);
}

.label {
  flex: 1 1 0;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secondary {
  flex: none;
  font-size: var(--sidebar-item-secondary-font-size);
  line-height: var(--sidebar-item-secondary-line-height);
  font-weight: var(--sidebar-item-secondary-font-weight);
  color: var(--sidebar-item-secondary-color);
}

/* The active surface is a coloured fill, so the secondary label takes the on-colour grey: the
   neutral one is 4.01:1 on it, below the 4.5:1 that 14px text needs. */
:host([active]) .secondary {
  color: var(--sidebar-item-secondary-color-active);
}

.tag {
  flex: none;
}

/* Neutral numbered badge (Figma numbered-badge — grey, not the dark mud-badge default). */
.badge {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--sidebar-item-badge-min-size);
  min-block-size: var(--sidebar-item-badge-min-size);
  padding-inline: var(--sidebar-item-badge-padding-inline);
  border-radius: var(--sidebar-item-badge-border-radius);
  background-color: var(--sidebar-item-badge-background);
  color: var(--sidebar-item-badge-color);
  font-size: var(--sidebar-item-badge-font-size);
  line-height: var(--sidebar-item-badge-line-height);
  font-weight: var(--sidebar-item-badge-font-weight);
}

/* Red notification badge (Figma notification-badge 797:43130), drawn by mud-badge. */
.badge-notification {
  flex: none;
}

.chevron {
  flex: none;
  color: var(--sidebar-item-icon-default);
  transition: transform 150ms ease-out;
}

:host([expanded]) .chevron {
  transform: rotate(180deg);
}

/* Hover. */
:host(:not([active]):not([disabled])) .item:hover {
  background-color: var(--sidebar-item-background-hover);
}

/* Active — brand surface, brand label, left rail (overlay, no layout shift). */
:host([active]) .item {
  background-color: var(--sidebar-item-background-active);
  color: var(--sidebar-item-text-active);
  font-weight: var(--sidebar-item-font-weight-active);
}

:host([active]) .rail {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--sidebar-item-active-border-width);
  background-color: var(--sidebar-item-active-border-color);
}

:host([active]) .icon {
  color: var(--sidebar-item-icon-active);
}

/* Disabled. */
:host([disabled]) .item {
  color: var(--sidebar-item-text-disabled);
  cursor: default;
  pointer-events: none;
}

:host([disabled]) .icon {
  color: var(--sidebar-item-icon-disabled);
}

/* Keyboard focus ring — Focus Ring/Medium outside the row (855:8241): a 2px
   white halo inside a blue band ending 5px out. The row is lifted above its
   neighbours so the next row's fill does not cover the band. */
.item:focus-visible {
  z-index: 1;
  outline: none;
  box-shadow:
    0 0 0 var(--sidebar-focus-ring-width-inner) var(--focus-ring-color-inner),
    0 0 0 calc(var(--sidebar-focus-ring-width-inner) + var(--sidebar-focus-ring-width-outer))
      var(--focus-ring-color-outer);
}

/* Nested children list. */
.children {
  display: flex;
  flex-direction: column;
}

.children[hidden] {
  display: none;
}

/* Icon-only collapsed rail. */
:host([collapsed]) .item {
  justify-content: center;
  padding-inline: var(--sidebar-item-padding-block);
}

:host([collapsed]) .label,
:host([collapsed]) .secondary,
:host([collapsed]) .tag,
:host([collapsed]) .badge,
:host([collapsed]) .badge-notification,
:host([collapsed]) .chevron {
  display: none;
}