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