div.m3.m3-segmented-buttons
    padding: 0
    height: 40px
    display: flex
    flex-direction: row
    border-radius: 20px
    box-sizing: border-box
    border-collapse: collapse

    & > button.m3.m3-button-segment
        height: 40px
        display: flex
        min-width: 108px
        border-radius: 0
        width: max-content
        padding-inline: 10px
        margin: 0 -0.5px 0 -0.5px
        background-color: transparent
        border: 1px solid var(--md-sys-color-outline)

        &:first-child
            border-radius: 20px 0 0 20px

        &:last-child
            border-radius: 0 20px 20px 0

        & > span
            color: var(--md-sys-color-on-surface)

        & > svg > text
            fill: var(--md-sys-color-on-surface)

        &:disabled
            border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)

            & > *
                opacity: 38%

        &.selected
            background-color: var(--md-sys-color-secondary-container)

            & > span
                color: var(--md-sys-color-on-secondary-container)

                & > text
                    fill: var(--md-sys-color-on-secondary-container)

        & > span.m3.m3-button-segment-state-layer
            position: absolute
            width: 100%
            height: 100%

        & > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
            transition: .2s cubic-bezier(0.2, 0, 0, 1)

        &:hover
            & > span.m3.m3-button-segment-state-layer
                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)

        &:is(&:active, &:focus-visible)
            & > span.m3.m3-button-segment-state-layer
                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)

        &:active
            & > span.m3.m3-ripple-domain > span.m3.ripple
                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)