@stihl-design-system/components/assets/Button.CmeGVEAY.css

Welcome to the STIHL Design System react component library.

.ds-button_root_146u3_1:focus{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root_146u3_1:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button_root_146u3_1:focus{outline:revert;outline-offset:revert}.ds-button_root_146u3_1:focus-visible{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root_146u3_1:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-button_root_146u3_1{font-family:STIHL Contraface Digital Text Bold,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;font-weight:400;font-size:1rem;line-height:1.25;font-size-adjust:.426;padding-block-start:11px;padding-block-end:11px;padding-inline-start:23px;padding-inline-end:23px;display:inline-flex;justify-content:center;align-items:center;border-width:1px;border-style:solid;border-color:transparent;min-height:3rem;min-width:3rem;gap:8px;transform:translateZ(0);overflow-wrap:break-word;text-align:left;text-decoration:none;background-color:transparent;cursor:pointer}.ds-button_root_146u3_1{transition:background-color var(--ds-animation-duration, .1s) linear,border-color var(--ds-animation-duration, .1s) linear,color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){.ds-button_root_146u3_1{transition-duration:0ms}}@media screen and (forced-colors: active){.ds-button_root_146u3_1{background-color:Canvas!important}.ds-button_root_146u3_1:hover{border-color:Highlight}}.ds-button_root--highlight_146u3_75,.ds-button_root--dark-highlight_146u3_75{background-color:#f37a1f;color:#252525}@media (hover: hover){.ds-button_root--highlight_146u3_75:hover,.ds-button_root--dark-highlight_146u3_75:hover{background-color:#e9640c}}.ds-button_root--highlight_146u3_75[aria-disabled=true],.ds-button_root--dark-highlight_146u3_75[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#00000080;background-color:#dadada}.ds-button_root--highlight_146u3_75[aria-disabled=true] svg,.ds-button_root--dark-highlight_146u3_75[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--highlight_146u3_75[aria-disabled=true],.ds-button_root--dark-highlight_146u3_75[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--highlight_146u3_75[aria-disabled=true]:before,.ds-button_root--dark-highlight_146u3_75[aria-disabled=true]:before{background-color:transparent}.ds-button_root--dark-highlight_146u3_75:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--dark-highlight_146u3_75:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button_root--dark-highlight_146u3_75:focus{outline:revert;outline-offset:revert}.ds-button_root--dark-highlight_146u3_75:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--dark-highlight_146u3_75:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-button_root--dark-highlight_146u3_75[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#ffffff80;color:#00000080;background-color:#dadada}.ds-button_root--dark-highlight_146u3_75[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--dark-highlight_146u3_75[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--dark-highlight_146u3_75[aria-disabled=true]:before{background-color:transparent}.ds-button_root--filled_146u3_151{background-color:#252525;color:#fff}@media (hover: hover){.ds-button_root--filled_146u3_151:hover{background-color:#444}}.ds-button_root--filled_146u3_151[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#00000080;background-color:#dadada}.ds-button_root--filled_146u3_151[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--filled_146u3_151[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--filled_146u3_151[aria-disabled=true]:before{background-color:transparent}.ds-button_root--outline_146u3_179{border-color:#252525;color:#252525}@media (hover: hover){.ds-button_root--outline_146u3_179:hover{background-color:#0000001a}}.ds-button_root--outline_146u3_179[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;border-color:currentColor}.ds-button_root--outline_146u3_179[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--outline_146u3_179[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--outline_146u3_179[aria-disabled=true]:before{background-color:transparent}.ds-button_root--ghost_146u3_206{color:#252525}@media (hover: hover){.ds-button_root--ghost_146u3_206:hover{background-color:#0000001a}}.ds-button_root--ghost_146u3_206[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed}.ds-button_root--ghost_146u3_206[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--ghost_146u3_206[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--ghost_146u3_206[aria-disabled=true]:before{background-color:transparent}.ds-button_root--ghost-flush_146u3_231{color:#252525;padding-inline-start:0;padding-inline-end:0;min-width:0px}.ds-button_root--ghost-flush_146u3_231.ds-button_root--small_146u3_237{padding-inline-start:0;padding-inline-end:0;min-width:0px}.ds-button_root--ghost-flush_146u3_231:before{content:"";position:absolute;inset:-1px -12px}.ds-button_root--ghost-flush_146u3_231:before{transition:background-color var(--ds-animation-duration, .1s) linear,color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){.ds-button_root--ghost-flush_146u3_231:before{transition-duration:0ms}}.ds-button_root--ghost-flush_146u3_231:focus,.ds-button_root--ghost-flush_146u3_231:focus-visible{outline:none}.ds-button_root--ghost-flush_146u3_231:focus:before{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--ghost-flush_146u3_231:focus:before{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button_root--ghost-flush_146u3_231:focus:before{outline:revert;outline-offset:revert}.ds-button_root--ghost-flush_146u3_231:focus-visible:before{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--ghost-flush_146u3_231:focus-visible:before{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button_root--ghost-flush_146u3_231:hover:before{background-color:#0000001a}}@media screen and (hover: hover) and (forced-colors: active){.ds-button_root--ghost-flush_146u3_231:hover:before{background-color:transparent}}.ds-button_root--ghost-flush_146u3_231[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed}.ds-button_root--ghost-flush_146u3_231[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--ghost-flush_146u3_231[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--ghost-flush_146u3_231[aria-disabled=true]:before{background-color:transparent}.ds-button_root--navigation_146u3_317{font-family:STIHL Contraface Digital Text Bold,-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:1.125rem;line-height:1.33;font-size-adjust:.426;color:#252525;border-radius:2px}@media (min-width: 1024px){.ds-button_root--navigation_146u3_317{font-family:STIHL Contraface Digital Text Bold,-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:.426}}.ds-button_root--navigation_146u3_317:focus{outline:2px solid;outline-color:#252525;outline-offset:-2px}@media screen and (forced-colors: active){.ds-button_root--navigation_146u3_317:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button_root--navigation_146u3_317:focus{outline:revert;outline-offset:revert}.ds-button_root--navigation_146u3_317:focus-visible{outline:2px solid;outline-color:#252525;outline-offset:-2px}@media screen and (forced-colors: active){.ds-button_root--navigation_146u3_317:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button_root--navigation_146u3_317:hover{background-color:#0000001a}}.ds-button_root--navigation_146u3_317[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed}.ds-button_root--navigation_146u3_317[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--navigation_146u3_317[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--navigation_146u3_317[aria-disabled=true]:before{background-color:transparent}.ds-button_root--navigation--stretched_146u3_393{justify-content:flex-start}.ds-button_root--navigation--stretched--icon-left_146u3_396{justify-content:flex-end}.ds-button_root--dark-filled_146u3_399{background-color:#f8f8f8;color:#252525}.ds-button_root--dark-filled_146u3_399:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--dark-filled_146u3_399:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button_root--dark-filled_146u3_399:focus{outline:revert;outline-offset:revert}.ds-button_root--dark-filled_146u3_399:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--dark-filled_146u3_399:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button_root--dark-filled_146u3_399:hover{background-color:#dadada}}.ds-button_root--dark-filled_146u3_399[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#ffffff80;color:#00000080;background-color:#dadada}.ds-button_root--dark-filled_146u3_399[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--dark-filled_146u3_399[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--dark-filled_146u3_399[aria-disabled=true]:before{background-color:transparent}.ds-button_root--dark-outline_146u3_456{border-color:#f8f8f8;color:#fff}.ds-button_root--dark-outline_146u3_456:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--dark-outline_146u3_456:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button_root--dark-outline_146u3_456:focus{outline:revert;outline-offset:revert}.ds-button_root--dark-outline_146u3_456:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--dark-outline_146u3_456:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button_root--dark-outline_146u3_456:hover{background-color:#ffffff26}}.ds-button_root--dark-outline_146u3_456[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80;border-color:currentColor}.ds-button_root--dark-outline_146u3_456[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--dark-outline_146u3_456[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--dark-outline_146u3_456[aria-disabled=true]:before{background-color:transparent}.ds-button_root--dark-ghost_146u3_512{color:#fff}.ds-button_root--dark-ghost_146u3_512:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--dark-ghost_146u3_512:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button_root--dark-ghost_146u3_512:focus{outline:revert;outline-offset:revert}.ds-button_root--dark-ghost_146u3_512:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--dark-ghost_146u3_512:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button_root--dark-ghost_146u3_512:hover{background-color:#ffffff26}}.ds-button_root--dark-ghost_146u3_512[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80}.ds-button_root--dark-ghost_146u3_512[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--dark-ghost_146u3_512[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--dark-ghost_146u3_512[aria-disabled=true]:before{background-color:transparent}.ds-button_root--dark-ghost-flush_146u3_566{color:#fff}.ds-button_root--dark-ghost-flush_146u3_566:focus,.ds-button_root--dark-ghost-flush_146u3_566:focus-visible{outline:none}.ds-button_root--dark-ghost-flush_146u3_566:focus:before{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--dark-ghost-flush_146u3_566:focus:before{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button_root--dark-ghost-flush_146u3_566:focus:before{outline:revert;outline-offset:revert}.ds-button_root--dark-ghost-flush_146u3_566:focus-visible:before{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button_root--dark-ghost-flush_146u3_566:focus-visible:before{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button_root--dark-ghost-flush_146u3_566:hover:before{background-color:#ffffff26}}@media screen and (hover: hover) and (forced-colors: active){.ds-button_root--dark-ghost-flush_146u3_566:hover:before{background-color:transparent}}.ds-button_root--dark-ghost-flush_146u3_566[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80}.ds-button_root--dark-ghost-flush_146u3_566[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button_root--dark-ghost-flush_146u3_566[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button_root--dark-ghost-flush_146u3_566[aria-disabled=true]:before{background-color:transparent}.ds-button_root--small_146u3_237{min-width:2rem;min-height:2rem;padding-block-start:5px;padding-block-end:5px;padding-inline-start:15px;padding-inline-end:15px}.ds-button_root--small_146u3_237.ds-button_root--ghost-flush_146u3_231:before{right:-8px;left:-8px}.ds-button_root--stretched_146u3_641{width:100%}.ds-button_root--icon-left_146u3_644{flex-direction:row-reverse}.ds-button_root--icon-only_146u3_647{width:3rem;height:3rem}.ds-button_root--icon-only_146u3_647.ds-button_root--ghost-flush_146u3_231{width:1rem;height:1rem}.ds-button_root--icon-only-small_146u3_656{width:2rem;height:2rem;min-width:2rem;min-height:2rem}.ds-button_root--icon-only-small_146u3_656.ds-button_root--ghost-flush_146u3_231{width:1rem;height:1rem}.ds-button_root_146u3_1{position:relative}@media (min-width: 1024px){.ds-button_icon--navigation_146u3_672{min-width:.75rem;min-height:.75rem;width:.75rem;height:.75rem}}.ds-button_icon--hidden_146u3_679{opacity:0}.ds-button_label--hidden_146u3_683{border:0;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;text-indent:-999999px;white-space:nowrap}.ds-button_label--loading_146u3_695{opacity:0}.ds-button_loader_146u3_699{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1rem;height:1rem}.ds-button_loader_146u3_699 svg{fill:currentColor}