.ui-kit-btn{--btn-padding:var(--btn-padding-y) var(--btn-padding-x);background-color:var(--btn-bg-color);color:var(--btn-text-color);font-size:var(--btn-font-size);line-height:var(--btn-font-size--line-height);outline:var(--btn-outline-width,0) solid var(--btn-outline-color);border-radius:var(--btn-border-radius);height:var(--btn-height,max-content);-webkit-user-select:none;user-select:none;cursor:pointer;touch-action:manipulation;flex-grow:0;align-items:stretch;width:max-content;display:flex;position:relative}.ui-kit-btn--disabled{cursor:default}.ui-kit-btn--disabled .btn-content{opacity:.5}.ui-kit-btn .btn-content{gap:var(--btn-gap);padding:var(--btn-padding);flex:1;justify-content:center;align-items:center;display:flex}.ui-kit-btn--solid{--btn-bg-color:var(--theme-primary);--btn-text-color:var(--theme-on-primary);--btn-outline-color:var(--theme-primary)}.ui-kit-btn--outline{--btn-bg-color:transparent;--btn-text-color:var(--theme-on-primary);--btn-outline-width:2px;--btn-outline-color:var(--theme-on-primary)}.ui-kit-btn--ghost{--btn-bg-color:transparent;--btn-text-color:var(--theme-on-primary);--btn-outline-color:transparent}.ui-kit-btn--solid.ui-kit-btn--inverted{--btn-bg-color:var(--theme-neutral);--btn-text-color:var(--theme-primary);--btn-outline-color:var(--theme-primary)}.ui-kit-btn--outline.ui-kit-btn--inverted{--btn-bg-color:transparent;--btn-text-color:var(--theme-neutral);--btn-outline-width:2px;--btn-outline-color:var(--theme-neutral)}@media (hover:hover){.ui-kit-btn--outline.ui-kit-btn--inverted:hover{--btn-bg-color:var(--theme-neutral);--btn-text-color:var(--theme-primary)}}.ui-kit-btn .btn-icon{max-width:100%;height:100%;max-height:100%;height:var(--icon-size);width:var(--icon-size)}.ui-kit-btn.ui-kit-btn--icon-only{--btn-padding:8px;--btn-border-radius:var(--radius-4);aspect-ratio:1}.ui-kit-btn .btn-trailing{display:flex}.ui-kit-btn--split .btn-content{justify-content:flex-start}.ui-kit-btn.ui-kit-btn--xl,.ui-kit-btn-tokens--xl{--btn-font-size:var(--text-xl);--btn-font-size--line-height:var(--text-xl--line-height);--btn-border-radius:22.5px;--btn-gap:10px;--btn-padding-y:14px;--btn-padding-x:24px;--btn-height:50px;--icon-size:18px}:is(.ui-kit-btn.ui-kit-btn--xl,.ui-kit-btn-tokens--xl).ui-kit-btn--icon-only{--btn-padding:14px}.ui-kit-btn.ui-kit-btn--lg,.ui-kit-btn-tokens--lg{--btn-font-size:var(--text-xl);--btn-font-size--line-height:var(--text-xl--line-height);--btn-border-radius:19px;--btn-gap:6px;--btn-padding-y:10px;--btn-padding-x:20px;--btn-height:45px;--icon-size:20px}:is(.ui-kit-btn.ui-kit-btn--lg,.ui-kit-btn-tokens--lg).ui-kit-btn--icon-only{--btn-padding:10px}.ui-kit-btn.ui-kit-btn--base,.ui-kit-btn-tokens--base{--btn-font-size:var(--text-lg);--btn-font-size--line-height:var(--text-lg--line-height);--btn-border-radius:18px;--btn-gap:8px;--btn-padding-y:6px;--btn-padding-x:14px;--btn-height:40px;--icon-size:18px}:is(.ui-kit-btn.ui-kit-btn--base,.ui-kit-btn-tokens--base).ui-kit-btn--icon-only{--btn-padding:8px}.ui-kit-btn.ui-kit-btn--sm,.ui-kit-btn-tokens--sm{--btn-font-size:var(--text-base);--btn-font-size--line-height:var(--text-base--line-height);--btn-border-radius:13px;--btn-gap:3px;--btn-padding-y:4px;--btn-padding-x:12px;--icon-size:16px;--btn-height:30px}:is(.ui-kit-btn.ui-kit-btn--sm,.ui-kit-btn-tokens--sm).ui-kit-btn--icon-only{--btn-padding:7px}@media (hover:hover){.ui-kit-btn:hover{--btn-outline-width:2px}.ui-kit-btn:hover .btn-icon.btn-icon--left{transform:scale(1.3)rotate(-5deg)}.ui-kit-btn:hover .btn-icon.btn-icon--right{transform:scale(1.3)rotate(5deg)}}.ui-kit-btn[data-playing]{--btn-outline-width:2px}.ui-kit-btn[data-playing] .btn-icon.btn-icon--left{transform:scale(1.3)rotate(-5deg)}.ui-kit-btn[data-playing] .btn-icon.btn-icon--right{transform:scale(1.3)rotate(5deg)}.ui-kit-btn--quiet-tap[data-playing] .btn-icon{transform:none}@media (pointer:coarse){.ui-kit-btn:before{content:"";inset:var(--btn-tap-inset,-8px);border-radius:calc(var(--btn-border-radius) + 8px);position:absolute}}