.surface {
  --shell-padding: 4px;
  --shell-border-width: 1px;
  --toolbar-material: var(--material-raised);
  --chrome-hover: var(--raised-control-hover);

  position: relative;
  isolation: isolate;
  height: 54px;
  padding: var(--shell-padding);
  border: var(--shell-border-width) solid var(--chrome-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  color: var(--chrome-text);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

/* A sibling material lets popup descendants blur beyond the toolbar bounds. */
.surface::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--toolbar-material);
  box-shadow: var(--glass-edge);
  backdrop-filter: var(--glass-blur);
  pointer-events: none;
  content: '';
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.surface:is(:hover, :focus-within) {
  --toolbar-material: var(--material-raised-hover);

  border-color: var(--accent-border);
  box-shadow: var(--shadow-glow);
}

.surface:is(:hover, :focus-within)::before {
  box-shadow: var(--glass-edge-active);
}

.control {
  appearance: none;
  min-width: 44px;
  height: 44px;
  border: 0;
  border-radius: calc(
    var(--radius-panel) - var(--shell-padding) - var(--shell-border-width)
  );
  background: transparent;
  color: var(--chrome-text);
  touch-action: manipulation;
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.control:hover:where(:not(:disabled)) {
  background: var(--chrome-hover);
  box-shadow: var(--control-glow), var(--glass-edge-active);
}

.control:is(
  [aria-pressed='true'],
  [aria-expanded='true'],
  [data-active='true']
),
.control:active:not(:disabled) {
  background: var(--accent-soft);
  box-shadow: var(--control-glow), var(--glass-edge-active);
  color: var(--accent);
}

.control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: var(--control-glow), var(--glass-edge-active);
}

.control:disabled {
  opacity: 0.35;
}

:global([data-canvas-control-id]) .control {
  touch-action: none;
}

@media (width <= 760px) {
  .mobileSurface {
    --shell-padding: 4px;
    --shell-border-width: 1px;
    --toolbar-material: var(--material-raised);
    --chrome-hover: var(--raised-control-hover);

    height: 54px;
    isolation: isolate;
    padding: var(--shell-padding);
    border: var(--shell-border-width) solid var(--chrome-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    color: var(--chrome-text);
  }

  .mobileSurface::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--toolbar-material);
    box-shadow: var(--glass-edge);
    backdrop-filter: var(--glass-blur);
    pointer-events: none;
    content: '';
    transition:
      background-color 180ms ease,
      box-shadow 180ms ease;
  }

  .mobileSurface:is(:hover, :focus-within) {
    --toolbar-material: var(--material-raised-hover);

    border-color: var(--accent-border);
    box-shadow: var(--shadow-glow);
  }

  .mobileSurface:is(:hover, :focus-within)::before {
    box-shadow: var(--glass-edge-active);
  }
}

@media (prefers-reduced-motion: reduce) {
  .surface,
  .surface::before,
  .mobileSurface::before,
  .control {
    transition: none;
  }
}

:global([data-frame-group]) :global([data-group-member]) .surface.surface {
  width: max-content;
  height: auto;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  box-shadow: none;
}

:global([data-frame-group])
  :global([data-group-member])
  .surface.surface::before {
  content: none;
}

@media (width <= 760px) {
  :global(:is([data-layout-widget], [data-layout-group])[data-merged])
    .surface.surface {
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  :global(:is([data-layout-widget], [data-layout-group])[data-merged])
    .surface.surface::before {
    content: none;
  }
}