.sandbox-view-controls .view-controls,
.sandbox-view-controls .view-controls * {
  cursor: default;
}

.sandbox-view-controls .sandbox-view-controls__toolbar {
  margin: var(--space--x-small) 0 var(--space--small);
}

.sandbox-view-controls .sandbox-view-controls__toggle .text {
  font-size: var(--font-size--small);
}

.sandbox-view-controls .sandbox-view-controls__variant-label {
  margin: var(--space--large) 0 var(--space--x-small);
  font-size: var(--font-size--small);
  line-height: 1.2;
  color: var(--color--border-mid-contrast);
}

.sandbox-view-controls .sandbox-view-controls__variant-label:first-of-type {
  margin-top: var(--space--x-small);
}

.sandbox-view-controls.sandbox-view-controls--compact .sandbox-view-controls__variant-label {
  display: none;
}

.sandbox-view-controls.sandbox-view-controls--compact .view-controls {
  margin-bottom: var(--space--small);
}

.sandbox-view-controls.sandbox-view-controls--compact .view-controls:last-of-type {
  margin-bottom: 0;
}

.sandbox-view-controls .view-controls:not(.sandbox-view-controls--grouped) .control-group + .control-group::before {
  position: absolute;
  top: 50%;
  left: calc(var(--space--base) / -2);
  width: 1px;
  height: 1.25rem;
  background: var(--color--border-low-contrast);
  transform: translate(-50%, -50%);
  content: "";
}

.sandbox-view-controls .sandbox-view-controls--grouped {
  --view-controls-group-pad-y: calc(var(--space--xx-small) + 2px);
}

.sandbox-view-controls .sandbox-view-controls--grouped .view-controls__scroll {
  gap: var(--space--small);
}

.sandbox-view-controls .sandbox-view-controls--grouped .control-group {
  padding: var(--view-controls-group-pad-y) var(--space--small);
  border-radius: var(--border-radius--base);
  box-shadow: inset 0 0 0 1px var(--color--border-low-contrast);
}

.sandbox-view-controls .sandbox-view-controls--grouped-hover .control-group,
.sandbox-view-controls .sandbox-view-controls--grouped-rail:not(.sandbox-view-controls--grouped-segmented) .control-group {
  padding-inline-start: var(--space--x-small);
}

.sandbox-view-controls .sandbox-view-controls--grouped-rail .selected,
.sandbox-view-controls .sandbox-view-controls--grouped-rail .not-selected {
  display: flex;
  align-items: center;
  gap: var(--space--xx-small);
  margin-block: calc(-1 * var(--view-controls-group-pad-y));
  padding-block: var(--view-controls-group-pad-y);
  border-bottom: 1px solid transparent;
}

.sandbox-view-controls .sandbox-view-controls--grouped-rail .selected {
  border-bottom-color: currentColor;
}

.sandbox-view-controls .view-controls.sandbox-view-controls--grouped-rail .not-selected:hover,
.sandbox-view-controls .view-controls.sandbox-view-controls--grouped-hover .not-selected:hover {
  color: var(--color--aaa-high-contrast-text);
  text-decoration: none;
}

.sandbox-view-controls .sandbox-view-controls--grouped-segmented .control-group {
  gap: var(--space--small);
  overflow: hidden;
  padding-inline-start: 0;
}

.sandbox-view-controls .sandbox-view-controls--grouped-segmented .control-group > .phosphor-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  min-inline-size: calc(1.25rem + (var(--view-controls-group-pad-y) * 2));
  padding: 0;
  margin-right: var(--space--xx-small);
  border-right: 1px solid var(--color--border-low-contrast);
}

.sandbox-view-controls .sandbox-view-controls--grouped-full-divider .control-group {
  padding-block: 0;
}

.sandbox-view-controls .sandbox-view-controls--grouped-full-divider .control-group > .sandbox-view-controls__segment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  min-inline-size: calc(1.25rem + (var(--view-controls-group-pad-y) * 2));
  margin-right: var(--space--xx-small);
  border-right: 1px solid var(--color--border-low-contrast);
}

.sandbox-view-controls .sandbox-view-controls--grouped-full-divider .control-group > .sandbox-view-controls__segment-icon .phosphor-icon {
  display: block;
  color: var(--color--not-a11y-icon);
}

.sandbox-view-controls .sandbox-view-controls--grouped-full-divider .selected,
.sandbox-view-controls .sandbox-view-controls--grouped-full-divider .not-selected {
  margin-block: 0;
  padding-block: var(--view-controls-group-pad-y);
}