/* Exclusive shared-component styles. Global and layout rules stay shared. */

.ce-view-controls {
display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ce-design:has(.ce-viewport-select option[value="both"]:checked)
  [data-preview-viewport="mobile"] {
flex: 0 1 320px;
}

.ce-design:has(.ce-viewport-select option[value="both"]:checked)
  [data-preview-viewport="desktop"] {
flex: 1 1 720px;
}

.ce-view-controls {
align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.ce-icon-control {
align-items: center;
  background: white;
  border: 1px solid var(--chrome-border-strong);
  border-radius: 6px;
  color: var(--chrome-ink-2);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  position: relative;
  width: 38px;
}

.ce-viewport-control {
gap: 5px;
  width: 54px;
}

.ce-icon-control svg {
display: block;
  flex-shrink: 0;
}

.ce-icon-control input,
.ce-icon-control select {
cursor: inherit;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.ce-icon-control:hover,
.ce-icon-control:has(input:checked) {
background: #edf3ef;
  border-color: #b9cfc2;
  color: var(--mbk-sage-deep);
}

.ce-icon-control:has(input:disabled) {
background: var(--chrome-bg);
  color: var(--chrome-muted);
  cursor: default;
  opacity: 0.6;
}

.ce-icon-control:focus-within {
outline: 2px solid var(--mbk-sage-deep);
  outline-offset: 3px;
}

.ce-control-description {
clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.ce-icon-control input:disabled {
pointer-events: none;
}

.ce-design:has(.ce-theme-toggle:checked) {
--ce-surface: #1e2521;
  --ce-text: #edf3ef;
  --ce-secondary: #b0beb5;
  --ce-soft: #2d3831;
  --ce-edge: #48584d;
  --ce-mask: #1e2521;
}

.ce-design .mbk-shell--mobile .ce-view-controls {
width: auto;
}

.ce-design .mbk-shell--mobile .ce-icon-control {
height: 40px;
  min-width: 40px;
}

.ce-viewport-control [data-view-icon]:not([data-view-icon="chevron"]),
.ce-theme-control [data-view-icon="dark"],
.ce-theme-control:has(:checked) [data-view-icon="light"],
.ce-theme-control[data-scheme="dark"] [data-view-icon="light"] {
  display: none;
}
.ce-viewport-control:has(option[value="mobile"]:checked) [data-view-icon="mobile"],
.ce-viewport-control:has(option[value="desktop"]:checked) [data-view-icon="desktop"],
.ce-viewport-control:has(option[value="both"]:checked) [data-view-icon="both"],
.ce-theme-control:has(:checked) [data-view-icon="dark"],
.ce-theme-control[data-scheme="dark"] [data-view-icon="dark"] {
  display: block;
}