.segment{width:100%;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent;position:relative;z-index:1;border:1px solid rgba(0,0,0,.3);border-radius:3px;color:rgba(0,0,0,.3);margin-right:30px}.segment>input[type=radio]{display:none}.segment>input:checked+label{color:#fff}.segment>input:first-of-type:checked~label:last-of-type:before{transform:translateX(calc(0 + 0))}.segment>input:nth-of-type(2):checked~label:last-of-type:before{transform:translateX(calc(100% + 0))}.segment>input:nth-of-type(3):checked~label:last-of-type:before{transform:translateX(calc(200% + 0))}.segment>input:nth-of-type(4):checked~label:last-of-type:before{transform:translateX(calc(300% + 0))}.segment label{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border:1px}.segment label:last-of-type:before{content:"";display:block;margin:0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;transform:translateX(0)}.two label:last-of-type:before{max-width:calc(50% - 0px)}.three label:last-of-type:before{max-width:calc(33.333333% - 0px)}.four label:last-of-type:before{max-width:calc(25% - 0px)}.segment label{padding:6px 3px;transition:color 250ms cubic-bezier(0, .95, .38, .98);font-size:16px;margin:0}.segment label:before{background:#5f5f5f;transition:all 250ms cubic-bezier(0, .95, .38, .98)}.segment label.special:before{background:0 0}.segment label:not(:last-child){border-right:1px solid rgba(0,0,0,.3)}.segment>input+label{font-size:.9em!important}