.component-toggler {
    background-color: white;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 1.75rem;
    padding: 0.3125rem;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 0.0625rem 0.125rem #00000052;
}

.component-toggler .toggle-buttons-wrapper {
        position: relative;
        display: grid;
        width: 100%;
        height: 100%;
    }

.component-toggler .toggle-buttons-wrapper::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            background-color: var(--color-brown);
            border-radius: 1.375rem;
            transition: transform 300ms ease;
        }

.component-toggler .toggle-buttons-wrapper.size-1 {
            grid-template-columns: repeat(1, 1fr);
        }

.component-toggler .toggle-buttons-wrapper.size-1::before {
                width: calc(100% / 1);
            }

.component-toggler .toggle-buttons-wrapper.size-2 {
            grid-template-columns: repeat(2, 1fr);
        }

.component-toggler .toggle-buttons-wrapper.size-2::before {
                width: calc(100% / 2);
            }

.component-toggler .toggle-buttons-wrapper.size-3 {
            grid-template-columns: repeat(3, 1fr);
        }

.component-toggler .toggle-buttons-wrapper.size-3::before {
                width: calc(100% / 3);
            }

.component-toggler .toggle-buttons-wrapper.size-4 {
            grid-template-columns: repeat(4, 1fr);
        }

.component-toggler .toggle-buttons-wrapper.size-4::before {
                width: calc(100% / 4);
            }

.component-toggler .toggle-buttons-wrapper.size-5 {
            grid-template-columns: repeat(5, 1fr);
        }

.component-toggler .toggle-buttons-wrapper.size-5::before {
                width: calc(100% / 5);
            }

.component-toggler .toggle-buttons-wrapper.size-6 {
            grid-template-columns: repeat(6, 1fr);
        }

.component-toggler .toggle-buttons-wrapper.size-6::before {
                width: calc(100% / 6);
            }

.component-toggler .toggle-buttons-wrapper.size-7 {
            grid-template-columns: repeat(7, 1fr);
        }

.component-toggler .toggle-buttons-wrapper.size-7::before {
                width: calc(100% / 7);
            }

.component-toggler .toggle-buttons-wrapper.size-8 {
            grid-template-columns: repeat(8, 1fr);
        }

.component-toggler .toggle-buttons-wrapper.size-8::before {
                width: calc(100% / 8);
            }

.component-toggler .toggle-buttons-wrapper.size-9 {
            grid-template-columns: repeat(9, 1fr);
        }

.component-toggler .toggle-buttons-wrapper.size-9::before {
                width: calc(100% / 9);
            }

.component-toggler .toggle-buttons-wrapper.size-10 {
            grid-template-columns: repeat(10, 1fr);
        }

.component-toggler .toggle-buttons-wrapper.size-10::before {
                width: calc(100% / 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 {
        position: relative;
        flex-basis: 100%;
        height: 100%;
        background: none;
        border: none;
        padding: 0.75rem 1.75rem 1rem;
        font-size: 1rem;
        line-height: 1;
        color: inherit;
        cursor: pointer;
        transition: color 300ms ease;
    }

.component-toggler .toggler-btn.active {
            color: white;
        }

[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;
        }
}