@property --button-custom-travel{syntax:"<number>";inherits:true;initial-value:0}@property --button-custom-goo-rest{syntax:"<number>";inherits:true;initial-value:0}@property --button-custom-goo-settle{syntax:"<number>";inherits:true;initial-value:0}.button-custom{--button-custom-height:var(--core-48);--button-custom-icon-size:var(--core-16);--button-custom-disc-icon-size:var(--core-20);--button-custom-media-size:var(--core-32);--button-custom-padding:var(--space-32);--button-custom-surface:var(--neutral-surface-oncolor);--button-custom-content:var(--neutral-content-oncolor);--button-custom-border:transparent;--button-custom-goo-rest:1;--button-custom-goo-settle:0;--button-custom-goo-snap:.12s;--button-custom-goo-settle-at:.26s;--button-custom-goo-grow-at:60ms;--button-custom-goo-pinch:.16s ease-in;--button-custom-ease:cubic-bezier(.16, 1, .3, 1);--button-custom-duration:.6s;--button-custom-roll-ease:var(--button-custom-ease);--button-custom-roll-duration:.5s;--button-custom-roll-stagger:18ms;--button-custom-fade-duration:.2s;--button-custom-fade:var(--button-custom-fade-duration) linear;isolation:isolate;width:fit-content;color:var(--button-custom-content);font-family:var(--font-sans);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;align-items:center;padding:0;text-decoration:none;display:inline-flex;position:relative}.button-custom .label{color:inherit}.button-custom:focus-visible{outline:none}.button-custom:focus-visible .button-custom-pill,.button-custom:focus-visible .button-custom-disc{outline:var(--stroke-focus) solid var(--color-border-primary);outline-offset:var(--space-2)}.button-custom-size-m{--button-custom-padding:var(--space-24)}.button-custom-size-s{--button-custom-padding:var(--space-16)}.button-custom-secondary{--button-custom-surface:var(--neutral-surface-background);--button-custom-content:var(--neutral-content-main-titles)}.button-custom-outline{--button-custom-surface:var(--neutral-surface-background);--button-custom-content:var(--neutral-content-main-titles);--button-custom-border:var(--neutral-border-components)}.button-custom-disc,.button-custom-pill{box-sizing:border-box;height:var(--button-custom-height);min-height:var(--button-custom-height);max-height:var(--button-custom-height);border:var(--stroke-components) solid var(--button-custom-border);border-radius:var(--radius-full);background-color:var(--button-custom-surface);transition:background-color var(--button-custom-fade);align-items:center;display:inline-flex}.button-custom-pill{z-index:2;gap:var(--space-12);padding-inline:var(--button-custom-padding);white-space:nowrap;position:relative}.button-custom-disc{z-index:1;width:var(--button-custom-height);justify-content:center;position:absolute;inset-block-start:0;inset-inline-start:0}.button-custom-disc svg{width:var(--button-custom-disc-icon-size);height:var(--button-custom-disc-icon-size);flex:none}.button-custom-disc-up-right svg{--button-custom-disc-arrow-scale:1.2;scale:var(--button-custom-disc-arrow-scale)}.button-custom-disc-up-right path{stroke-width:calc(var(--stroke-icons,2) / var(--button-custom-disc-arrow-scale))}.button-custom-arrow-start .button-custom-pill{margin-inline-start:var(--button-custom-height)}.button-custom-arrow-end .button-custom-pill{margin-inline-end:var(--button-custom-height)}@media (prefers-reduced-motion:no-preference){:is(.button-custom-pill,.button-custom-disc)>*{transition:color 0s linear calc(var(--button-custom-fade-duration) / 2)}}.button-custom-goo-defs{width:0;height:0;position:absolute;overflow:hidden}.button-custom-goo{--button-custom-goo-shrink:calc(var(--button-custom-goo-rest) + var(--button-custom-goo-settle));--button-custom-goo-inset:calc(var(--space-12) * var(--button-custom-goo-shrink));z-index:0;pointer-events:none;position:absolute;inset:0}.button-custom-goo-disc,.button-custom-goo-pill{border-radius:var(--radius-full);background-color:var(--button-custom-surface);transition:background-color var(--button-custom-fade);position:absolute}.button-custom-goo-disc{width:calc(var(--button-custom-height) - var(--button-custom-goo-inset) * 2);height:calc(var(--button-custom-height) - var(--button-custom-goo-inset) * 2);margin:var(--button-custom-goo-inset);inset-block-start:0;inset-inline-start:0}.button-custom-goo-pill{inset-block:var(--button-custom-goo-inset);inset-inline:calc(var(--button-custom-height) + var(--button-custom-goo-inset)) var(--button-custom-goo-inset)}.button-custom-arrow-end .button-custom-goo-pill{inset-inline:var(--button-custom-goo-inset) calc(var(--button-custom-height) + var(--button-custom-goo-inset))}.button-custom-arrow-end :is(.button-custom-disc,.button-custom-goo-disc){inset-inline-start:calc(100% - var(--button-custom-height))}.button-custom-has-media .button-custom-pill{padding-inline-start:calc((var(--button-custom-height) - var(--button-custom-media-size)) / 2);padding-inline-end:var(--space-20)}.button-custom-media{border-radius:var(--radius-full);flex:none;display:inline-flex;overflow:hidden}.button-custom-pill:has(>.button-custom-icon){gap:var(--space-8)}.button-custom-icon{opacity:.5;display:inline-flex}.button-custom-icon svg{width:var(--button-custom-icon-size);height:var(--button-custom-icon-size)}.button-custom .button-custom-media>*{width:var(--button-custom-media-size);height:var(--button-custom-media-size)}.button-custom-pill:has(>.button-custom-shortcut){gap:var(--space-8)}.button-custom-shortcut{margin-inline-start:var(--space-4)}.button-custom-trailing{--scroll-progress-inset-start:var(--space-8);align-items:center;margin-inline-start:calc(var(--space-12) * -1);display:inline-flex}.button-custom-pill:has(>.button-custom-icon,>.button-custom-shortcut)>.button-custom-trailing{margin-inline-start:calc(var(--space-8) * -1)}.button-custom-shortcut-roll{border-radius:var(--radius-4);display:inline-grid;overflow:hidden}.button-custom-shortcut-roll>.shortcut{grid-area:1/1}.button-custom-shortcut-roll :is(.shortcut-keys,.shortcut-key){flex:1}.button-custom-shortcut-roll>.shortcut+.shortcut{translate:0 100%}.button-custom-toggled .button-custom-shortcut-roll>.shortcut:first-child{translate:0 -100%}.button-custom-toggled .button-custom-shortcut-roll>.shortcut+.shortcut{translate:0}@media (prefers-reduced-motion:no-preference){.button-custom-shortcut-roll>.shortcut{transition:translate var(--button-custom-roll-duration) var(--button-custom-roll-ease) calc(4 * var(--button-custom-roll-stagger))}}@media (hover:none){.button-custom-shortcut{display:none}}.button-custom-label-text{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.button-custom-roll{display:inline-grid;overflow:hidden}.button-custom-roll-row{grid-area:1/1;justify-content:center;display:inline-flex}.button-custom-letter{display:inline-block}.button-custom-roll-row+.button-custom-roll-row .button-custom-letter{translate:0 100%}.button-custom-toggled .button-custom-roll-row:first-child .button-custom-letter{translate:0 -100%}.button-custom-toggled .button-custom-roll-row+.button-custom-roll-row .button-custom-letter{translate:0}@media (prefers-reduced-motion:no-preference){.button-custom-letter{transition:translate var(--button-custom-roll-duration) var(--button-custom-roll-ease) calc(var(--letter-index) * var(--button-custom-roll-stagger))}}@media (hover:hover){.button-custom:not(.button-custom-toggle):is(:hover,.button-custom-hover-scope:hover *) .button-custom-roll-row:first-child .button-custom-letter{translate:0 -100%}.button-custom:not(.button-custom-toggle):is(:hover,.button-custom-hover-scope:hover *) .button-custom-roll-row+.button-custom-roll-row .button-custom-letter{translate:0}.button-custom-secondary:is(:hover,.button-custom-hover-scope:hover *) :is(.button-custom-pill,.button-custom-disc,.button-custom-goo-pill,.button-custom-goo-disc),.button-custom-outline:is(:hover,.button-custom-hover-scope:hover *) :is(.button-custom-pill,.button-custom-disc,.button-custom-goo-pill,.button-custom-goo-disc){background-color:var(--button-custom-hover-surface,color-mix(in srgb, var(--button-custom-surface), var(--button-custom-content) 6%))}.button-custom:is(:hover,.button-custom-hover-scope:hover *) :is(.button-custom-pill,.button-custom-disc)>*{color:var(--button-custom-hover-content)}}@media (hover:hover) and (prefers-reduced-motion:no-preference){:is(.button-custom-arrow-start,.button-custom-arrow-end){transition:--button-custom-travel var(--button-custom-duration) var(--button-custom-ease), --button-custom-goo-rest var(--button-custom-goo-pinch) var(--button-custom-goo-settle-at), --button-custom-goo-settle var(--button-custom-goo-snap) linear var(--button-custom-goo-grow-at)}:is(.button-custom-arrow-start,.button-custom-arrow-end):is(:hover,.button-custom-hover-scope:hover *){--button-custom-travel:1;--button-custom-goo-rest:0;--button-custom-goo-settle:1;transition:--button-custom-travel var(--button-custom-duration) var(--button-custom-ease), --button-custom-goo-rest var(--button-custom-goo-snap) linear var(--button-custom-goo-grow-at), --button-custom-goo-settle var(--button-custom-goo-pinch) var(--button-custom-goo-settle-at)}.button-custom-arrow-start :is(.button-custom-pill,.button-custom-goo-pill){translate:calc(var(--button-custom-height) * var(--button-custom-travel) * -1) 0}.button-custom-arrow-start :is(.button-custom-disc,.button-custom-goo-disc){inset-inline-start:calc((100% - var(--button-custom-height)) * var(--button-custom-travel))}.button-custom-arrow-end :is(.button-custom-pill,.button-custom-goo-pill){translate:calc(var(--button-custom-height) * var(--button-custom-travel)) 0}.button-custom-arrow-end :is(.button-custom-disc,.button-custom-goo-disc){inset-inline-start:calc((100% - var(--button-custom-height)) * (1 - var(--button-custom-travel)))}}:is(.button-custom-reveal-start,.button-custom-reveal-end){--button-custom-reveal-origin:calc(var(--button-custom-height) / 2);pointer-events:none}:is(.button-custom-reveal-start,.button-custom-reveal-end) :is(.button-custom-disc,.button-custom-pill){pointer-events:auto}.button-custom-reveal-start .button-custom-pill{margin-inline-start:var(--button-custom-height)}.button-custom-reveal-end .button-custom-pill{margin-inline-end:var(--button-custom-height)}.button-custom-reveal-end .button-custom-goo-pill{inset-inline:var(--button-custom-goo-inset) calc(var(--button-custom-height) + var(--button-custom-goo-inset))}.button-custom-reveal-end :is(.button-custom-disc,.button-custom-goo-disc){inset-inline-start:calc(100% - var(--button-custom-height))}.button-custom-reveal-start .button-custom-pill{transform-origin:calc(var(--button-custom-reveal-origin) * -1) 50%}.button-custom-reveal-start .button-custom-goo-pill{transform-origin:calc((var(--button-custom-reveal-origin) + var(--button-custom-goo-inset)) * -1) 50%}.button-custom-reveal-end .button-custom-pill{transform-origin:calc(100% + var(--button-custom-reveal-origin)) 50%}.button-custom-reveal-end .button-custom-goo-pill{transform-origin:calc(100% + var(--button-custom-reveal-origin) + var(--button-custom-goo-inset)) 50%}:is(.button-custom-reveal-start,.button-custom-reveal-end) .button-custom-disc{z-index:3}@media (max-width:768px){:is(.button-custom-reveal-start,.button-custom-reveal-end){width:var(--button-custom-height);height:var(--button-custom-height)}:is(.button-custom-reveal-start,.button-custom-reveal-end) .button-custom-goo{display:none}:is(.button-custom-reveal-start,.button-custom-reveal-end) .button-custom-pill{clip-path:inset(50%);pointer-events:none;width:1px;height:1px;min-height:0;margin:0;padding:0;position:absolute;overflow:hidden}}@media (hover:hover){:is(.button-custom-reveal-start,.button-custom-reveal-end) :is(.button-custom-pill,.button-custom-goo-pill){scale:var(--button-custom-travel)}:is(.button-custom-reveal-start,.button-custom-reveal-end):is(:hover,:focus-visible,.button-custom-hover-scope:hover *){--button-custom-travel:1}}@media (hover:hover) and (prefers-reduced-motion:no-preference){:is(.button-custom-reveal-start,.button-custom-reveal-end){transition:--button-custom-travel var(--button-custom-duration) var(--button-custom-ease), --button-custom-goo-rest var(--button-custom-goo-pinch) var(--button-custom-goo-settle-at), --button-custom-goo-settle var(--button-custom-goo-snap) linear}:is(.button-custom-reveal-start,.button-custom-reveal-end):is(:hover,:focus-visible,.button-custom-hover-scope:hover *){--button-custom-goo-rest:0;--button-custom-goo-settle:1;transition:--button-custom-travel var(--button-custom-duration) var(--button-custom-ease), --button-custom-goo-rest var(--button-custom-goo-snap) linear, --button-custom-goo-settle var(--button-custom-goo-pinch) var(--button-custom-goo-settle-at)}}
