div.m3.m3-segmented-buttons
    display: flex
    flex-direction: row
    width: min-content
    border-radius: 20px

    & > button.m3.m3-button-segment
        width: max-content
        border-radius: 0
        box-sizing: border-box
        height: 40px
        min-width: 108px
        border: 1px solid var(--md-sys-color-outline)

        &:not(:first-child)
            margin-left: -1px

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

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

        & > 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)