/* button effects, modifiers on .btn and a few stateful parts */
@property --fx-c { syntax: "<length>"; inherits: false; initial-value: 14px; }

.btn.tonal { background: var(--accent-dim); color: var(--accent); border-color: transparent; }
.btn.tonal:hover { border-color: var(--accent); }
.btn.sq { width: 48px; padding: 0; }
.btn.sq svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.btn.sq:hover { border-color: var(--accent); color: var(--accent); }

.btn.fx-notch { --fx-c: 14px; border: 0; background: var(--accent); color: var(--void); padding: 0 28px; position: relative; overflow: hidden; clip-path: polygon(0 0, calc(100% - var(--fx-c)) 0, 100% var(--fx-c), 100% 100%, var(--fx-c) 100%, 0 calc(100% - var(--fx-c))); transition: --fx-c .25s var(--ease-out), background-color .15s, letter-spacing .25s, transform .1s; }
.btn.fx-notch::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; left: -60px; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); }
.btn.fx-notch:hover { --fx-c: 24px; background: #f2c168; letter-spacing: .26em; }
.btn.fx-notch:hover::after { animation: fx-shine .7s ease-out; }
@keyframes fx-shine { to { left: calc(100% + 40px); } }

.btn.fx-bracket { position: relative; border: 0; padding: 0 26px; transition: padding .25s var(--ease-out), color .15s, transform .1s; }
.btn.fx-bracket::before, .btn.fx-bracket::after { content: ""; position: absolute; top: 0; bottom: 0; width: 10px; border: 1px solid var(--accent); transition: width .3s var(--ease-out), top .3s, bottom .3s; }
.btn.fx-bracket::before { left: 0; border-right: 0; }
.btn.fx-bracket::after { right: 0; border-left: 0; }
.btn.fx-bracket:hover { color: var(--accent); padding: 0 34px; }
.btn.fx-bracket:hover::before, .btn.fx-bracket:hover::after { width: 22px; top: -3px; bottom: -3px; }
.btn.fx-bracket:active::before, .btn.fx-bracket:active::after { width: 30px; }

.btn.fx-under { position: relative; border: 0; min-height: 40px; padding: 0 2px; overflow: hidden; transition: color .15s, letter-spacing .25s, transform .1s; }
.btn.fx-under::before, .btn.fx-under::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; }
.btn.fx-under::before { background: var(--line-2); }
.btn.fx-under::after { background: var(--accent); transform-origin: right; transform: scaleX(.35); transition: transform .35s var(--ease-out); }
.btn.fx-under:hover { color: var(--accent); letter-spacing: .26em; }
.btn.fx-under:hover::after { transform-origin: left; transform: scaleX(1); }

.btn.fx-arrow { padding: 0 0 0 20px; gap: 18px; overflow: hidden; transition: gap .25s, border-color .15s, transform .1s; }
.btn.fx-arrow i { display: grid; place-items: center; align-self: stretch; width: 48px; border-left: 1px solid var(--line-2); font-style: normal; font-size: 16px; transition: background-color .15s, color .15s, border-color .15s; }
.btn.fx-arrow:hover { gap: 26px; border-color: var(--accent); }
.btn.fx-arrow:hover i { background: var(--accent); color: var(--void); border-color: var(--accent); animation: fx-nudge .9s ease-in-out infinite; }
@keyframes fx-nudge { 0%, 100% { padding-left: 0; } 50% { padding-left: 10px; } }

.btn.fx-tag { position: relative; border: 0; background: var(--surface-2); padding: 0 22px 0 30px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); transition: background-color .15s, color .15s, padding .25s var(--ease-out), transform .1s; }
.btn.fx-tag::before { content: ""; position: absolute; left: 13px; width: 6px; height: 6px; background: var(--accent); transition: transform .4s var(--ease-out); }
.btn.fx-tag:hover { background: var(--accent-dim); padding: 0 22px 0 38px; color: var(--accent); }
.btn.fx-tag:hover::before { transform: rotate(225deg) scale(1.4); }

.btn.fx-sweep { position: relative; overflow: hidden; z-index: 0; }
.btn.fx-sweep::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-101%); transition: transform .3s var(--ease-out); z-index: -1; }
.btn.fx-sweep:hover { color: var(--void); border-color: var(--accent); }
.btn.fx-sweep:hover::before { transform: none; }

.btn.fx-glow { border-color: var(--accent); color: var(--accent); transition: box-shadow .2s, transform .1s; }
.btn.fx-glow:hover { box-shadow: 0 0 0 4px var(--accent-dim), 0 0 24px rgba(232, 176, 75, .35); border-color: var(--accent); }

.btn.fx-scan { position: relative; overflow: hidden; }
.btn.fx-scan::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: -4px; background: var(--accent); box-shadow: 0 0 12px var(--accent); opacity: 0; }
.btn.fx-scan:hover::after { opacity: 1; animation: fx-scan 1s linear infinite; }
@keyframes fx-scan { to { left: calc(100% + 4px); } }

.btn.fx-swap { position: relative; overflow: hidden; }
.btn.fx-swap span { display: block; transition: transform .25s var(--ease-out); }
.btn.fx-swap span + span { position: absolute; color: var(--accent); transform: translateY(150%); }
.btn.fx-swap:hover span:first-child { transform: translateY(-150%); }
.btn.fx-swap:hover span + span { transform: none; }

