.twowayscheckbox-wrapper {
/* POSITIONNING/DIMENSIONNING */
--twowayscheckbox-size: 1em;
--twowayscheckbox-margin: 1em;
--twowayscheckbox-border-width: 1px;
--twowayscheckbox-overlap: 0px;

/* NORMAL COLORS */
--twowayscheckbox-default-color: var(--dark);
--twowayscheckbox-default-border-color: var(--gray-light);
--twowayscheckbox-default-bg-color: var(--gray-light);
--twowayscheckbox-default-dot-color: var(--white);
--twowayscheckbox-left-color: var(--twowayscheckbox-default-color);
--twowayscheckbox-left-border-color: var(--gray-light);
--twowayscheckbox-left-bg-color: var(--white);
--twowayscheckbox-left-dot-color: var(--gray-light);
--twowayscheckbox-right-color: var(--twowayscheckbox-default-color);
--twowayscheckbox-right-border-color: var(--primary);
--twowayscheckbox-right-bg-color: var(--primary);
--twowayscheckbox-right-dot-color: var(--white);

/* ACTIVE COLORS */
--twowayscheckbox-default-border-color-active: var(--twowayscheckbox-default-border-color);
--twowayscheckbox-default-bg-color-active: var(--twowayscheckbox-default-bg-color);
--twowayscheckbox-default-dot-color-active: var(--twowayscheckbox-default-dot-color);
--twowayscheckbox-left-color-active: var(--twowayscheckbox-left-color);
--twowayscheckbox-left-border-color-active: var(--secondary);
--twowayscheckbox-left-bg-color-active: var(--secondary);
--twowayscheckbox-left-dot-color-active: var(--twowayscheckbox-left-dot-color);
--twowayscheckbox-right-color-active: var(--twowayscheckbox-right-color);
--twowayscheckbox-right-border-color-active: var(--secondary);
--twowayscheckbox-right-bg-color-active: var(--secondary);
--twowayscheckbox-right-dot-color-active: var(--twowayscheckbox-right-dot-color);

/* HOVER COLORS */
--twowayscheckbox-default-border-color-hover: var(--twowayscheckbox-default-border-color);
--twowayscheckbox-default-bg-color-hover: var(--twowayscheckbox-default-bg-color);
--twowayscheckbox-default-dot-color-hover: var(--twowayscheckbox-default-dot-color);
--twowayscheckbox-left-color-hover: var(--twowayscheckbox-left-color);
--twowayscheckbox-left-border-color-hover: var(--twowayscheckbox-left-border-color);
--twowayscheckbox-left-bg-color-hover: var(--twowayscheckbox-left-bg-color);
--twowayscheckbox-left-dot-color-hover: var(--twowayscheckbox-left-dot-color);
--twowayscheckbox-right-color-hover: var(--twowayscheckbox-right-color);
--twowayscheckbox-right-border-color-hover: var(--twowayscheckbox-right-border-color);
--twowayscheckbox-right-bg-color-hover: var(--twowayscheckbox-right-bg-color);
--twowayscheckbox-right-dot-color-hover: var(--twowayscheckbox-right-dot-color);

/* DISABLED COLORS */
--twowayscheckbox-default-border-color-disabled: var(--light);
--twowayscheckbox-default-bg-color-disabled: var(--light);
--twowayscheckbox-default-dot-color-disabled: var(--gray-light);
--twowayscheckbox-left-color-disabled: var(--gray-light);
--twowayscheckbox-left-border-color-disabled: var(--light);
--twowayscheckbox-left-bg-color-disabled: var(--white);
--twowayscheckbox-left-dot-color-disabled: var(--light);
--twowayscheckbox-right-color-disabled: var(--gray-light);
--twowayscheckbox-right-border-color-disabled: var(--light);
--twowayscheckbox-right-bg-color-disabled: var(--light);
--twowayscheckbox-right-dot-color-disabled: var(--white);
}

.twowayscheckbox-overlap-marginonly {
--twowayscheckbox-overlap: var(--twowayscheckbox-margin);
}
.twowayscheckbox-overlap-middle {
--twowayscheckbox-overlap: calc(var(--twowayscheckbox-margin) + var(--twowayscheckbox-border-width) + var(--twowayscheckbox-size));
}
.twowayscheckbox-overlap-fullcheckbox {
--twowayscheckbox-overlap: calc(var(--twowayscheckbox-margin) + 2 * (var(--twowayscheckbox-border-width) + var(--twowayscheckbox-size)));
}
.twowayscheckbox-overlap-extra {
--twowayscheckbox-overlap: calc(2 * (var(--twowayscheckbox-margin) + var(--twowayscheckbox-border-width) + var(--twowayscheckbox-size)));
}

