/*
Empty

The empty state for a list, a search or a page: media, a title, a
description and what to do next, centered in the space the content would
have filled.

  .empty                       centered column, roomy padding
  .empty.is-outline | is-muted a dashed rule, or a muted fill
  .empty-header                media, title, description
  .empty-media[data-variant="icon"]   an icon on a muted tile
  .empty-title / .empty-description / .empty-content
*/

@layer components {

.empty {
  --empty-measure: var(--measure-narrow);

  box-sizing:      border-box;
  display:         flex;
  flex:            1;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-6);
  min-width:       0;
  padding:         var(--space-12) var(--surface-padding);
  border:          var(--surface-border-width) dashed transparent;
  border-radius:   var(--radius-surface);
  color:           var(--ink);
  font-family:     var(--font-ui);
  text-align:      center;
  text-wrap:       balance;
}

.empty.is-outline {
  border-color: var(--rule);
}

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

.empty-header {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  max-width:      var(--empty-measure);
}

.empty-media {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            none;
  margin-bottom:   var(--space-2);
}

/* The icon slot of the title shortcut renders nothing when it is empty. */
.empty-media:not(:has(*)) {
  display: none;
}

.empty-media[data-variant="icon"] {
  width:         var(--control-height);
  height:        var(--control-height);
  border-radius: var(--radius-control);
  background:    var(--bg-muted);
  color:         var(--ink);
}

.empty-media[data-variant="icon"] > svg {
  width:  var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.empty-title {
  margin:         0;
  font-family:    var(--font-heading);
  font-size:      var(--text-title);
  font-weight:    var(--weight-strong);
  letter-spacing: var(--tracking-heading);
  line-height:    var(--leading-heading);
  overflow-wrap:  anywhere;
}

.empty-description {
  margin:        0;
  color:         var(--ink-soft);
  font-size:     var(--text-ui);
  line-height:   var(--leading-body);
  overflow-wrap: anywhere;
}

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

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

.empty-content {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-4);
  width:          100%;
  max-width:      var(--empty-measure);
  font-size:      var(--text-ui);
}

.empty-actions {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--space-2);
}

}