/* .rail{ flex:0 0 clamp(66px,6.2vw,98px); margin:18px; border-radius:3px; background:#0b1a2c; border:3px solid #0b1a2c; outline:2px dashed rgba(120,162,222,.30); outline-offset:-8px; position:relative; overflow:hidden; } .rail svg{position:absolute; inset:9px; width:calc(100% - 18px); height:calc(100% - 18px); display:block;} */ .rail{ flex:0 0 clamp(66px,6.2vw,98px); margin:18px; border-radius:3px; background:var(--rail-blue); border:3px solid var(--rail-blue); outline:2px dashed rgba(120,162,222,.30); outline-offset:-8px; position:relative; overflow:hidden; transition:background .3s ease, border-color .3s ease, outline-color .3s ease; } /* per-tab theming — driven by [data-theme] on , set when a tab changes. the blue theme is the default above. */ [data-theme="green"] .rail{background:var(--rail-green); border-color:var(--rail-green); outline-color:rgba(116,201,138,.30);} [data-theme="yellow"] .rail{background:var(--rail-yellow); border-color:var(--rail-yellow); outline-color:rgba(232,196,92,.30);} [data-theme="red"] .rail{background:var(--rail-red); border-color:var(--rail-red); outline-color:rgba(232,118,94,.30);} [data-theme="purple"] .rail{background:var(--rail-purple); border-color:var(--rail-purple); outline-color:rgba(185,143,217,.30);} [data-theme="sepia"] .rail{background:var(--rail-sepia); border-color:var(--rail-sepia); outline-color:rgba(176,137,90,.30);} .rail--right{margin-left:0;} .rail--left{margin-right:0;} .rail img{ position:absolute; inset:9px; width:calc(100% - 18px); height:calc(100% - 18px); display:block; }