@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.tabs-demo {
  width:     100%;
  max-width: 32rem;
}

.tabs-demo-panel {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  padding:        var(--surface-padding-sm);
  background:     var(--surface-bg);
  border:         var(--surface-border-width) solid var(--surface-border);
  border-radius:  var(--radius-surface);
  box-shadow:     var(--surface-shadow);
  font-size:      var(--text-ui);
  color:          var(--ink-soft);
}

.tabs-demo-panel h4 {
  margin:      0;
  font-size:   var(--text-title);
  font-weight: var(--weight-strong);
  color:       var(--ink);
}

.tabs-demo-panel p {
  margin: 0;
}

/* Stands where a panel will be while no tab is active (padding of .tab-panel). */
.tabs-demo-empty {
  padding-block: var(--space-2);
}

.tabs-demo-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  font-size:      var(--text-label);
  color:          var(--ink);
}

.tabs-demo-controls {
  width:       100%;
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-2);
}

.tabs-demo-heading {
  margin:      0;
  font-size:   var(--text-title);
  font-weight: var(--weight-strong);
  color:       var(--ink);
}

.tabs-demo-labelled {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  width:          100%;
  max-width:      32rem;
}

/* Indicator demo: the static line is off and the indicator slides. */
.tabs-sliding {
  --tab-active-line: transparent;
}

.tabs-sliding .tab-indicator {
  top:           auto;
  bottom:        0;
  height:        var(--tab-line-width);
  background:    var(--accent);
  border-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: no-preference) {
  .tabs-sliding .tab-indicator {
    transition: left var(--duration-enter) var(--ease-enter),
                width var(--duration-enter) var(--ease-enter);
  }
}

/* Animated panels: every panel shares one grid cell, so the outgoing panel
   (data-ending-style) and the incoming one overlap instead of stacking. */
.tabs-animated {
  display:               grid;
  grid-template-columns: minmax(0, 1fr);
  overflow:              hidden;
}

.tabs-animated > .tab-list {
  grid-row: 1;
}

.tabs-animated > .tab-panel {
  grid-row:    2;
  grid-column: 1;
}

/* The panel is flush with the clipped edge, so its ring is drawn inside. */
.tabs-animated > .tab-panel:focus-visible {
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus);
}

@media (prefers-reduced-motion: no-preference) {
  .tabs-animated > .tab-panel {
    transition: transform var(--duration-enter) var(--ease-enter),
                opacity var(--duration-enter) var(--ease-enter);
  }

  .tabs-animated > .tab-panel[data-ending-style] {
    transition-duration: var(--duration-exit);
  }

  .tabs-animated > .tab-panel[data-starting-style],
  .tabs-animated > .tab-panel[data-ending-style] {
    opacity: 0;
  }

  .tabs-animated > .tab-panel[data-starting-style][data-activation-direction="right"],
  .tabs-animated > .tab-panel[data-ending-style][data-activation-direction="left"] {
    transform: translateX(var(--space-8));
  }

  .tabs-animated > .tab-panel[data-starting-style][data-activation-direction="left"],
  .tabs-animated > .tab-panel[data-ending-style][data-activation-direction="right"] {
    transform: translateX(calc(-1 * var(--space-8)));
  }
}

.tabs-demo-form {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-3);
  width:          100%;
}