:root, ::before, ::after {
--twowayscheckbox-size: 1em;
--twowayscheckbox-margin: 1em;
--twowayscheckbox-border-width: 1px;
--twowayscheckbox-overlap: 0px;
--twowayscheckbox-exclusive: calc(var(--twowayscheckbox-margin) + var(--twowayscheckbox-border-width) + var(--twowayscheckbox-size) - var(--twowayscheckbox-overlap));

--twowayscheckbox-left-color: var(--dark);
--twowayscheckbox-right-color: var(--dark);
--twowayscheckbox-left-border-color: var(--gray-light);
--twowayscheckbox-right-border-color: var(--primary);
--twowayscheckbox-left-bg-color: var(--white);
--twowayscheckbox-right-bg-color: var(--primary);
--twowayscheckbox-left-dot-color: var(--gray-light);
--twowayscheckbox-right-dot-color: var(--white);

--twowayscheckbox-left-color-hover: var(--twowayscheckbox-left-color);
--twowayscheckbox-right-color-hover: var(--twowayscheckbox-right-color);
--twowayscheckbox-left-border-color-hover: var(--twowayscheckbox-left-border-color);
--twowayscheckbox-right-border-color-hover: var(--twowayscheckbox-right-border-color);
--twowayscheckbox-left-bg-color-hover: var(--twowayscheckbox-left-bg-color);
--twowayscheckbox-right-bg-color-hover: var(--twowayscheckbox-right-bg-color);
--twowayscheckbox-left-dot-color-hover: var(--twowayscheckbox-left-dot-color);
--twowayscheckbox-right-dot-color-hover: var(--twowayscheckbox-right-dot-color);

--twowayscheckbox-left-color-active: var(--twowayscheckbox-left-color);
--twowayscheckbox-right-color-active: var(--twowayscheckbox-right-color);
--twowayscheckbox-left-border-color-active: var(--secondary);
--twowayscheckbox-right-border-color-active: var(--secondary);
--twowayscheckbox-left-bg-color-active: var(--secondary);
--twowayscheckbox-right-bg-color-active: var(--secondary);
--twowayscheckbox-left-dot-color-active: var(--twowayscheckbox-left-dot-color);
--twowayscheckbox-right-dot-color-active: var(--twowayscheckbox-right-dot-color);

--twowayscheckbox-left-color-disabled: var(--gray-light);
--twowayscheckbox-right-color-disabled: var(--gray-light);
--twowayscheckbox-left-border-color-disabled: var(--light);
--twowayscheckbox-right-border-color-disabled: var(--light);
--twowayscheckbox-left-bg-color-disabled: var(--white);
--twowayscheckbox-right-bg-color-disabled: var(--light);
--twowayscheckbox-left-dot-color-disabled: var(--light);
--twowayscheckbox-right-dot-color-disabled: var(--white);
}
.twowayscheckbox-overlap-small, .twowayscheckbox-overlap-small::before, .twowayscheckbox-overlap-small::after {
--twowayscheckbox-overlap: calc(var(--twowayscheckbox-margin) + var(--twowayscheckbox-border-width));
}
.twowayscheckbox-overlap-medium, .twowayscheckbox-overlap-medium::before, .twowayscheckbox-overlap-medium::after {
--twowayscheckbox-overlap: calc(var(--twowayscheckbox-margin) / 2 + var(--twowayscheckbox-border-width) + var(--twowayscheckbox-size));
}
.twowayscheckbox-overlap-large, .twowayscheckbox-overlap-large::before, .twowayscheckbox-overlap-large::after {
--twowayscheckbox-overlap: calc(var(--twowayscheckbox-margin) + var(--twowayscheckbox-border-width) + var(--twowayscheckbox-size));
}

