$eve-switch-width: 2.25rem;
$eve-switch-height: 1.125rem;

.eve-switch {
    align-items: center;
    display: inline-flex;
    position: relative;
    vertical-align: middle;

    input {
        &[type='checkbox'] {
            cursor: pointer;
            height: $eve-switch-height;
            left: 0;
            margin: 0;
            opacity: 0;
            padding: 0;
            position: absolute;
            width: $eve-switch-width;

            &:checked ~ i {
                background: $eve-color-green;
                justify-content: flex-end;
            }

            &:disabled {
                pointer-events: none;

                & ~ i {
                    opacity: .5;
                }
            }
        }
    }

    i {
        align-items: center;
        background: $eve-color-darker-silver;
        border-radius: $eve-switch-height / 2;
        display: flex;
        flex-shrink: 0;
        height: $eve-switch-height;
        justify-content: flex-start;
        padding: $eve-spacing-2;
        pointer-events: none;
        width: $eve-switch-width;

        &::after {
            background: $eve-color-white;
            border-radius: 50%;
            content: '';
            height: 100%;
            width: $eve-switch-height - .25rem;
        }
    }
}