.tlf-playground-frame .tlpg-expanding-icon-stage{--icon-menu-canvas: #fafafa;--icon-menu-control: #121212;--icon-menu-hover: #181818;--icon-menu-pressed: #212121;--icon-menu-text: #ffffff;--icon-menu-muted: #b3b3b3;--icon-menu-line: rgb(30 30 30 / .5);display:grid;place-items:center;position:relative;width:100%;height:100%;min-height:inherit;container-type:inline-size;background:var(--icon-menu-canvas);color:var(--icon-menu-text);font-family:var(--tlf-font);font-synthesis:none;-webkit-font-smoothing:antialiased}.tlf-playground-frame .tlpg-expanding-icon-menu{--icon-menu-closed: 48px;--icon-menu-gap: 6px;--icon-menu-open-0: calc(var(--icon-menu-closed) + var(--icon-menu-reveal-0));--icon-menu-open-1: calc(var(--icon-menu-closed) + var(--icon-menu-reveal-1));--icon-menu-open-2: calc(var(--icon-menu-closed) + var(--icon-menu-reveal-2));--icon-menu-open-3: calc(var(--icon-menu-closed) + var(--icon-menu-reveal-3));display:grid;grid-template-columns:var(--icon-menu-open-0) var(--icon-menu-closed) var(--icon-menu-closed) var(--icon-menu-closed);align-items:center;gap:var(--icon-menu-gap);width:max-content;transition:grid-template-columns var(--icon-menu-duration) cubic-bezier(.22,.8,.25,1)}.tlf-playground-frame .tlpg-expanding-icon-menu[data-active="1"]{grid-template-columns:var(--icon-menu-closed) var(--icon-menu-open-1) var(--icon-menu-closed) var(--icon-menu-closed)}.tlf-playground-frame .tlpg-expanding-icon-menu[data-active="2"]{grid-template-columns:var(--icon-menu-closed) var(--icon-menu-closed) var(--icon-menu-open-2) var(--icon-menu-closed)}.tlf-playground-frame .tlpg-expanding-icon-menu[data-active="3"]{grid-template-columns:var(--icon-menu-closed) var(--icon-menu-closed) var(--icon-menu-closed) var(--icon-menu-open-3)}.tlf-playground-frame .tlpg-expanding-icon-menu .tlpg-expanding-icon-menu__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;position:relative;display:flex;align-items:center;flex:0 0 auto;width:100%;min-width:0;height:44px;padding:0 calc((var(--icon-menu-closed) - 22px) / 2);overflow:hidden;border:1px solid var(--icon-menu-line);border-radius:4px;background:var(--icon-menu-control);color:var(--icon-menu-muted);font:400 15px/20px var(--tlf-font);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color .16s ease,background-color .16s ease,border-color .16s ease}.tlf-playground-frame .tlpg-expanding-icon-menu .tlpg-expanding-icon-menu__button[data-expanded=true]{padding-right:calc((var(--icon-menu-closed) - 22px) / 2 + var(--icon-menu-optical-right));color:var(--icon-menu-text);background:var(--icon-menu-hover)}.tlf-playground-frame .tlpg-expanding-icon-menu__icon{display:block;flex:0 0 20px}.tlf-playground-frame .tlpg-expanding-icon-menu__label{flex:0 0 auto;display:block;margin-left:8px;white-space:nowrap;opacity:0;transform:translate(-6px);filter:blur(3px);transition:opacity var(--icon-menu-label-duration) ease,transform var(--icon-menu-label-duration) ease,filter var(--icon-menu-label-duration) ease}.tlf-playground-frame .tlpg-expanding-icon-menu__button[data-expanded=true] .tlpg-expanding-icon-menu__label{opacity:1;transform:translate(0);filter:blur(0);transition-delay:var(--icon-menu-label-delay)}.tlf-playground-frame .tlpg-expanding-icon-menu .tlpg-expanding-icon-menu__button:active,.tlf-playground-frame .tlpg-expanding-icon-menu .tlpg-expanding-icon-menu__button[data-clicked=true]{background:var(--icon-menu-pressed);transition-duration:60ms}.tlf-playground-frame .tlpg-expanding-icon-menu .tlpg-expanding-icon-menu__button:focus-visible{outline:2px solid #525252;outline-offset:1px}@container (max-width: 340px){.tlf-playground-frame .tlpg-expanding-icon-menu{--icon-menu-closed: 40px;--icon-menu-gap: 4px}.tlf-playground-frame .tlpg-expanding-icon-menu .tlpg-expanding-icon-menu__button{font-size:14px}}.tlf-playground-frame .tlpg-expanding-icon-stage[data-reduced-motion=true] .tlpg-expanding-icon-menu,.tlf-playground-frame .tlpg-expanding-icon-stage[data-reduced-motion=true] .tlpg-expanding-icon-menu__button,.tlf-playground-frame .tlpg-expanding-icon-stage[data-reduced-motion=true] .tlpg-expanding-icon-menu__label{transition:none}@media(prefers-reduced-motion:reduce){.tlf-playground-frame .tlpg-expanding-icon-menu,.tlf-playground-frame .tlpg-expanding-icon-menu .tlpg-expanding-icon-menu__button,.tlf-playground-frame .tlpg-expanding-icon-menu__label{transition:none}}