/*!
 * fluid-tabs
 * Version  : 0.1.1
 * License  : MIT
 * Copyright: 2026 Ewan Howell
 */
:root{--tab-transition-duration:.25s;--tab-transition-easing:cubic-bezier(.4, 0, .2, 1);--tab-slide-lag:.333;--tab-tease-x:10px}@property --tab-fade-start{syntax:"<length>";inherits:false;initial-value:0px}@property --tab-fade-end{syntax:"<length>";inherits:false;initial-value:0px}.tab-bar:not(.tab-bar-ready),.tab-bar:not(.tab-bar-ready) *,.tab-contents:not(.tab-bar-ready),.tab-contents:not(.tab-bar-ready) *{transition:none!important}.tab-bar{display:flex;position:relative;flex-wrap:nowrap;overflow:hidden;scrollbar-width:none;touch-action:pan-y;margin-bottom:24px;--tab-fade:60px;--tab-fade-start:0px;--tab-fade-end:0px;mask-image:linear-gradient(to right,transparent,#000 var(--tab-fade-start),#000 calc(100% - var(--tab-fade-end)),transparent);transition:--tab-fade-start var(--tab-transition-duration) var(--tab-transition-easing),--tab-fade-end var(--tab-transition-duration) var(--tab-transition-easing)}.tab-bar.tab-bar-dragging{cursor:grabbing}.tab-bar.tab-bar-fade-start{--tab-fade-start:var(--tab-fade)}.tab-bar.tab-bar-fade-end{--tab-fade-end:var(--tab-fade)}.tab-bar-wrap{flex-wrap:wrap;overflow:visible;touch-action:auto}.tab-bar-button{all:unset;cursor:pointer;user-select:none;display:flex;flex:1;align-items:center;justify-content:center;white-space:nowrap;font-weight:500;gap:8px;position:relative;z-index:1;transition:background var(--tab-transition-duration) var(--tab-transition-easing),color var(--tab-transition-duration) var(--tab-transition-easing),border-color var(--tab-transition-duration) var(--tab-transition-easing)}.tab-bar-button *{font-family:inherit}.tab-bar-button-icon{width:24px;height:24px;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center}.tab-contents{box-sizing:border-box;position:relative;transition:height var(--tab-transition-duration) var(--tab-transition-easing);display:flex;interpolate-size:initial;width:100%!important;max-width:100%!important}.tab-contents:not(.transitioning){height:auto!important}.tab-contents:not(.transitioning) .tab-content.active{position:initial}.tab-content{transform:translateX(-64px);opacity:0;transition:transform var(--tab-transition-duration) var(--tab-transition-easing),opacity var(--tab-transition-duration) var(--tab-transition-easing);position:absolute;top:0;left:0;right:0;pointer-events:none;width:100%}.tab-content *{pointer-events:none!important}.tab-content.active{transform:initial;opacity:1;pointer-events:initial}.tab-content.active *{pointer-events:initial!important}.tab-content.active~.tab-content{transform:translateX(64px)}.tab-bar.tab-style-buttons{width:100%;justify-content:flex-start;margin-bottom:20px;box-shadow:inset 0 -1px 0 #d6d6d6}.tab-style-buttons .tab-bar-button{flex:0 0 auto;color:#6b6b6b;padding:12px 16px}.tab-style-buttons .tab-bar-button.active{color:#1c1c1c}.tab-style-buttons .tab-bar-active{border-bottom:2px solid #1c1c1c}.tab-bar-active{position:absolute;transition:left var(--tab-transition-duration) var(--tab-transition-easing),right var(--tab-transition-duration) var(--tab-transition-easing),top var(--tab-transition-duration) var(--tab-transition-easing),bottom var(--tab-transition-duration) var(--tab-transition-easing)}.tab-bar.tab-style-tabs{width:100%;gap:4px;margin-bottom:0}.tab-style-tabs .tab-bar-button{background:#d1d1d1;border:1px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;color:#6b6b6b;padding:6px 20px;margin-bottom:-1px}.tab-style-tabs .tab-bar-button.active{background:#f1f1f1;border-color:#d6d6d6;color:#1c1c1c}.tab-bar-wrap.tab-style-tabs .tab-bar-button::after{content:"";position:absolute;top:100%;left:-1px;right:-1px;height:100px;border-left:inherit;border-right:inherit;background-color:inherit;background-image:linear-gradient(transparent,rgba(0,0,0,.12) 8px)}.tab-contents.tab-style-tabs{border-radius:0 0 10px 10px;background:#f1f1f1;border:1px solid #d6d6d6;overflow:hidden}.tab-style-tabs .tab-content{padding:24px}.tab-bar.tab-style-slide{width:fit-content;max-width:100%;padding:4px;background:#d1d1d1;border-radius:10px}.tab-style-slide .tab-bar-active{top:4px;bottom:4px;background:#fff;border-radius:6px}.tab-style-slide .tab-bar-button{padding:10px 18px;min-width:min-content;font-weight:600;color:#71717a}.tab-style-slide .tab-bar-button.active{color:#18181b}