/* BUTTON-ICON-01 — canonical pictogram face.
   One component is used by ICON, BAR, HALF and INSIDE.
   Window state changes only outer-window geometry and the position/size of this component. */
:root{
  --uib-center-0:#f3f4f5;
  --uib-center-1:#eceeef;
  --uib-center-2:#dde1e4;
  --uib-center-3:#cfd4d8;
  --uib-ring-alpha:.66;
  --uib-ring-width:2px;
  --uib-depth-alpha:.17;
  --uib-shadow-alpha:.20;
  --uib-shadow-y:6px;
  --uib-shadow-blur:12px;
  --uib-gloss-opacity:.78;
  --uib-gloss-width:54%;
  --uib-gloss-height:16%;
  --uib-gloss-top:9%;
  --uib-rim-inset:6%;
  --uib-gloss-blur:.8px;
  --uib-glyph-scale:1;
}

/* The container itself is geometry only. The visible face is ::before. */
.demo-window:not(.is-screen)>.window-number,
.screen-card-avatar,
.screen-inside-circle{
  isolation:isolate;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
}

.demo-window:not(.is-screen)>.window-number{
  border-radius:var(--lab-primary-pictogram-radius,34px)!important;
}
.demo-window.is-inside>.window-number{
  border-radius:var(--lab-inside-radius,26px)!important;
}
.screen-card-avatar,
.screen-inside-circle{
  border-radius:50%!important;
}

/* Full-card pictogram hosts are normal flow elements. They must establish
   their own containing block so the shared absolute ::before/::after layers
   stay inside the avatar instead of expanding across the SCREEN card. */
.screen-card-avatar,
.screen-inside-circle{
  position:relative!important;
}

/* One volumetric face for every pictogram state and for the photo editor preview. */
.demo-window:not(.is-screen)>.window-number::before,
.screen-card-avatar::before,
.screen-inside-circle::before,
.photo-editor-mask::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:max(1px,calc(var(--uib-ring-width) * .70)) solid rgba(62,67,72,var(--uib-ring-alpha));
  background:radial-gradient(circle at 43% 32%,
    var(--uib-center-0) 0 38%,
    var(--uib-center-1) 60%,
    var(--uib-center-2) 82%,
    var(--uib-center-3) 100%);
  box-shadow:
    0 max(2px,calc(var(--uib-shadow-y) * .42)) max(6px,calc(var(--uib-shadow-blur) * .55)) rgba(50,56,62,calc(var(--uib-shadow-alpha) * .72)),
    inset 0 1px 2px rgba(255,255,255,.72),
    inset 0 -4px 7px rgba(72,79,86,calc(var(--uib-depth-alpha) * .52));
  pointer-events:none;
  z-index:0;
}

/* One highlight dome for every pictogram state and the photo editor preview. */
.demo-window:not(.is-screen)>.window-number::after,
.screen-card-avatar::after,
.screen-inside-circle::after,
.photo-editor-mask::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(var(--uib-rim-inset) + var(--uib-gloss-top));
  width:var(--uib-gloss-width);
  height:var(--uib-gloss-height);
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(180deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.90) 18%,
    rgba(255,255,255,.66) 42%,
    rgba(255,255,255,.30) 66%,
    rgba(255,255,255,.08) 84%,
    rgba(255,255,255,0) 100%);
  box-shadow:none;
  filter:blur(var(--uib-gloss-blur));
  opacity:var(--uib-gloss-opacity);
  pointer-events:none;
  z-index:1;
}

.demo-window:not(.is-screen)>.window-number>.window-glyph,
.screen-card-avatar>.window-glyph,
.screen-inside-circle>.window-glyph{
  position:relative!important;
  z-index:2!important;
  transform:scale(var(--uib-glyph-scale));
  transform-origin:center;
}