@react-beauty/ui-segment/dist/index.css

ui-segment

.react-beauty-el-segment-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;background-color:var(--components-segment-background);border-radius:var(--components-segment-border-radius);padding:var(--components-segment-padding);gap:var(--components-segment-gap);box-sizing:border-box;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.react-beauty-el-segment-list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:var(--components-segment-gap);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:100%;height:100%}.react-beauty-el-segment-item{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:var(--space-1) var(--space-2);border-radius:var(--components-segment-border-radius);cursor:pointer;border:none;gap:var(--components-segment-gap);background-color:transparent;color:var(--components-segment-text-color);font-size:var(--components-segment-text-font-size);line-height:var(--components-segment-text-line-height);font-weight:var(--components-segment-text-font-weight);-webkit-transition:background-color var(--components-segment-transition-duration) var(--components-segment-transition-timing),color var(--components-segment-transition-duration) var(--components-segment-transition-timing);transition:background-color var(--components-segment-transition-duration) var(--components-segment-transition-timing),color var(--components-segment-transition-duration) var(--components-segment-transition-timing)}.react-beauty-el-segment-item[data-active=true]{background-color:var(--components-segment-background-active)}.react-beauty-el-segment-item[data-has-square-padding=true]{padding:var(--space-1)}.react-beauty-el-segment-item:focus-visible{outline:4px solid var(--components-segment-focus-ring)}