.component-toggler{align-items:center;background-color:#fff;border-radius:1.75rem;box-shadow:0 .0625rem .125rem #00000052;box-sizing:border-box;display:flex;justify-content:center;overflow:hidden;padding:.3125rem}.component-toggler .toggle-buttons-wrapper{display:grid;height:100%;position:relative;width:100%}.component-toggler .toggle-buttons-wrapper:before{background-color:var(--color-brown);border-radius:1.375rem;bottom:0;content:"";left:0;position:absolute;top:0;transition:transform .3s ease}.component-toggler .toggle-buttons-wrapper.size-1{grid-template-columns:repeat(1,1fr)}.component-toggler .toggle-buttons-wrapper.size-1:before{width:100%}.component-toggler .toggle-buttons-wrapper.size-2{grid-template-columns:repeat(2,1fr)}.component-toggler .toggle-buttons-wrapper.size-2:before{width:50%}.component-toggler .toggle-buttons-wrapper.size-3{grid-template-columns:repeat(3,1fr)}.component-toggler .toggle-buttons-wrapper.size-3:before{width:33.33333%}.component-toggler .toggle-buttons-wrapper.size-4{grid-template-columns:repeat(4,1fr)}.component-toggler .toggle-buttons-wrapper.size-4:before{width:25%}.component-toggler .toggle-buttons-wrapper.size-5{grid-template-columns:repeat(5,1fr)}.component-toggler .toggle-buttons-wrapper.size-5:before{width:20%}.component-toggler .toggle-buttons-wrapper.size-6{grid-template-columns:repeat(6,1fr)}.component-toggler .toggle-buttons-wrapper.size-6:before{width:16.66667%}.component-toggler .toggle-buttons-wrapper.size-7{grid-template-columns:repeat(7,1fr)}.component-toggler .toggle-buttons-wrapper.size-7:before{width:14.28571%}.component-toggler .toggle-buttons-wrapper.size-8{grid-template-columns:repeat(8,1fr)}.component-toggler .toggle-buttons-wrapper.size-8:before{width:12.5%}.component-toggler .toggle-buttons-wrapper.size-9{grid-template-columns:repeat(9,1fr)}.component-toggler .toggle-buttons-wrapper.size-9:before{width:11.11111%}.component-toggler .toggle-buttons-wrapper.size-10{grid-template-columns:repeat(10,1fr)}.component-toggler .toggle-buttons-wrapper.size-10:before{width:10%}.component-toggler .toggle-buttons-wrapper.active-1:before{transform:translateX(0)}.component-toggler .toggle-buttons-wrapper.active-2:before{transform:translateX(100%)}.component-toggler .toggle-buttons-wrapper.active-3:before{transform:translateX(200%)}.component-toggler .toggle-buttons-wrapper.active-4:before{transform:translateX(300%)}.component-toggler .toggle-buttons-wrapper.active-5:before{transform:translateX(400%)}.component-toggler .toggle-buttons-wrapper.active-6:before{transform:translateX(500%)}.component-toggler .toggle-buttons-wrapper.active-7:before{transform:translateX(600%)}.component-toggler .toggle-buttons-wrapper.active-8:before{transform:translateX(700%)}.component-toggler .toggle-buttons-wrapper.active-9:before{transform:translateX(800%)}.component-toggler .toggle-buttons-wrapper.active-10:before{transform:translateX(900%)}.component-toggler .toggler-btn{background:none;border:none;color:inherit;cursor:pointer;flex-basis:100%;font-size:1rem;height:100%;line-height:1;padding:.75rem 1.75rem 1rem;position:relative;transition:color .3s ease}.component-toggler .toggler-btn.active{color:#fff}[dir=rtl] .component-toggler .toggle-buttons-wrapper:before{left:auto;right:0}[dir=rtl] .component-toggler .toggle-buttons-wrapper.active-1:before{transform:translateX(0)}[dir=rtl] .component-toggler .toggle-buttons-wrapper.active-2:before{transform:translateX(-100%)}[dir=rtl] .component-toggler .toggle-buttons-wrapper.active-3:before{transform:translateX(-200%)}[dir=rtl] .component-toggler .toggle-buttons-wrapper.active-4:before{transform:translateX(-300%)}[dir=rtl] .component-toggler .toggle-buttons-wrapper.active-5:before{transform:translateX(-400%)}[dir=rtl] .component-toggler .toggle-buttons-wrapper.active-6:before{transform:translateX(-500%)}[dir=rtl] .component-toggler .toggle-buttons-wrapper.active-7:before{transform:translateX(-600%)}[dir=rtl] .component-toggler .toggle-buttons-wrapper.active-8:before{transform:translateX(-700%)}[dir=rtl] .component-toggler .toggle-buttons-wrapper.active-9:before{transform:translateX(-800%)}[dir=rtl] .component-toggler .toggle-buttons-wrapper.active-10:before{transform:translateX(-900%)}@media screen and (min-width:96rem){.component-toggler .toggler-btn{font-size:1.125rem}}