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

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

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

            padding: 10px + ($density * 2px) 12px

@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
    width: 100%
    padding: 4px 0
    border-radius: 20px
    display: inline-flex
    box-sizing: border-box

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

        &:before
            @include m3-buttons-state-layer-mixin

            content: ""

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

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

        & > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer)
            @include center(inline-flex)

            gap: 8px
            height: inherit

            & > svg.m3.m3-svg-icon
                height: inherit

        & > span.m3.m3-button-segment-frame-layer
            box-sizing: border-box

            & > *
                visibility: hidden

        & > span.m3.m3-button-segment-content-layer
            position: absolute

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

        &:not(:disabled):hover
            &:before
                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)
            &:before
                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, 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)
