Как мне сделать эту фоновую кнопку? ⇐ CSS

[Anonymous]

Мне нужно сделать фон для кнопок переключения темы, но я застрял на этой части
Как это должно быть ->
Как я это делал до сих пор ->
это мой код в нижней части темы переключения

calc

THEME

1
2
3




Сначала я создал контейнер , чтобы другие элементы не разрывали строку, но поскольку диапазон естественным образом отображается в строке, я не могу изменить его высоту.
После этого я попытался изменить btnContainer для отображения: inline-block; но это не сработало
Теперь я немного растерялся, был бы признателен, если бы кто-нибудь помог мне в этом вопросе.
.themeContainer {
color: hsl(0, 0%, 100%);
width: 535px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}

.themeContainer p {
font-size: 30px;
margin-left: 10px;
}

.themeContainer .btnContainer {
background-color:hsl(224, 36%, 15%);
border-radius: 50%;
}

.themeContainer .themeText {
font-size: 12px;
margin-right: 10px;
}

.themeContainer button {
color: hsl(0, 0%, 100%);
background-color:hsl(224, 36%, 15%);
font-size: 12px;
max-width: 50px;
max-height: 50px;
width: 20px;
height: 20px;
margin: -1px;
border-radius: 50%;
border-style: none;
cursor: pointer;
}


Подробнее здесь: https://stackoverflow.com/questions/783 ... und-button