/**
 * Size variants
 */

.toggle {
    &.-sm {
        --toggle--width: var(--toggle--sm--width, calc(40px * var(--size-multiplier-sm)));
        --toggle--height: var(--toggle--sm--height, calc(20px * var(--size-multiplier-sm)));
        --toggle--border-top-left-radius: var(
            --toggle--sm--border-top-left-radius,
            calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
        );
        --toggle--border-top-right-radius: var(
            --toggle--sm--border-top-right-radius,
            calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
        );
        --toggle--border-bottom-right-radius: var(
            --toggle--sm--border-bottom-right-radius,
            calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
        );
        --toggle--border-bottom-left-radius: var(
            --toggle--sm--border-bottom-left-radius,
            calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
        );
        --toggle--indicator--width: var(
            --toggle--sm--indicator--width,
            calc(16px * var(--size-multiplier-sm))
        );
        --toggle--indicator--height: var(
            --toggle--sm--indicator--height,
            calc(16px * var(--size-multiplier-sm))
        );
        --toggle--label--font-size: var(
            --toggle--sm--label--font-size,
            calc(var(--font-size) * var(--size-multiplier-sm))
        );
    }

    &.-md {
        --toggle--width: var(--toggle--md--width, calc(40px * var(--size-multiplier-md)));
        --toggle--height: var(--toggle--md--height, calc(20px * var(--size-multiplier-md)));
        --toggle--border-top-left-radius: var(
            --toggle--md--border-top-left-radius,
            calc(var(--border-top-left-radius) * var(--size-multiplier-md))
        );
        --toggle--border-top-right-radius: var(
            --toggle--md--border-top-right-radius,
            calc(var(--border-top-right-radius) * var(--size-multiplier-md))
        );
        --toggle--border-bottom-right-radius: var(
            --toggle--md--border-bottom-right-radius,
            calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
        );
        --toggle--border-bottom-left-radius: var(
            --toggle--md--border-bottom-left-radius,
            calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
        );
        --toggle--indicator--width: var(
            --toggle--md--indicator--width,
            calc(16px * var(--size-multiplier-md))
        );
        --toggle--indicator--height: var(
            --toggle--md--indicator--height,
            calc(16px * var(--size-multiplier-md))
        );
        --toggle--label--font-size: var(
            --toggle--md--label--font-size,
            calc(var(--font-size) * var(--size-multiplier-md))
        );
    }

    &.-lg {
        --toggle--width: var(--toggle--lg--width, calc(40px * var(--size-multiplier-lg)));
        --toggle--height: var(--toggle--lg--height, calc(20px * var(--size-multiplier-lg)));
        --toggle--border-top-left-radius: var(
            --toggle--lg--border-top-left-radius,
            calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
        );
        --toggle--border-top-right-radius: var(
            --toggle--lg--border-top-right-radius,
            calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
        );
        --toggle--border-bottom-right-radius: var(
            --toggle--lg--border-bottom-right-radius,
            calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
        );
        --toggle--border-bottom-left-radius: var(
            --toggle--lg--border-bottom-left-radius,
            calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
        );
        --toggle--indicator--width: var(
            --toggle--lg--indicator--width,
            calc(16px * var(--size-multiplier-lg))
        );
        --toggle--indicator--height: var(
            --toggle--lg--indicator--height,
            calc(16px * var(--size-multiplier-lg))
        );
        --toggle--label--font-size: var(
            --toggle--lg--label--font-size,
            calc(var(--font-size) * var(--size-multiplier-lg))
        );
    }
}