2024-02-08 11:49:46 +03:00
|
|
|
div.m3.m3-segmented-buttons
|
|
|
|
|
display: flex
|
|
|
|
|
flex-direction: row
|
|
|
|
|
width: min-content
|
|
|
|
|
border-radius: 20px
|
|
|
|
|
|
|
|
|
|
& > button.m3.m3-button-segment
|
|
|
|
|
height: 40px
|
2024-02-09 22:25:46 +03:00
|
|
|
border-radius: 0
|
2024-02-08 23:18:34 +03:00
|
|
|
min-width: 108px
|
2024-02-09 22:25:46 +03:00
|
|
|
width: max-content
|
|
|
|
|
box-sizing: border-box
|
2024-02-08 23:18:34 +03:00
|
|
|
border: 1px solid var(--md-sys-color-outline)
|
2024-02-08 11:49:46 +03:00
|
|
|
|
2024-02-09 22:25:46 +03:00
|
|
|
& > span
|
|
|
|
|
color: var(--md-sys-color-on-surface)
|
|
|
|
|
|
|
|
|
|
& > svg > text
|
|
|
|
|
fill: var(--md-sys-color-on-surface)
|
|
|
|
|
|
2024-02-08 23:18:34 +03:00
|
|
|
&:not(:first-child)
|
|
|
|
|
margin-left: -1px
|
2024-02-08 11:49:46 +03:00
|
|
|
|
|
|
|
|
&:first-child
|
|
|
|
|
border-radius: 20px 0 0 20px
|
|
|
|
|
|
|
|
|
|
&:last-child
|
2024-02-09 22:16:00 +03:00
|
|
|
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)
|
