/*
Item

A row with media, a title, a description and actions: settings rows,
people, files, notifications. A flex row that wraps, so a header and a
footer take full lines above and below.

  .item                        the row
  .item.is-outline | is-muted  a rule, or a muted fill
  .item.is-sm | is-xs          tighter padding and gap
  a.item                       hover fill and a focus ring
  .item-media[data-variant="icon" | "image" | "avatar"]
  .item-content > .item-title + .item-description
  .item-actions                trailing controls
  .item-header / .item-footer  full-width lines
  .item-group / .item-separator
*/

@layer components {

.item {
  --item-pad: var(--surface-padding-sm);
  --item-gap: var(--space-4);

  box-sizing:      border-box;
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  gap:             var(--item-gap);
  min-width:       0;
  padding:         var(--item-pad);
  border:          var(--surface-border-width) solid transparent;
  border-radius:   var(--radius-surface);
  color:           var(--ink);
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  text-decoration: none;
  outline:         none;
}

.item.is-sm {
  --item-pad: var(--space-3);
  --item-gap: var(--space-3);
}

.item.is-xs {
  --item-pad: var(--space-1-5) var(--item-padding-x);
  --item-gap: var(--item-gap-xs, var(--space-2));
}

.item.is-outline {
  border-color: var(--surface-border);
  background:   var(--surface-bg);
}

.item.is-muted {
  background: var(--bg-soft);
}

a.item {
  cursor: pointer;
}

/* Hover only where a pointer can hover: a tap on a touch screen leaves no fill. */
@media (hover: hover) {
  a.item:hover {
    background: var(--item-highlight);
    color:      var(--item-highlight-ink);
  }
}

/* The ring is a box-shadow. Forced colors (Windows High Contrast) drops
   box-shadow, so a transparent outline stays underneath: invisible
   normally, painted in the system color there. An outline takes no layout
   space, so focus never moves anything (Button does the same). */
a.item:focus-visible {
  outline:        var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
  box-shadow:     var(--focus-ring);
}

/* Media */

.item-media {
  display:         flex;
  flex:            none;
  align-items:     center;
  justify-content: center;
  align-self:      flex-start;
  gap:             var(--space-2);
}

.item:has(> .item-content > .item-description:only-child, > .item-content > .item-title:only-child) > .item-media {
  align-self: center;
}

.item-media > svg {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.item-media[data-variant="icon"] {
  width:         var(--control-height-sm);
  height:        var(--control-height-sm);
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-control);
  background:    var(--bg-muted);
}

.item-media[data-variant="image"] {
  width:         var(--control-height);
  height:        var(--control-height);
  overflow:      hidden;
  border-radius: var(--radius-control);
}

.item.is-sm .item-media[data-variant="image"],
.item.is-xs .item-media[data-variant="image"] {
  width:  var(--control-height-sm);
  height: var(--control-height-sm);
}

.item-media[data-variant="image"] > img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Content */

.item-content {
  display:        flex;
  flex:           1 1 0;
  flex-direction: column;
  gap:            var(--space-1);
  min-width:      0;
}

.item-title {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin:      0;
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.item-description {
  display:            -webkit-box;
  margin:             0;
  overflow:           hidden;
  color:              var(--ink-soft);
  line-height:        var(--leading-body);
  overflow-wrap:      anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp:         2;
}

.item-description a {
  color:                 inherit;
  text-decoration:       underline;
  text-underline-offset: var(--link-underline-offset);
}

.item-actions {
  display:     flex;
  flex:        none;
  align-items: center;
  gap:         var(--space-2);
}

.item-header,
.item-footer {
  display:         flex;
  flex-basis:      100%;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-2);
}

/* Group */

.item-group {
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

.item-group.is-gap {
  gap: var(--space-2);
}

.item-wrap {
  display: contents;
}

.item-separator {
  flex:       none;
  height:     var(--surface-border-width);
  margin:     0;
  border:     0;
  background: var(--rule);
}

}