.component--theme-switch{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;background-color:transparent;outline:0;cursor:pointer;user-select:none;text-decoration:none;color:white;min-width:32px;padding:5px 7px;border-radius:4px;border:.5px dashed transparent;transition:all .25s ease}.component--theme-switch:active,.component--theme-switch:focus{border-color:var(--canvas-900);outline:none;border-style:solid;border-width:1.5px;border-radius:4px}.dark .component--theme-switch:active,.dark .component--theme-switch:focus{border-color:var(--canvas-200)}.component--theme-switch .light,.component--theme-switch .moon{transition:opacity .2s ease-in-out;position:absolute;margin:0;padding:0;width:24px;height:24px}.component--theme-switch .moon{opacity:1;animation:spin .3s}.component--theme-switch .light{opacity:0}.dark .component--theme-switch .moon{opacity:0;animation:none}.dark .component--theme-switch .light{opacity:1;animation:spin .3s}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}