special-pages/pages/new-tab/app/customizer/components/BrowserThemeSection.module.css
.themeList {
    display: flex;
    gap: 18px;
    --chip-size: 42px;
    --chip-size-half: calc(var(--chip-size) / 2);
}
.themeItem {
    width: 42px;

    span {
        margin-top: 6px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
}
.themeButton {
    display: block;
    width: var(--chip-size);
    height: var(--chip-size);
    border-radius: 50%;

    &[aria-checked="true"] {
        box-shadow: var(--focus-ring-primary);
    }

    &:focus-visible {
        box-shadow: var(--focus-ring-primary);
    }

    &:active {
        opacity: .9;
    }
}

.themeButtonLight {
    border: 1px solid var(--color-black-at-12);
    background: white;
}

.themeButtonDark {
    border: 1px solid var(--color-white-at-9);
    background: var(--color-gray-80);
}

.themeButtonSystem {
    position: relative;
    border: none;
    background: transparent;
    width: var(--chip-size);
    height: var(--chip-size);
    display: flex;
    padding: 0;
    margin: 0;

    &:before {
        content: " ";
        display: block;
        width: var(--chip-size-half);
        height: var(--chip-size);
        border-radius: 0 var(--chip-size-half) var(--chip-size-half) 0;
        transform: rotate(180deg);
        border: 1px solid var(--color-black-at-12);
        background: white;
    }
    &:after {
        content: " ";
        display: block;
        width: var(--chip-size-half);
        height: var(--chip-size);
        border-radius: 0 var(--chip-size-half) var(--chip-size-half) 0;
        border: 1px solid var(--color-white-at-9);
        background: var(--color-gray-80);
    }
}