import React from 'react';
import styled from 'styled-components';

const Switch = () => {
return (
<StyledWrapper>
<label className="bb8-toggle">
<input className="bb8-toggle__checkbox" type="checkbox" />
<div className="bb8-toggle__container">
<div className="bb8-toggle__scenery">
<div className="bb8-toggle__star" />
<div className="bb8-toggle__star" />
<div className="bb8-toggle__star" />
<div className="bb8-toggle__star" />
<div className="bb8-toggle__star" />
<div className="bb8-toggle__star" />
<div className="bb8-toggle__star" />
<div className="tatto-1" />
<div className="tatto-2" />
<div className="gomrassen" />
<div className="hermes" />
<div className="chenini" />
<div className="bb8-toggle__cloud" />
<div className="bb8-toggle__cloud" />
<div className="bb8-toggle__cloud" />
</div>
<div className="bb8">
<div className="bb8__head-container">
<div className="bb8__antenna" />
<div className="bb8__antenna" />
<div className="bb8__head" />
</div>
<div className="bb8__body" />
</div>
<div className="artificial__hidden">
<div className="bb8__shadow" />
</div>
</div>
</label>
</StyledWrapper>
);
}
const StyledWrapper = styled.div`
.bb8-toggle {
--toggle-size: 16px;
--toggle-width: 10.625em;
--toggle-height: 5.625em;
--toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
--toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4)
no-repeat;
--bb8-diameter: 4.375em;
--radius: 99em;
--transition: 0.4s;
--accent: #de7d2f;
--bb8-bg: #fff;
}

.bb8-toggle,
.bb8-toggle *,
.bb8-toggle *::before,
.bb8-toggle *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.bb8-toggle {
cursor: pointer;
margin-top: var(--margin-top-for-head);
font-size: var(--toggle-size);
}

.bb8-toggle__checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: none;
}

.bb8-toggle__container {
width: var(--toggle-width);
height: var(--toggle-height);
background: var(--toggle-bg);
background-size: 100% 11.25em;
background-position-y: -5.625em;
border-radius: var(--radius);
position: relative;
-webkit-transition: var(--transition);
-o-transition: var(--transition);
transition: var(--transition);
}

.bb8 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: calc(var(--toggle-offset) - 1.688em + 0.188em);
left: var(--toggle-offset);
-webkit-transition: var(--transition);
-o-transition: var(--transition);
transition: var(--transition);
z-index: 2;
}

.bb8__head-container {
position: relative;
-webkit-transition: var(--transition);
-o-transition: var(--transition);
transition: var(--transition);
z-index: 2;
-webkit-transform-origin: 1.25em 3.75em;
-ms-transform-origin: 1.25em 3.75em;
transform-origin: 1.25em 3.75em;
}

.bb8__head {
overflow: hidden;
margin-bottom: -0.188em;
width: 2.5em;
height: 1.688em;
background: -o-linear-gradient(
transparent 0.063em,
dimgray 0.063em 0.313em,
transparent 0.313em 0.375em,

Обновление проекта Правда или действие 😦

Ссылка на игру

Исходный код