.switch{display:inline-flex;position:relative;border-radius:12px;background-color:var(--color-grey-700);color:var(--color-grey-300);padding:3px;overflow:hidden;margin-bottom:1rem;max-width:-moz-fit-content;max-width:fit-content}.switch:last-child{margin-bottom:0}.switch .options{display:flex;position:relative;z-index:1}.switch .options .option{flex:1 1;display:flex;align-items:center;justify-content:center;padding:.25rem 1.25rem;border-radius:12px;overflow:hidden;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.switch .options .option svg *{fill:var(--color-grey-300)!important;stroke:var(--color-grey-300)!important}.switch .options.has-icon .option{padding:.5rem .75rem}.switch .options .option.selected{font-weight:400;color:var(--color-grey-700)}.switch .options .option.selected svg *{fill:var(--color-grey-700)!important;stroke:var(--color-grey-700)!important}.switch .slide{position:absolute;border-radius:9px;overflow:hidden;background-color:#fff;box-shadow:0 0 6px rgba(0,0,0,.1);transition:width .3s var(--transition-timing-function),left .3s var(--transition-timing-function)}[data-mode=dark] .switch .slide{background-color:var(--color-grey-300)}