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

    & > button.m3.m3-button-segment
        width: auto
        height: 40px
        padding: 10px
        min-width: 108px
        border-radius: 0
        margin: 0 -0.5px
        display: inline-flex
        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
            opacity: 0

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

        &:not(.selected)
            & > svg
                display: none

            &::after, &::before
                content: ''
                width: 6px
                position: relative

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

            & > svg
                opacity: 1

            & > 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
            width: 100%
            height: 100%
            position: absolute

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