/* Layout of the Komponenty and Storyboard pages. Not part of erui. */

.sb-fulltext {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.search-panel--preview {
  display: block;
  width: auto;
  max-height: none;
}

.search-panel--preview .search-panel__list {
  display: block;
}

.search-panel--preview .search-panel__column {
  overflow: visible;
}

.sb-fulltext-narrow {
  max-width: 390px;
}

.sb-fulltext-narrow .search__scope,
.sb-fulltext-narrow .search__actions .kbd-combo {
  display: none;
}

.sb-intro {
  margin: 0 0 var(--spacing-section);
}

.sb-block {
  margin-top: 18px;
}

.sb-form__alert {
  margin-bottom: 18px;
}

.dropdown__content[data-preview] {
  position: static;
}

.dropdown__item[data-preview="focus"] {
  background: var(--color-stripe-a);
}

.sb-scene__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.sb-scene__note {
  margin: -6px 0 16px;
  max-width: 760px;
  color: var(--color-fg-muted);
}

.sb-origin {
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.sb-origin[data-origin="design"] {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.sb-origin[data-origin="live"] {
  border-color: var(--color-fg);
  color: var(--color-fg);
}

.sb-origin[data-origin="added"] {
  border: 1px dashed var(--color-fg-hint);
  color: var(--color-fg-muted);
}

/* Cells follow their content, so a wide button never spills into the next cell. */
.sb-states {
  display: flex;
  flex-wrap: wrap;
  gap: 18px var(--spacing-block);
  align-items: flex-start;
}

.sb-states > .sb-state {
  min-width: 170px;
}

.sb-states--wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.sb-states--wide > .sb-state {
  min-width: 0;
}

.sb-state {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.sb-state > .field,
.sb-state > .file-upload,
.sb-state > .range-root,
.sb-state > .fieldset,
.sb-state > .input-group,
.sb-state > .listbox__content {
  width: 100%;
}

.sb-state__name {
  color: var(--color-fg-muted);
}

.on-ink .sb-state__name {
  color: var(--color-on-ink-subtle);
}

.sb-ink {
  padding: 22px;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.sb-subscene {
  margin-top: 22px;
}

.sb-scene__head + .sb-subscene,
.sb-scene__note + .sb-subscene {
  margin-top: 0;
}

.sb-subscene__title {
  margin-bottom: 10px;
  color: var(--color-fg-muted);
}

/* States forced for the picture; real interaction uses :hover and :focus. */
.button[data-preview="hover"] {
  border-color: var(--button-line-hover);
  background: var(--button-bg-hover);
  color: var(--button-fg-hover);
}

.button[data-preview="focus"] {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.on-ink .button[data-preview="focus"] {
  outline-color: var(--color-on-ink);
}

.input[data-preview="hover"],
.textarea[data-preview="hover"],
.select__control[data-preview="hover"],
.input-group[data-preview="hover"],
.quantity[data-preview="hover"] {
  border-color: var(--color-fg-subtle);
}

.input[data-preview="focus"],
.textarea[data-preview="focus"],
.select__control[data-preview="focus"],
.input-group[data-preview="focus"],
.quantity[data-preview="focus"] {
  border-color: var(--color-fg);
  box-shadow: 0 0 0 1px var(--color-fg);
}

.input[data-preview="focus"][data-invalid] {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-brand);
}

.checkbox[data-preview="hover"],
.radio[data-preview="hover"],
.switch[data-preview="hover"] {
  border-color: var(--color-fg);
}

.checkbox[data-preview="focus"],
.radio[data-preview="focus"],
.switch[data-preview="focus"] {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.choice-card[data-preview="hover"],
.product-card[data-preview="hover"] {
  border-color: var(--color-fg);
}

.product-card[data-preview="hover"] {
  box-shadow: var(--shadow-lift);
  transform: translateY(var(--lift-y));
}

.listbox__content[data-preview] {
  position: static;
  margin-top: 4px;
}

.range__thumb[data-preview="focus"]::-webkit-slider-thumb {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.range__thumb[data-preview="focus"]::-moz-range-thumb {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.sb-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 4px var(--spacing-block);
}

.sb-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 0;
}

.sb-icon__name {
  margin-left: auto;
  color: var(--color-fg-muted);
}

.sb-range {
  display: grid;
  gap: 8px;
  width: 100%;
}

.skip-link[data-preview="focus"] {
  position: static;
  display: inline-block;
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  transform: none;
}

.sb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--spacing-block);
}

.sb-narrow {
  max-width: 420px;
}

.sb-skeleton-lines {
  display: grid;
  gap: 10px;
  align-content: start;
}

.sb-meter {
  display: grid;
  gap: 8px;
  width: 100%;
}

.sb-meter__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sb-pagination-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.sb-stack {
  display: grid;
  gap: 8px;
}

.product-grid > .sb-state {
  grid-template-rows: auto 1fr;
  justify-items: stretch;
  min-width: 0;
}

/* Scenes put together */
.sb-site-header {
  overflow: clip;
  border-radius: var(--radius-md);
}

.sb-site-header--narrow {
  max-width: 390px;
}

.sb-main-nav {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.sb-main-nav--narrow {
  max-width: 390px;
}

.sb-main-nav--list {
  padding: 4px 18px 14px;
}

.sb-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-block);
  align-items: start;
}

.carousel-demo__frame {
  max-width: 640px;
}

.carousel-demo {
  display: flex;
  min-height: 200px;
  padding: 28px 44px;
  border-radius: 0;
}

.sb-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px var(--spacing-block);
}

.sb-form__full {
  grid-column: span 6;
}

.sb-form__half {
  grid-column: span 3;
}

.sb-form__third {
  grid-column: span 2;
}

.sb-form__divider {
  padding-top: 18px;
  border-top: 1px solid var(--color-line-soft);
}

.sb-form__inline {
  display: flex;
  gap: 8px;
}

.sb-form__inline .input {
  flex: 1;
  min-width: 0;
}

@media (max-width: 900px) {
  .sb-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .tabs--underline[data-orientation="vertical"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .sb-form__half,
  .sb-form__third {
    grid-column: span 6;
  }

  .sb-ink {
    padding: 16px;
  }

  .sb-states {
    gap: 16px 12px;
  }

  .sb-states > .sb-state {
    min-width: 130px;
  }

  .sb-states--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .sb-states--wide > .sb-state {
    min-width: 0;
  }
}