:is(button,a,summary).button.primary.flow-button {
  --flow-active:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:100%;
  padding-inline:28px;
  border-radius:100px;
  background:var(--lime);
  border-color:var(--lime);
  color:var(--petrol);
  transition:border-radius 600ms cubic-bezier(.23,1,.32,1),border-color 600ms ease,color 450ms ease,transform 140ms ease,opacity 140ms ease;
}
.button.primary.flow-button::before {
  content:'';
  position:absolute;
  inset:-1px;
  z-index:0;
  border-radius:inherit;
  background:var(--petrol);
  opacity:var(--flow-active);
  clip-path:circle(calc(var(--flow-active)*150%) at 50% 50%);
  pointer-events:none;
  transition:clip-path 700ms cubic-bezier(.19,1,.22,1),opacity 300ms ease;
}
.button.primary.flow-button > .flow-button-label {
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  white-space:normal;
  transform:translateX(calc(-8px + var(--flow-active)*16px));
  pointer-events:none;
  transition:transform 650ms cubic-bezier(.23,1,.32,1);
}
.button.primary.flow-button > .flow-button-arrow {
  position:absolute;
  top:50%;
  z-index:2;
  display:block;
  width:16px;
  height:16px;
  pointer-events:none;
  transition:transform 700ms cubic-bezier(.34,1.56,.64,1),opacity 400ms ease;
}
.button.primary.flow-button > .flow-button-arrow > svg { display:block; width:16px; height:16px; color:inherit; }
.button.primary.flow-button > .flow-button-arrow-in {
  left:12px;
  opacity:var(--flow-active);
  transform:translate(calc(-48px + var(--flow-active)*48px),-50%);
}
.button.primary.flow-button > .flow-button-arrow-out {
  right:12px;
  opacity:calc(1 - var(--flow-active));
  transform:translate(calc(var(--flow-active)*48px),-50%);
}
:is(button,a,summary).button.primary.flow-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):is(:focus-visible,:active) {
  --flow-active:1;
  border-radius:12px;
  border-color:var(--petrol);
  color:var(--lime);
}
:is(button,a,summary).button.primary.flow-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active { transform:scale(.95); }
@media (hover:hover) and (pointer:fine) {
  :is(button,a,summary).button.primary.flow-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    --flow-active:1;
    border-radius:12px;
    border-color:var(--petrol);
    background:var(--lime);
    color:var(--lime);
  }
}
body:is([data-motion-mode="reduced"],[data-reduced-motion="true"]) .button.primary.flow-button,
body:is([data-motion-mode="reduced"],[data-reduced-motion="true"]) .button.primary.flow-button::before,
body:is([data-motion-mode="reduced"],[data-reduced-motion="true"]) .button.primary.flow-button > :is(.flow-button-label,.flow-button-arrow) { transition:none; }
body:is([data-motion-mode="reduced"],[data-reduced-motion="true"]) .button.primary.flow-button:active { transform:none; }
@media (prefers-reduced-motion:reduce) {
  body[data-motion-mode="system"] .button.primary.flow-button,
  body[data-motion-mode="system"] .button.primary.flow-button::before,
  body[data-motion-mode="system"] .button.primary.flow-button > :is(.flow-button-label,.flow-button-arrow) { transition:none; }
  body[data-motion-mode="system"] .button.primary.flow-button:active { transform:none; }
}
@media print {
  .button.primary.flow-button::before,.button.primary.flow-button > .flow-button-arrow { display:none; }
  .button.primary.flow-button > .flow-button-label { transform:none; }
}

:is(.dashboard-layout-toolbar,.calendar-toolbar) .flow-button:focus-visible { outline-color:var(--lime); }
.flow-button-label .icon[data-icon="arrow-right"] { display:none; }

.flow-button-label [data-icon="arrow"]{display:none;}
@media(prefers-reduced-motion:reduce){.flow-button,.flow-button::before,.flow-button>.flow-button-label,.flow-button>.flow-button-arrow{transition:none!important;}.flow-button:active{transform:none!important;}}