@stihl-design-system/components/assets/switch.B9B-n_3y.css

Welcome to the STIHL Design System react component library.

.ds-switch_root_gdcld_1{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:1rem;line-height:1.25;font-size-adjust:.414;color:#252525;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:0;outline:0;border:0;text-align:left;background:transparent;appearance:none;cursor:pointer}.ds-switch_root_gdcld_1{transition:background-color var(--ds-animation-duration, .1s) linear}.ds-switch_root_gdcld_1{transition:transform var(--ds-animation-duration, .25s) cubic-bezier(0,0,.5,1),opacity var(--ds-animation-duration, .25s) cubic-bezier(0,0,.5,1)}@media (prefers-reduced-motion: reduce){.ds-switch_root_gdcld_1{transition-duration:0ms}}.ds-switch_root--label-right_gdcld_40{flex-direction:row-reverse}.ds-switch_root--stretched_gdcld_43{justify-content:space-between;width:100%}@media (hover: hover){.ds-switch_root_gdcld_1:hover .ds-switch_switch_gdcld_48{background-color:#0000001a}}.ds-switch_root_gdcld_1:focus .ds-switch_switch_gdcld_48:before,.ds-switch_root_gdcld_1:focus .ds-switch_loader_gdcld_53:before{content:"";position:absolute;inset:-5px;border:2px solid #252525;border-radius:6.25rem}@media screen and (forced-colors: active){.ds-switch_root_gdcld_1:focus .ds-switch_switch_gdcld_48:before,.ds-switch_root_gdcld_1:focus .ds-switch_loader_gdcld_53:before{border-color:Highlight}}@supports selector(:focus-visible){.ds-switch_root_gdcld_1:focus .ds-switch_switch_gdcld_48:before,.ds-switch_root_gdcld_1:focus .ds-switch_loader_gdcld_53:before{content:none}.ds-switch_root_gdcld_1:focus-visible .ds-switch_switch_gdcld_48:before,.ds-switch_root_gdcld_1:focus-visible .ds-switch_loader_gdcld_53:before{content:"";position:absolute;inset:-5px;border:2px solid #252525;border-radius:6.25rem}@media screen and (forced-colors: active){.ds-switch_root_gdcld_1:focus-visible .ds-switch_switch_gdcld_48:before,.ds-switch_root_gdcld_1:focus-visible .ds-switch_loader_gdcld_53:before{border-color:Highlight}}}.ds-switch_root_gdcld_1[aria-disabled=true].ds-switch_root_gdcld_1{cursor:not-allowed}@media screen and (forced-colors: active){.ds-switch_root_gdcld_1[aria-disabled=true].ds-switch_root_gdcld_1{color:GrayText}}.ds-switch_root_gdcld_1[aria-disabled=true] .ds-switch_switch_gdcld_48{background-color:transparent;border-color:#00000080;color:#00000080}@media screen and (forced-colors: active){.ds-switch_root_gdcld_1[aria-disabled=true] .ds-switch_switch_gdcld_48{border-color:GrayText}}.ds-switch_root_gdcld_1[aria-disabled=true] .ds-switch_thumb_gdcld_111{background-color:#00000080}.ds-switch_root_gdcld_1[aria-disabled=true] .ds-switch_thumb_gdcld_111 svg{opacity:0}@media screen and (forced-colors: active){.ds-switch_root_gdcld_1[aria-disabled=true] .ds-switch_thumb_gdcld_111{background-color:CanvasText}.ds-switch_root_gdcld_1[aria-disabled=true] .ds-switch_thumb_gdcld_111 svg{fill:Canvas}}@media (hover: hover){.ds-switch_root--checked_gdcld_126:hover .ds-switch_switch_gdcld_48{background-color:#d9480f}.ds-switch_root--checked_gdcld_126:hover .ds-switch_thumb_gdcld_111{background-color:#ededed}.ds-switch_root--checked_gdcld_126:hover .ds-switch_thumb_gdcld_111 svg{fill:#d9480f}}@media screen and (hover: hover) and (forced-colors: active){.ds-switch_root--checked_gdcld_126:hover .ds-switch_thumb_gdcld_111{background-color:CanvasText}.ds-switch_root--checked_gdcld_126:hover .ds-switch_thumb_gdcld_111 svg{fill:Canvas}}.ds-switch_root--checked_gdcld_126 .ds-switch_switch_gdcld_48{background-color:#e9640c}.ds-switch_root--checked_gdcld_126 .ds-switch_thumb_gdcld_111{background-color:#fff;transform:translate3d(calc(1.75rem - 1px),0,0)}.ds-switch_root--checked_gdcld_126 .ds-switch_thumb_gdcld_111 svg{opacity:1;fill:#e9640c}@media screen and (forced-colors: active){.ds-switch_root--checked_gdcld_126 .ds-switch_thumb_gdcld_111{background-color:CanvasText}.ds-switch_root--checked_gdcld_126 .ds-switch_thumb_gdcld_111 svg{fill:Canvas}}@media (hover: hover){.ds-switch_root--checked_gdcld_126[aria-disabled=true]:hover .ds-switch_thumb_gdcld_111 svg{fill:#00000080}}@media screen and (hover: hover) and (forced-colors: active){.ds-switch_root--checked_gdcld_126[aria-disabled=true]:hover .ds-switch_thumb_gdcld_111{background-color:CanvasText}.ds-switch_root--checked_gdcld_126[aria-disabled=true]:hover .ds-switch_thumb_gdcld_111 svg{fill:Canvas}}.ds-switch_root--checked_gdcld_126[aria-disabled=true] .ds-switch_switch_gdcld_48{background-color:#dadada;border-color:#00000080}@media screen and (forced-colors: active){.ds-switch_root--checked_gdcld_126[aria-disabled=true] .ds-switch_switch_gdcld_48{border-color:GrayText}}.ds-switch_root--checked_gdcld_126[aria-disabled=true] .ds-switch_thumb_gdcld_111{background-color:#fff}.ds-switch_root--checked_gdcld_126[aria-disabled=true] .ds-switch_thumb_gdcld_111 svg{opacity:1;fill:#00000080}@media screen and (forced-colors: active){.ds-switch_root--checked_gdcld_126[aria-disabled=true] .ds-switch_thumb_gdcld_111{background-color:CanvasText}.ds-switch_root--checked_gdcld_126[aria-disabled=true] .ds-switch_thumb_gdcld_111 svg{fill:Canvas}}.ds-switch_switch_gdcld_48{border:1px solid #252525;border-radius:6.25rem;display:flex;align-items:center;position:relative;width:3.5rem;height:2rem;min-width:3.5rem;transition:inherit}.ds-switch_thumb_gdcld_111{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:#252525;border-radius:50%;transform:translate3d(calc(.25rem - 1px),0,0);transition:inherit}.ds-switch_thumb_gdcld_111 svg{transition:inherit;opacity:0}@media screen and (forced-colors: active){.ds-switch_thumb_gdcld_111{background-color:CanvasText}.ds-switch_thumb_gdcld_111 svg{fill:Canvas}}.ds-switch_loader_gdcld_53{width:3.5rem;height:2rem;min-width:3.5rem;border-radius:6.25rem;display:flex;align-items:center;justify-content:center;border:1px solid transparent;position:relative}.ds-switch_loader_gdcld_53 svg{fill:#00000080}@media screen and (forced-colors: active){.ds-switch_loader_gdcld_53 svg{fill:CanvasText}}