$densities: [0, -1, -2, -3]

@each $density in $densities
    .m3.m3-density-#{$density}
        $height: 40px + ($density * 2px)

        & > button.m3.m3-button-segment
            height: $height

            &:first-child
                border-radius: ($height / 2) 0 0 ($height / 2)

            &:last-child
                border-radius: 0 ($height / 2) ($height / 2) 0

            & > span.m3.m3-button-segment-state-layer
                padding-top: 10px + ($density * 1px)
                padding-bottom: 10px + ($density * 1px)

@mixin m3-segmented-button-content-color-mixin($color)
    & > svg.m3.m3-svg-icon > text
        fill: var($color)

    & > label.m3.m3-typography
        color: var($color)

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

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

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

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

        & > span.m3.m3-button-segment-state-layer
            @include m3-buttons-state-layer-mixin

            box-sizing: border-box

            & > *
                visibility: hidden

        & > span.m3.m3-button-segment-content-layer
            @include center(inline-flex)
            @include m3-segmented-button-content-color-mixin(--md-sys-color-on-surface)

            gap: 8px
            position: absolute
            max-height: inherit

            & > svg.m3.m3-svg-icon
                display: none

        &.selected

            background-color: var(--md-sys-color-secondary-container)

            & > span.m3.m3-button-segment-content-layer
                @include m3-segmented-button-content-color-mixin(--md-sys-color-on-secondary-container)

                & > svg.m3.m3-svg-icon
                    display: initial

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

        &:is(&:not(&:has(span.m3.m3-ripple-domain)):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)

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

            & > *
                opacity: 38%


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