Add CSS to unseelected Content Tabs?

[YozoraXCII]

I'm trying to customize my Content Tabs to make it a bit more "obvious" that they are tabs.

I'm by no means an expert and a lot of this is ChatGPT produced, but so far I have managed to produce this for the active tab:

What I would like to do is add a similar rounded fill for the inactive tabs in a dark grey colour, but I can't figure out the right elements for selecting the unselected tabs. I'll probably need a few pixels of spacing between each tab to avoid the border of the tabs touching each other.

here is the css I'm working with, apologies for any ChatGPT mess:

.md-tabs__item {
  font-weight: normal;
}

.md-tabs__item--active {
  font-weight: bold;
  text-decoration: underline;
}

.md-tabs__item a {
  color: #000;
}

.md-tabs__item a:hover {
  color: #dfdfdf;
}

.md-tabs__item:not(.md-tabs__item--active) a {
    color: #ffffff;
}

.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child,
.md-typeset .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > :nth-child(10),
.md-typeset .tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > :nth-child(11),
.md-typeset .tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > :nth-child(12),
.md-typeset .tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > :nth-child(13),
.md-typeset .tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > :nth-child(14),
.md-typeset .tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > :nth-child(15),
.md-typeset .tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > :nth-child(16),
.md-typeset .tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > :nth-child(17),
.md-typeset .tabbed-set > input:nth-child(18):checked ~ .tabbed-labels > :nth-child(18),
.md-typeset .tabbed-set > input:nth-child(19):checked ~ .tabbed-labels > :nth-child(19),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(20):checked ~ .tabbed-labels > :nth-child(20),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6),
.md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7),
.md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8),
.md-typeset .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > :nth-child(9) {
    color: #ffffff;
    background-color: #00bc8c;
    border-color: 0 -.05rem #30363d #30363d #fff inset;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-color: #ffffff;
    border-radius: 6px 6px 0 0;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.md-typeset .tabbed-labels>label {
    border-bottom: 0rem
}

.js .md-typeset .tabbed-labels:before {
    height: 0px;
}

.md-typeset .tabbed-content {
    width: 100%;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0 0 6px 6px;
    padding: 10px;
    box-sizing: border-box;
    background-color: hsl(225deg 3.85% 13.04%);
}