.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px; /* check:ignore */
  overflow: clip;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.stage__preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--space-48) var(--space-32);
}

.stage__selected {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 100%;
}

.stage__box {
  --selection-inset-x: 0px;
  --selection-inset-y: 0px;
  position: relative;
  padding: var(--space-24);
}

.stage .input-field {
  margin-inline: auto;
}

.stage__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  border-inline-start: 1px solid var(--color-border);
  background: var(--color-bg);
}

.stage__panel-title {
  margin: 0;
  font-size: var(--font-size-ui);
  font-weight: 500;
  line-height: var(--line-height-ui);
}

.property {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin: 0;
}

.property--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-8);
}

.property__name {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.property--stacked .toggle {
  justify-content: space-between;
}


.stage:has(input[name="s2-state"][value="typed"]:checked) .input-field__control,
.stage:has(input[name="s2-state"][value="active"]:checked) .input-field__control {
  color: var(--neutral-400);
}

.stage:has(input[name="s2-state"][value="active"]:checked) .input-field__control {
  border-color: var(--primary-600);
}

.stage:has(input[name="s2-state"][value="active"]:checked) .input-field__icon-right--down {
  display: none;
}

.stage:has(input[name="s2-state"][value="active"]:checked) .input-field__icon-right--up {
  display: block;
  color: var(--primary-600);
}

.stage:has(input[name="s2-state"][value="disabled"]:checked) .input-field__control {
  background: var(--primary-50);
}

.stage:has(input[name="s2-state"][value="disabled"]:checked) .input-field__tag svg {
  display: none;
}

.stage:has(input[name="s2-label"][value="off"]:checked) .input-field__label,
.stage:has(input[name="s2-hint"][value="off"]:checked) .input-field__hint {
  display: none;
}

@media (width >= 768px) {
  .stage:has(input[name="s2-type"][value="error"]:checked) .input-field__control {
    border-color: var(--additional-red-200);
  }

  .stage:has(input[name="s2-type"][value="error"]:checked) .input-field__icon-right--up,
  .stage:has(input[name="s2-type"][value="error"]:checked) .input-field__hint {
    color: var(--additional-red-200);
  }

  .stage:has(input[name="s2-state"][value="view"]:checked) .input-field__control {
    min-height: 0;
    padding: 0;
    border-color: transparent;
    background: none;
    color: var(--neutral-400);
  }

  .stage:has(input[name="s2-state"][value="view"]:checked) .input-field__control svg,
  .stage:has(input[name="s2-state"][value="view"]:checked) .input-field__tag,
  .stage:has(input[name="s2-state"][value="view"]:checked) .input-field__label i,
  .stage:has(input[name="s2-state"][value="view"]:checked) .input-field__hint {
    display: none;
  }

  .stage:has(input[name="s2-state"][value="view"]:checked) .input-field__content {
    padding-inline-start: 0;
  }

  .stage:has(input[name="s2-state"][value="view"]:checked) .input-field__placeholder {
    text-transform: lowercase;
  }

  .stage:has(input[name="s2-left"][value="off"]:checked) .input-field__icon-left,
  .stage:has(input[name="s2-right"][value="off"]:checked) .input-field__icon-right {
    display: none;
  }

  .stage:has(input[name="s2-tag"][value="on"]:checked) .input-field__tag {
    display: flex;
  }

  .stage:has(input[name="s2-tag"][value="on"]:checked):not(:has(input[name="s2-state"][value="view"]:checked)) .input-field__placeholder {
    display: none;
  }
}

@media (768px <= width < 1024px) {
  .stage__preview {
    place-items: center stretch;
    padding-inline: var(--space-24);
  }

  .stage .selection-name,
  .stage .selection {
    display: none;
  }

  .stage__box {
    padding: 0;
  }
}

@media (width < 768px) {
  .brand-switcher:has(> .stage) {
    flex: 1 1 auto;
  }

  .stage {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }

  .stage__preview {
    place-items: center stretch;
    padding: var(--space-16) var(--space-24);
  }

  .stage__panel {
    padding: var(--space-16);
    border-block-start: 1px solid var(--color-border);
    border-inline-start: 0;
  }

  .stage__panel-title,
  .property--desktop-only,
  .stage .toggle__option--desktop-only,
  .stage .selection-name,
  .stage .selection {
    display: none;
  }

  .stage__box {
    padding: 0;
  }

  .brand-switcher:has(.toggle--brand input:checked) .stage .input-field {
    --primary-50: initial;
    --primary-100: initial;
    --primary-200: initial;
    --primary-400: initial;
    --primary-600: initial;
    --primary-900: initial;
  }
}