/* POSITIONNING */
.twowayscheckbox-wrapper {
display: inline-flex;
flex-direction: row;
}
.twowayscheckbox-left, .twowayscheckbox-right {
position: relative;
z-index: 0;
margin: 0;
padding: 0;
cursor: pointer;
}
.twowayscheckbox-left {
padding-right: calc(var(--twowayscheckbox-margin) + var(--twowayscheckbox-border-width) + var(--twowayscheckbox-size));
text-align: right;
transition: padding-right 0.15s ease-in-out;
}
.twowayscheckbox-right {
margin-left: 0;
padding-left: calc(var(--twowayscheckbox-margin) + var(--twowayscheckbox-border-width) + var(--twowayscheckbox-size));
text-align: left;
transition: margin-left 0.15s ease-in-out, padding-left 0.15s ease-in-out;
}
.twowayscheckbox-left::before, .twowayscheckbox-left::after {
content: '';
position: absolute;
z-index: 1;
display: block;
pointer-events: none;
transition: right 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.twowayscheckbox-left::before {
top: 50%;
right: calc(-1 * (var(--twowayscheckbox-size) + var(--twowayscheckbox-border-width)));
width: calc(2 * (var(--twowayscheckbox-size) + var(--twowayscheckbox-border-width)));
height: calc(var(--twowayscheckbox-size) + 2 * var(--twowayscheckbox-border-width));
border-width: var(--twowayscheckbox-border-width);
border-style: solid;
border-radius: calc(var(--twowayscheckbox-size) / 2 + var(--twowayscheckbox-border-width));
transform: translateY(-50%);
}
.twowayscheckbox-left::after {
top: 50%;
right: calc(var(--twowayscheckbox-size) / -2);
width: var(--twowayscheckbox-size);
height: var(--twowayscheckbox-size);
border-radius: calc(var(--twowayscheckbox-size) / 2);
transform: translateY(-50%);
}
.twowayscheckbox-left-radio:checked + input + div .twowayscheckbox-left, .twowayscheckbox-right-radio:checked + div .twowayscheckbox-left {
padding-right: calc(var(--twowayscheckbox-exclusive) + var(--twowayscheckbox-overlap));
}
.twowayscheckbox-left-radio:checked + input + div .twowayscheckbox-right, .twowayscheckbox-right-radio:checked + div .twowayscheckbox-right {
margin-left: calc(-2 * var(--twowayscheckbox-overlap));
padding-left: calc(var(--twowayscheckbox-exclusive) + var(--twowayscheckbox-overlap));
}
.twowayscheckbox-left-radio:checked + input + div .twowayscheckbox-left::before, .twowayscheckbox-right-radio:checked + div .twowayscheckbox-left::before {
right: calc(var(--twowayscheckbox-overlap) - var(--twowayscheckbox-size) - var(--twowayscheckbox-border-width));
}
.twowayscheckbox-left-radio:checked + input + div .twowayscheckbox-left::after, .twowayscheckbox-right-radio:checked + div .twowayscheckbox-left::after {
right: calc(var(--twowayscheckbox-overlap) - var(--twowayscheckbox-size) / 2);
}
.twowayscheckbox-left-radio:checked + input + div .twowayscheckbox-right, .twowayscheckbox-right-radio:checked + div .twowayscheckbox-left {
z-index: 1;
}
.twowayscheckbox-left-radio:checked + input + div .twowayscheckbox-left::after {
right: var(--twowayscheckbox-overlap);
}
.twowayscheckbox-right-radio:checked + div .twowayscheckbox-left::after {
right: calc(var(--twowayscheckbox-overlap) - var(--twowayscheckbox-size));
}

/* NORMAL COLORS */
.twowayscheckbox-left {
color: var(--twowayscheckbox-left-color);
}
.twowayscheckbox-right {
color: var(--twowayscheckbox-right-color);
}
.twowayscheckbox-left::before {
border-color: var(--twowayscheckbox-left-border-color);
background-color: var(--twowayscheckbox-left-bg-color);
}
.twowayscheckbox-left::after {
background-color: var(--twowayscheckbox-left-dot-color);
}
.twowayscheckbox-right-radio:checked + div .twowayscheckbox-left::before {
border-color: var(--twowayscheckbox-right-border-color);
background-color: var(--twowayscheckbox-right-bg-color);
}
.twowayscheckbox-right-radio:checked + div .twowayscheckbox-left::after {
background-color: var(--twowayscheckbox-right-dot-color);
}

/* HOVER COLORS */
.twowayscheckbox-wrapper:hover .twowayscheckbox-left {
color: var(--twowayscheckbox-left-color-hover);
}
.twowayscheckbox-wrapper:hover .twowayscheckbox-right {
color: var(--twowayscheckbox-right-color-hover);
}
.twowayscheckbox-wrapper:hover .twowayscheckbox-left::before {
border-color: var(--twowayscheckbox-left-border-color-hover);
background-color: var(--twowayscheckbox-left-bg-color-hover);
}
.twowayscheckbox-wrapper:hover .twowayscheckbox-left::after {
background-color: var(--twowayscheckbox-left-dot-color-hover);
}
.twowayscheckbox-wrapper:hover .twowayscheckbox-right-radio:checked + div .twowayscheckbox-left::before {
border-color: var(--twowayscheckbox-right-border-color-hover);
background-color: var(--twowayscheckbox-right-bg-color-hover);
}
.twowayscheckbox-wrapper:hover .twowayscheckbox-right-radio:checked + div .twowayscheckbox-left::after {
background-color: var(--twowayscheckbox-right-dot-color-hover);
}

/* ACTIVE COLORS */
.twowayscheckbox-left-radio:focus + input + div .twowayscheckbox-left, .twowayscheckbox-left-radio:active + input + div .twowayscheckbox-left {
color: var(--twowayscheckbox-left-color-active);
}
.twowayscheckbox-right-radio:focus + div .twowayscheckbox-right, .twowayscheckbox-right-radio:active + div .twowayscheckbox-right {
color: var(--twowayscheckbox-right-color-active);
}
.twowayscheckbox-left-radio:focus + input + div .twowayscheckbox-left::before, .twowayscheckbox-left-radio:active + input + div .twowayscheckbox-left::before, .twowayscheckbox-right-radio:focus + div .twowayscheckbox-left::before, .twowayscheckbox-right-radio:active + div .twowayscheckbox-left::before {
border-color: var(--twowayscheckbox-left-border-color-active);
background-color: var(--twowayscheckbox-left-bg-color-active);
}
.twowayscheckbox-left-radio:focus + input + div .twowayscheckbox-left::after, .twowayscheckbox-left-radio:active + input + div .twowayscheckbox-left::after, .twowayscheckbox-right-radio:focus + div .twowayscheckbox-left::after, .twowayscheckbox-right-radio:active + div .twowayscheckbox-left::after {
background-color: var(--twowayscheckbox-left-dot-color-active);
}
.twowayscheckbox-left-radio:checked:focus + input + div .twowayscheckbox-left::before, .twowayscheckbox-left-radio:checked:active + input + div .twowayscheckbox-left::before, .twowayscheckbox-right-radio:checked:focus + div .twowayscheckbox-left::before, .twowayscheckbox-right-radio:checked:active + div .twowayscheckbox-left::before {
border-color: var(--twowayscheckbox-right-border-color-active);
background-color: var(--twowayscheckbox-right-bg-color-active);
}
.twowayscheckbox-left-radio:checked:focus + input + div .twowayscheckbox-left::after, .twowayscheckbox-left-radio:checked:active + input + div .twowayscheckbox-left::after, .twowayscheckbox-right-radio:checked:focus + div .twowayscheckbox-left::after, .twowayscheckbox-right-radio:checked:active + div .twowayscheckbox-left::after {
background-color: var(--twowayscheckbox-right-dot-color-active);
}

/* DISABLED COLORS */
.twowayscheckbox-right-radio:disabled + div .twowayscheckbox-left {
color: var(--twowayscheckbox-left-color-disabled);
}
.twowayscheckbox-right-radio:disabled + div .twowayscheckbox-right {
color: var(--twowayscheckbox-right-color-disabled);
}
.twowayscheckbox-right-radio:disabled + div .twowayscheckbox-left::before {
border-color: var(--twowayscheckbox-left-border-color-disabled);
background-color: var(--twowayscheckbox-left-bg-color-disabled);
}
.twowayscheckbox-right-radio:disabled + div .twowayscheckbox-left::after {
background-color: var(--twowayscheckbox-left-dot-color-disabled);
}
.twowayscheckbox-right-radio:disabled + div .twowayscheckbox-right-radio:checked + div .twowayscheckbox-left::before {
border-color: var(--twowayscheckbox-right-border-color-disabled);
background-color: var(--twowayscheckbox-right-bg-color-disabled);
}
.twowayscheckbox-right-radio:disabled + div .twowayscheckbox-right-radio:checked + div .twowayscheckbox-left::after {
background-color: var(--twowayscheckbox-right-dot-color-disabled);
}