// TODO: Allow different out-of-the-box color styles.

leptonic-toggle-wrapper {
    --height: 1.75em;
    --width: calc(var(--height) * 2.0);
    --transition: 0.3s;

    --knob-size: 1.5em;
    --knob-spacing: calc((var(--height) - var(--knob-size)) / 2.0);

    display: inline-flex;
    flex-direction: row;
    user-select: none;

    leptonic-icon {
        margin: 0;
        font-size: 1.2em;
        color: var(--toggle-icon-color);
    }

    leptonic-toggle {
        display: inline-flex;
        height: var(--height);

        &[data-variant="sliding"] {
            width: var(--width);
        }
        &[data-variant="stationary"] {
            width: var(--height);
        }

        .slider {
            position: relative;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            width: 100%;
            height: 100%;
            background-color: var(--toggle-slider-off-background-color);
            transition: var(--transition);

            .icon-positioner {
                position: absolute;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: var(--height);
                transition: var(--transition);
            }
        }

        .slider:before {
            content: "";
            height: var(--knob-size);
            width: var(--knob-size);
            margin-left: var(--knob-spacing);
            background-color: var(--toggle-knob-background-color);
            transition: var(--transition);
        }

        .slider.on {
            background-color: var(--toggle-slider-on-background-color);
        }

        .slider:focus {
            box-shadow: 0 0 0.1em var(--brand-color);
        }

        &[data-variant="sliding"] {
            .slider.on {
                &:before,
                .icon-positioner {
                    transform: translateX(calc(var(--width) / 2.0));
                }
            }
        }

        .slider.round {
            border-radius: 2em;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    }
}