CSS: как сделать так, чтобы на активной вкладке отображался тот же фрагмент градиента, что и в родительском контейнере ( ⇐ Html

[Anonymous]

Ожидаемое поведение: активная вкладка должна идеально соответствовать родительскому градиенту (например, «окно» в родительский элемент).

Фактическое поведение: градиент активной вкладки по-прежнему выглядит иначе.
Как правильно реализовать этот эффект «маска градиента/срез»?

ПЛОХОЙ РЕЗУЛЬТАТ -> ХОРОШИЙ РЕЗУЛЬТАТ
"use client";

import { useState } from "react";

type Tab = 0 | 1 | 2;

export default function TabsGradient() {
const [tab, setTab] = useState(0);

return (


{[0, 1, 2].map((i) => (
setTab(i as Tab)}
type="button"
/>
))}

);
}

.wrap{
--w:600px;
--g:linear-gradient(93deg,#DECB83 3.88%,#BFAA67 96.9%);
width:var(--w);
padding:12px;
border-radius:18px;
background:var(--g);
}

.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.tab{height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:transparent;position:relative;overflow:hidden}

.tab.on::before{
content:"";
position:absolute;inset:0;
background:var(--g);
background-size:var(--w) 100%;
background-position:var(--x) 0;
z-index:-1;
}

.wrap.t0{--x:0%}
.wrap.t1{--x:50%}
.wrap.t2{--x:100%}

.panel{height:160px;border-radius:14px;background:rgba(255,255,255,.06)}


Подробнее здесь: https://stackoverflow.com/questions/798 ... ntainer-no