/* POSITIONNING/DIMENSIONNING */
.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 {
margin-right: calc(-1 * var(--twowayscheckbox-overlap));
padding-right: var(--twowayscheckbox-overlap);
text-align: right;
}
.twowayscheckbox-right {
margin-left: calc(-1 * var(--twowayscheckbox-overlap));
padding-left: var(--twowayscheckbox-overlap);
text-align: left;
}
.twowayscheckbox-box {
z-index: 2;
align-self: center;
width: calc(2 * (var(--twowayscheckbox-size) + var(--twowayscheckbox-border-width)));
height: calc(var(--twowayscheckbox-size) + 2 * var(--twowayscheckbox-border-width));
margin: 0 var(--twowayscheckbox-margin);
border-width: var(--twowayscheckbox-border-width);
border-style: solid;
border-radius: calc(var(--twowayscheckbox-size) / 2 + var(--twowayscheckbox-border-width));
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.twowayscheckbox-overlap-middle .twowayscheckbox-box, .twowayscheckbox-overlap-fullcheckbox .twowayscheckbox-box, .twowayscheckbox-overlap-extra .twowayscheckbox-box {
pointer-events: none;
}
.twowayscheckbox-dot {
display: block;
width: var(--twowayscheckbox-size);
height: var(--twowayscheckbox-size);
margin-left: calc(var(--twowayscheckbox-size) / 2);
border-radius: calc(var(--twowayscheckbox-size) / 2);
background-color: var(--twowayscheckbox-default-dot-color);
transition: margin-left 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.twowayscheckbox-left-radio:checked ~ div .twowayscheckbox-right, .twowayscheckbox-right-radio:checked ~ div .twowayscheckbox-left {
z-index: 1;
}
.twowayscheckbox-left-radio:checked ~ div .twowayscheckbox-dot {
margin-left: 0;
}
.twowayscheckbox-right-radio:checked ~ div .twowayscheckbox-dot {
margin-left: var(--twowayscheckbox-size);
}

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

/* ACTIVE COLORS */
.twowayscheckbox-left-radio:not(:disabled):focus ~ div .twowayscheckbox-left, .twowayscheckbox-left-radio:active ~ div .twowayscheckbox-left {
color: var(--twowayscheckbox-left-color-active);
}
.twowayscheckbox-right-radio:not(:disabled):focus ~ div .twowayscheckbox-right, .twowayscheckbox-right-radio:active ~ div .twowayscheckbox-right {
color: var(--twowayscheckbox-right-color-active);
}
.twowayscheckbox-left-radio:not(:disabled):focus ~ div .twowayscheckbox-box, .twowayscheckbox-left-radio:active ~ div .twowayscheckbox-box, .twowayscheckbox-right-radio:focus ~ div .twowayscheckbox-box, .twowayscheckbox-right-radio:active ~ div .twowayscheckbox-box {
border-color: var(--twowayscheckbox-default-border-color-active);
background-color: var(--twowayscheckbox-default-bg-color-active);
}
.twowayscheckbox-left-radio:not(:disabled):focus ~ div .twowayscheckbox-dot, .twowayscheckbox-left-radio:active ~ div .twowayscheckbox-dot, .twowayscheckbox-right-radio:focus ~ div .twowayscheckbox-dot, .twowayscheckbox-right-radio:active ~ div .twowayscheckbox-dot {
background-color: var(--twowayscheckbox-default-dot-color-active);
}
.twowayscheckbox-left-radio:not(:disabled):checked:focus ~ div .twowayscheckbox-box, .twowayscheckbox-left-radio:checked:active ~ div .twowayscheckbox-box {
border-color: var(--twowayscheckbox-left-border-color-active);
background-color: var(--twowayscheckbox-left-bg-color-active);
}
.twowayscheckbox-left-radio:not(:disabled):checked:focus ~ div .twowayscheckbox-dot, .twowayscheckbox-left-radio:checked:active ~ div .twowayscheckbox-dot {
background-color: var(--twowayscheckbox-left-dot-color-active);
}
.twowayscheckbox-right-radio:not(:disabled):checked:focus ~ div .twowayscheckbox-box, .twowayscheckbox-right-radio:checked:active ~ div .twowayscheckbox-box {
border-color: var(--twowayscheckbox-right-border-color-active);
background-color: var(--twowayscheckbox-right-bg-color-active);
}
.twowayscheckbox-right-radio:not(:disabled):checked:focus ~ div .twowayscheckbox-dot, .twowayscheckbox-right-radio:checked:active ~ div .twowayscheckbox-dot {
background-color: var(--twowayscheckbox-right-dot-color-active);
}

/* HOVER COLORS */
.twowayscheckbox-center-radio:not(:disabled) ~ .twowayscheckbox-wrapper:hover .twowayscheckbox-left, .twowayscheckbox-center-radio:not(:disabled) ~ div .twowayscheckbox-wrapper:hover .twowayscheckbox-left {
color: var(--twowayscheckbox-left-color-hover);
}
.twowayscheckbox-center-radio:not(:disabled) ~ .twowayscheckbox-wrapper:hover .twowayscheckbox-right, .twowayscheckbox-center-radio:not(:disabled) ~ div .twowayscheckbox-wrapper:hover .twowayscheckbox-right {
color: var(--twowayscheckbox-right-color-hover);
}
.twowayscheckbox-center-radio:not(:disabled) ~ .twowayscheckbox-wrapper:hover .twowayscheckbox-box, .twowayscheckbox-center-radio:not(:disabled) ~ div .twowayscheckbox-wrapper:hover .twowayscheckbox-box {
border-color: var(--twowayscheckbox-default-border-color-hover);
background-color: var(--twowayscheckbox-default-bg-color-hover);
}
.twowayscheckbox-center-radio:not(:disabled) ~ .twowayscheckbox-wrapper:hover .twowayscheckbox-dot, .twowayscheckbox-center-radio:not(:disabled) ~ div .twowayscheckbox-wrapper:hover .twowayscheckbox-dot {
background-color: var(--twowayscheckbox-default-dot-color-hover);
}
.twowayscheckbox-left-radio:not(:disabled):checked ~ .twowayscheckbox-wrapper:hover .twowayscheckbox-box, .twowayscheckbox-left-radio:not(:disabled):checked ~ div .twowayscheckbox-wrapper:hover .twowayscheckbox-box {
border-color: var(--twowayscheckbox-left-border-color-hover);
background-color: var(--twowayscheckbox-left-bg-color-hover);
}
.twowayscheckbox-left-radio:not(:disabled):checked ~ .twowayscheckbox-wrapper:hover .twowayscheckbox-dot, .twowayscheckbox-left-radio:not(:disabled):checked ~ div .twowayscheckbox-wrapper:hover .twowayscheckbox-dot {
background-color: var(--twowayscheckbox-left-dot-color-hover);
}
.twowayscheckbox-right-radio:not(:disabled):checked ~ .twowayscheckbox-wrapper:hover .twowayscheckbox-box, .twowayscheckbox-right-radio:not(:disabled):checked ~ div .twowayscheckbox-wrapper:hover .twowayscheckbox-box {
border-color: var(--twowayscheckbox-right-border-color-hover);
background-color: var(--twowayscheckbox-right-bg-color-hover);
}
.twowayscheckbox-right-radio:not(:disabled):checked ~ .twowayscheckbox-wrapper:hover .twowayscheckbox-dot, .twowayscheckbox-right-radio:not(:disabled):checked ~ div .twowayscheckbox-wrapper:hover .twowayscheckbox-dot {
background-color: var(--twowayscheckbox-right-dot-color-hover);
}

/* DISABLED COLORS */
.twowayscheckbox-center-radio:disabled ~ div .twowayscheckbox-left {
color: var(--twowayscheckbox-left-color-disabled);
}
.twowayscheckbox-center-radio:disabled ~ div .twowayscheckbox-right {
color: var(--twowayscheckbox-right-color-disabled);
}
.twowayscheckbox-center-radio:disabled ~ div .twowayscheckbox-box {
border-color: var(--twowayscheckbox-default-border-color-disabled);
background-color: var(--twowayscheckbox-default-bg-color-disabled);
}
.twowayscheckbox-center-radio:disabled ~ div .twowayscheckbox-dot {
background-color: var(--twowayscheckbox-default-dot-color-disabled);
}
.twowayscheckbox-left-radio:disabled:checked ~ div .twowayscheckbox-box, .twowayscheckbox-right-radio:disabled:checked ~ div .twowayscheckbox-box {
border-color: var(--twowayscheckbox-right-border-color-disabled);
background-color: var(--twowayscheckbox-right-bg-color-disabled);
}
.twowayscheckbox-left-radio:disabled:checked ~ div .twowayscheckbox-dot, .twowayscheckbox-right-radio:disabled:checked ~ div .twowayscheckbox-dot {
background-color: var(--twowayscheckbox-right-dot-color-disabled);
}