.passingpattern {
    --bg-color: #fff;
    --bg-secondary-color: #f3f3f6;
    --tab-inactive: #d2d6dd;
    --tab-hover: #747681;
    --tab-active: #3f4144;
}

svg.passingpattern { max-width: 100%; }

.passingpattern .starting-hands { fill: var(--fg, #000); }
.passingpattern .throw-label { fill: var(--fg, #000); }

.passingpattern .tab { cursor: pointer; }
.passingpattern .tab rect { fill: var(--bg-color); stroke: var(--tab-inactive); }
.passingpattern .tab text { fill: #666; font-size: 8px; text-anchor: middle; dominant-baseline: central; }
.passingpattern .tab line { stroke: transparent; stroke-width: 3; }
.passingpattern .tab:hover rect { fill: var(--bg-secondary-color); }
.passingpattern .tab-active rect { fill: white; stroke: var(--tab-active); stroke-width: 2; }
.passingpattern .tab-active text { fill: var(--tab-active); font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.passingpattern .tab-active line { stroke: var(--tab-active); stroke-width: 3; }