.btn.fx-led { padding-left: 18px; }
.btn.fx-led::before { content: ""; width: 8px; height: 8px; background: var(--ok); animation: fx-ping 1.8s infinite; }
@keyframes fx-ping { 0% { box-shadow: 0 0 0 0 rgba(93, 219, 160, .5); } 100% { box-shadow: 0 0 0 10px transparent; } }

.btn.fx-load { position: relative; min-width: 168px; overflow: hidden; z-index: 0; }
.btn.fx-load .fx-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent-dim); border-right: 1px solid var(--accent); z-index: -1; }
.btn.fx-load.busy .fx-fill { animation: fx-fill 2.2s linear forwards; }
@keyframes fx-fill { to { width: 100%; } }
.btn.fx-load.done { border-color: var(--ok); color: var(--ok); background: rgba(93, 219, 160, .12); }

.btn.fx-hold { position: relative; min-width: 200px; color: var(--no); border-color: var(--no); overflow: hidden; z-index: 0; touch-action: none; }
.btn.fx-hold .fx-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 122, 122, .12); z-index: -1; }
.btn.fx-hold.go .fx-fill { width: 100%; transition: width 1.2s linear; }
.btn.fx-hold.fired { background: var(--no); color: #2a0707; }

.fx-stepper { display: inline-flex; align-items: center; justify-content: space-between; min-width: 148px; border: 1px solid var(--line-2); }
.fx-stepper > button { appearance: none; border: 0; background: transparent; cursor: pointer; width: 46px; height: 46px; display: grid; place-items: center; color: var(--muted); font: 500 18px/1 var(--mono); transition: background-color .15s, color .15s, transform .12s; }
.fx-stepper > button:hover { background: var(--surface-2); color: var(--accent); }
.fx-stepper > button:active { transform: scale(.82); color: var(--accent); }
.fx-stepper > button:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }
.fx-stepper output { display: inline-flex; justify-content: center; min-width: 30px; height: 1.3em; overflow: hidden; font: 500 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.fx-stepper .d { position: relative; display: inline-block; height: 1.3em; }
.fx-stepper .d i { display: block; height: 1.3em; font-style: normal; }
.fx-stepper .d i.out { position: absolute; inset: 0 0 auto 0; }
.fx-stepper .d.up i.out { animation: fx-out-up .38s cubic-bezier(.3, 1.2, .4, 1) forwards; }
.fx-stepper .d.up i.in { animation: fx-in-up .38s cubic-bezier(.3, 1.2, .4, 1) both; }
.fx-stepper .d.down i.out { animation: fx-out-down .38s cubic-bezier(.3, 1.2, .4, 1) forwards; }
.fx-stepper .d.down i.in { animation: fx-in-down .38s cubic-bezier(.3, 1.2, .4, 1) both; }
@keyframes fx-out-up { to { transform: translateY(-100%); opacity: 0; filter: blur(2px); } }
@keyframes fx-in-up { from { transform: translateY(100%); opacity: 0; filter: blur(2px); } }
@keyframes fx-out-down { to { transform: translateY(100%); opacity: 0; filter: blur(2px); } }
@keyframes fx-in-down { from { transform: translateY(-100%); opacity: 0; filter: blur(2px); } }
.fx-stepper.bump { animation: fx-bump .25s ease-out; }
@keyframes fx-bump { 50% { border-color: var(--accent); } }

.fx-seg { display: inline-flex; position: relative; isolation: isolate; border: 1px solid var(--line-2); }
.fx-seg > button { position: relative; z-index: 1; min-height: 40px; padding: 0 16px; border: 0; border-left: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color .2s, transform .15s cubic-bezier(.3, 1.6, .5, 1), letter-spacing .25s; }
.fx-seg > button:first-of-type { border-left: 0; }
.fx-seg > button:hover { color: var(--accent); }
.fx-seg > button:active { transform: scale(.92); }
.fx-seg > button[aria-pressed=true] { color: var(--void); letter-spacing: .24em; }
.fx-seg > button:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }
.fx-seg .thumb { position: absolute; z-index: 0; top: -1px; bottom: -1px; left: 0; width: 0; background: var(--accent); transition: transform .42s cubic-bezier(.3, 1.25, .4, 1), width .42s cubic-bezier(.3, 1.25, .4, 1); }
.fx-seg .thumb.fly { animation: fx-pulse .42s ease-out; }
@keyframes fx-pulse { 40% { box-shadow: 0 0 0 5px var(--accent-dim), 0 0 22px rgba(232, 176, 75, .4); } }
.fx-seg .tick { position: absolute; z-index: 0; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ink); transition: transform .6s cubic-bezier(.3, 1.25, .4, 1) .05s, width .6s cubic-bezier(.3, 1.25, .4, 1) .05s; }

@media (prefers-reduced-motion: reduce) {
  .btn[class*="fx-"], .btn[class*="fx-"]::before, .btn[class*="fx-"]::after, .btn[class*="fx-"] *, .fx-stepper *, .fx-seg, .fx-seg * { animation: none !important; transition: none !important; }
}