44 lines
653 B
SCSS
44 lines
653 B
SCSS
.root {
|
|
display: flex;
|
|
gap: 16px;
|
|
cursor: pointer;
|
|
width: fit-content;
|
|
|
|
.disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.switch-container {
|
|
position: relative;
|
|
width: 46px;
|
|
height: 24px;
|
|
background-color: var(--color-neutral-200);
|
|
border-radius: 64px;
|
|
|
|
transition: all 200ms ease-in-out;
|
|
&[data-checked="true"] {
|
|
background-color: var(--color-secondary-500);
|
|
|
|
.round {
|
|
left: 24px;
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
display: none;
|
|
}
|
|
|
|
.round {
|
|
transition: all 200ms ease-in-out;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 100px;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
background: white;
|
|
}
|
|
}
|
|
}
|