@stihl-design-system/components/assets/buttonround.C-l_HArD.css

Welcome to the STIHL Design System react component library.

.ds-button-round_root_oobgt_1:focus{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root_oobgt_1:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button-round_root_oobgt_1:focus{outline:revert;outline-offset:revert}.ds-button-round_root_oobgt_1:focus-visible{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root_oobgt_1:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-button-round_root_oobgt_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-round_root_oobgt_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-round_root_oobgt_1{transition-duration:0ms}}@media screen and (forced-colors: active){.ds-button-round_root_oobgt_1{background-color:Canvas!important}.ds-button-round_root_oobgt_1:hover{border-color:Highlight}}.ds-button-round_root--highlight_oobgt_75,.ds-button-round_root--dark-highlight_oobgt_75{background-color:#f37a1f;color:#252525}@media (hover: hover){.ds-button-round_root--highlight_oobgt_75:hover,.ds-button-round_root--dark-highlight_oobgt_75:hover{background-color:#e9640c}}.ds-button-round_root--highlight_oobgt_75[aria-disabled=true],.ds-button-round_root--dark-highlight_oobgt_75[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#00000080;background-color:#dadada}.ds-button-round_root--highlight_oobgt_75[aria-disabled=true] svg,.ds-button-round_root--dark-highlight_oobgt_75[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button-round_root--highlight_oobgt_75[aria-disabled=true],.ds-button-round_root--dark-highlight_oobgt_75[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button-round_root--highlight_oobgt_75[aria-disabled=true]:before,.ds-button-round_root--dark-highlight_oobgt_75[aria-disabled=true]:before{background-color:transparent}.ds-button-round_root--dark-highlight_oobgt_75:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--dark-highlight_oobgt_75:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button-round_root--dark-highlight_oobgt_75:focus{outline:revert;outline-offset:revert}.ds-button-round_root--dark-highlight_oobgt_75:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--dark-highlight_oobgt_75:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-button-round_root--dark-highlight_oobgt_75[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#ffffff80;color:#00000080;background-color:#dadada}.ds-button-round_root--dark-highlight_oobgt_75[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button-round_root--dark-highlight_oobgt_75[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button-round_root--dark-highlight_oobgt_75[aria-disabled=true]:before{background-color:transparent}.ds-button-round_root--filled_oobgt_151{background-color:#252525;color:#fff}@media (hover: hover){.ds-button-round_root--filled_oobgt_151:hover{background-color:#444}}.ds-button-round_root--filled_oobgt_151[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#00000080;background-color:#dadada}.ds-button-round_root--filled_oobgt_151[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button-round_root--filled_oobgt_151[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button-round_root--filled_oobgt_151[aria-disabled=true]:before{background-color:transparent}.ds-button-round_root--outline_oobgt_179{border-color:#252525;color:#252525}@media (hover: hover){.ds-button-round_root--outline_oobgt_179:hover{background-color:#0000001a}}.ds-button-round_root--outline_oobgt_179[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;border-color:currentColor}.ds-button-round_root--outline_oobgt_179[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button-round_root--outline_oobgt_179[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button-round_root--outline_oobgt_179[aria-disabled=true]:before{background-color:transparent}.ds-button-round_root--ghost_oobgt_206{color:#252525}@media (hover: hover){.ds-button-round_root--ghost_oobgt_206:hover{background-color:#0000001a}}.ds-button-round_root--ghost_oobgt_206[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed}.ds-button-round_root--ghost_oobgt_206[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button-round_root--ghost_oobgt_206[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button-round_root--ghost_oobgt_206[aria-disabled=true]:before{background-color:transparent}.ds-button-round_root--ghost-flush_oobgt_231{color:#252525;padding-inline-start:0;padding-inline-end:0;min-width:0px}.ds-button-round_root--ghost-flush_oobgt_231.ds-button-round_root--small_oobgt_237{padding-inline-start:0;padding-inline-end:0;min-width:0px}.ds-button-round_root--ghost-flush_oobgt_231:before{content:"";position:absolute;top:-1px;right:-12px;bottom:-1px;left:-12px}.ds-button-round_root--ghost-flush_oobgt_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-round_root--ghost-flush_oobgt_231:before{transition-duration:0ms}}.ds-button-round_root--ghost-flush_oobgt_231:focus,.ds-button-round_root--ghost-flush_oobgt_231:focus-visible{outline:none}.ds-button-round_root--ghost-flush_oobgt_231:focus:before{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--ghost-flush_oobgt_231:focus:before{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button-round_root--ghost-flush_oobgt_231:focus:before{outline:revert;outline-offset:revert}.ds-button-round_root--ghost-flush_oobgt_231:focus-visible:before{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--ghost-flush_oobgt_231:focus-visible:before{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button-round_root--ghost-flush_oobgt_231:hover:before{background-color:#0000001a}}@media screen and (hover: hover) and (forced-colors: active){.ds-button-round_root--ghost-flush_oobgt_231:hover:before{background-color:transparent}}.ds-button-round_root--ghost-flush_oobgt_231[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed}.ds-button-round_root--ghost-flush_oobgt_231[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button-round_root--ghost-flush_oobgt_231[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button-round_root--ghost-flush_oobgt_231[aria-disabled=true]:before{background-color:transparent}.ds-button-round_root--dark-filled_oobgt_317{background-color:#f8f8f8;color:#252525}.ds-button-round_root--dark-filled_oobgt_317:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--dark-filled_oobgt_317:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button-round_root--dark-filled_oobgt_317:focus{outline:revert;outline-offset:revert}.ds-button-round_root--dark-filled_oobgt_317:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--dark-filled_oobgt_317:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button-round_root--dark-filled_oobgt_317:hover{background-color:#dadada}}.ds-button-round_root--dark-filled_oobgt_317[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#ffffff80;color:#00000080;background-color:#dadada}.ds-button-round_root--dark-filled_oobgt_317[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button-round_root--dark-filled_oobgt_317[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button-round_root--dark-filled_oobgt_317[aria-disabled=true]:before{background-color:transparent}.ds-button-round_root--dark-outline_oobgt_374{border-color:#f8f8f8;color:#fff}.ds-button-round_root--dark-outline_oobgt_374:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--dark-outline_oobgt_374:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button-round_root--dark-outline_oobgt_374:focus{outline:revert;outline-offset:revert}.ds-button-round_root--dark-outline_oobgt_374:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--dark-outline_oobgt_374:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button-round_root--dark-outline_oobgt_374:hover{background-color:#ffffff26}}.ds-button-round_root--dark-outline_oobgt_374[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80;border-color:currentColor}.ds-button-round_root--dark-outline_oobgt_374[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button-round_root--dark-outline_oobgt_374[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button-round_root--dark-outline_oobgt_374[aria-disabled=true]:before{background-color:transparent}.ds-button-round_root--dark-ghost_oobgt_430{color:#fff}.ds-button-round_root--dark-ghost_oobgt_430:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--dark-ghost_oobgt_430:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button-round_root--dark-ghost_oobgt_430:focus{outline:revert;outline-offset:revert}.ds-button-round_root--dark-ghost_oobgt_430:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--dark-ghost_oobgt_430:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button-round_root--dark-ghost_oobgt_430:hover{background-color:#ffffff26}}.ds-button-round_root--dark-ghost_oobgt_430[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80}.ds-button-round_root--dark-ghost_oobgt_430[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button-round_root--dark-ghost_oobgt_430[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button-round_root--dark-ghost_oobgt_430[aria-disabled=true]:before{background-color:transparent}.ds-button-round_root--dark-ghost-flush_oobgt_484{color:#fff}.ds-button-round_root--dark-ghost-flush_oobgt_484:focus,.ds-button-round_root--dark-ghost-flush_oobgt_484:focus-visible{outline:none}.ds-button-round_root--dark-ghost-flush_oobgt_484:focus:before{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--dark-ghost-flush_oobgt_484:focus:before{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-button-round_root--dark-ghost-flush_oobgt_484:focus:before{outline:revert;outline-offset:revert}.ds-button-round_root--dark-ghost-flush_oobgt_484:focus-visible:before{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-button-round_root--dark-ghost-flush_oobgt_484:focus-visible:before{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-button-round_root--dark-ghost-flush_oobgt_484:hover:before{background-color:#ffffff26}}@media screen and (hover: hover) and (forced-colors: active){.ds-button-round_root--dark-ghost-flush_oobgt_484:hover:before{background-color:transparent}}.ds-button-round_root--dark-ghost-flush_oobgt_484[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80}.ds-button-round_root--dark-ghost-flush_oobgt_484[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-button-round_root--dark-ghost-flush_oobgt_484[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-button-round_root--dark-ghost-flush_oobgt_484[aria-disabled=true]:before{background-color:transparent}.ds-button-round_root--small_oobgt_237{min-height:2rem;min-width:2rem;padding-block-start:5px;padding-block-end:5px;padding-inline-start:15px;padding-inline-end:15px}.ds-button-round_root--small_oobgt_237.ds-button-round_root--ghost-flush_oobgt_231:before{right:-8px;left:-8px}.ds-button-round_root--icon-left_oobgt_559{flex-direction:row-reverse}.ds-button-round_root--icon-only_oobgt_562{width:3rem;height:3rem}.ds-button-round_root--icon-only_oobgt_562.ds-button-round_root--ghost-flush_oobgt_231{width:1rem;height:1rem}.ds-button-round_root--icon-only-small_oobgt_571{width:2rem;height:2rem;min-width:2rem;min-height:2rem}.ds-button-round_root--icon-only-small_oobgt_571.ds-button-round_root--ghost-flush_oobgt_231{width:1rem;height:1rem}.ds-button-round_root_oobgt_1{position:relative;border-radius:50%;padding:0}.ds-button-round_loader_oobgt_588{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1rem;height:1rem}.ds-button-round_loader_oobgt_588 svg{fill:currentColor}.ds-button-round_icon--hidden_oobgt_600{opacity:0}.ds-button-round_label--hidden_oobgt_604{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-round_label--loading_oobgt_616{opacity:0}