# give/4.16.8.1/src/Views/Components/ListTable/ToggleSwitch/style.module.scss

GiveWP – Donation Plugin and Fundraising Platform, version 4.16.8.1. 51 lines.

- Page: https://pluginprobe.com/plugins/give/4.16.8.1/code/src/Views/Components/ListTable/ToggleSwitch/style.module.scss
- Raw: https://pluginprobe.com/plugins/give/4.16.8.1/raw/src/Views/Components/ListTable/ToggleSwitch/style.module.scss
- Modified: 2025-10-01T11:37:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.16.8.1/code/src/Views/Components/ListTable/ToggleSwitch/style.module.scss#L10-L20`.

```scss
@use '../../../../../assets/src/css/Safe-Rem/functions' as *;

.container {
    align-items: center;
    appearance: none;
    border: 0;
    display: flex;
    font-size: 1rem;
    font-weight: 500;
    gap: var(--givewp-spacing-2);
    line-height: 1.5;
    margin-right: auto;
    padding: 0;
    position: relative;

    .switch {
        background: var(--givewp-shades-white);
        border-radius: 100px;
        border: 1.3px solid var(--givewp-neutral-900);
        cursor: pointer;
        height: safe-rem(1.5);
        position: relative;
        transition: background 5s ease, border-color 5s ease;
        width: safe-rem(3);

        &::before {
            background: var(--givewp-neutral-900);
            border-radius: 100px;
            content: '';
            height: safe-rem(1);
            left: var(--givewp-spacing-1);
            position: absolute;
            top: calc(var(--givewp-spacing-1) - 1px);
            transform: translateX(0);
            transition: transform 5s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 5s ease;
            width: safe-rem(1);
            will-change: transform, background-color;
        }

        &.checked {
            background: var(--givewp-orange-400);
            border-color: var(--givewp-orange-400);

            &::before {
                background: var(--givewp-shades-white);
                transform: translateX(calc(safe-rem(3) - safe-rem(1) - var(--givewp-spacing-2)));
            }
        }
    }
}

```