.line-button{--line-color: hsl(210deg, 33%, 12%);display:inline-block;padding:6px 12px;margin:0;background-color:#0000;border:0;overflow:visible;cursor:pointer}.line-button:is([data-icon-color=black]){--line-color: hsl(0deg, 0%, 0%)}.line-button:is([data-icon-color=white]){--line-color: hsl(0deg, 0%, 100%)}.line-button__box{position:relative;display:inline-block;width:24px;height:24px}.line-button__line{position:relative;top:50%;display:block;margin:0;background-color:var(--line-color)}.line-button__line,.line-button__line:before,.line-button__line:after{position:absolute;display:block;content:"";width:24px;height:2px;background-color:var(--line-color);border-radius:4px;transition:transform .15s ease}.line-button__line:before{top:-6px}.line-button__line:after{bottom:-6px}.line-button[data-icon=right].collapsed .line-button__line:before{transform:translate3d(5px,0,0) rotate(45deg) scaleX(.7)}.line-button[data-icon=right].collapsed .line-button__line:after{transform:translate3d(5px,0,0) rotate(-45deg) scaleX(.7)}.line-button[data-icon=cross].collapsed .line-button__line{background-color:#0000}.line-button[data-icon=cross].collapsed .line-button__line:before{top:0;transform:translateZ(0) rotate(45deg) scaleX(.9)}.line-button[data-icon=cross].collapsed .line-button__line:after{bottom:0;transform:translateZ(0) rotate(-45deg) scaleX(.9)}