UNPKG

@stihl-design-system/components

Version:

Welcome to the STIHL Design System react component library.

2 lines (1 loc) 16.4 kB
.ds-link-button_root_oblg9_1:focus{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root_oblg9_1:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root_oblg9_1:focus{outline:revert;outline-offset:revert}.ds-link-button_root_oblg9_1:focus-visible{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root_oblg9_1:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-link-button_root_oblg9_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-link-button_root_oblg9_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-link-button_root_oblg9_1{transition-duration:0ms}}@media screen and (forced-colors: active){.ds-link-button_root_oblg9_1{background-color:Canvas!important}.ds-link-button_root_oblg9_1:hover{border-color:Highlight}}.ds-link-button_root--highlight_oblg9_75,.ds-link-button_root--dark-highlight_oblg9_75{background-color:#f37a1f;color:#252525}@media (hover: hover){.ds-link-button_root--highlight_oblg9_75:hover,.ds-link-button_root--dark-highlight_oblg9_75:hover{background-color:#e9640c}}.ds-link-button_root--highlight_oblg9_75[aria-disabled=true],.ds-link-button_root--dark-highlight_oblg9_75[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#00000080;background-color:#dadada}.ds-link-button_root--highlight_oblg9_75[aria-disabled=true] svg,.ds-link-button_root--dark-highlight_oblg9_75[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--highlight_oblg9_75[aria-disabled=true],.ds-link-button_root--dark-highlight_oblg9_75[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--highlight_oblg9_75[aria-disabled=true]:before,.ds-link-button_root--dark-highlight_oblg9_75[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--dark-highlight_oblg9_75:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-highlight_oblg9_75:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--dark-highlight_oblg9_75:focus{outline:revert;outline-offset:revert}.ds-link-button_root--dark-highlight_oblg9_75:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-highlight_oblg9_75:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-link-button_root--dark-highlight_oblg9_75[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#ffffff80;color:#00000080;background-color:#dadada}.ds-link-button_root--dark-highlight_oblg9_75[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--dark-highlight_oblg9_75[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--dark-highlight_oblg9_75[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--filled_oblg9_151{background-color:#252525;color:#fff}@media (hover: hover){.ds-link-button_root--filled_oblg9_151:hover{background-color:#444}}.ds-link-button_root--filled_oblg9_151[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#00000080;background-color:#dadada}.ds-link-button_root--filled_oblg9_151[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--filled_oblg9_151[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--filled_oblg9_151[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--outline_oblg9_179{border-color:#252525;color:#252525}@media (hover: hover){.ds-link-button_root--outline_oblg9_179:hover{background-color:#0000001a}}.ds-link-button_root--outline_oblg9_179[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;border-color:currentColor}.ds-link-button_root--outline_oblg9_179[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--outline_oblg9_179[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--outline_oblg9_179[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--ghost_oblg9_206{color:#252525}@media (hover: hover){.ds-link-button_root--ghost_oblg9_206:hover{background-color:#0000001a}}.ds-link-button_root--ghost_oblg9_206[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed}.ds-link-button_root--ghost_oblg9_206[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--ghost_oblg9_206[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--ghost_oblg9_206[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--ghost-flush_oblg9_231{color:#252525;padding-inline-start:0;padding-inline-end:0;min-width:0px}.ds-link-button_root--ghost-flush_oblg9_231.ds-link-button_root--small_oblg9_237{padding-inline-start:0;padding-inline-end:0;min-width:0px}.ds-link-button_root--ghost-flush_oblg9_231:before{content:"";position:absolute;top:-1px;right:-12px;bottom:-1px;left:-12px}.ds-link-button_root--ghost-flush_oblg9_231:before{transition:background-color var(--ds-animation-duration, .1s) linear,color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){.ds-link-button_root--ghost-flush_oblg9_231:before{transition-duration:0ms}}.ds-link-button_root--ghost-flush_oblg9_231:focus,.ds-link-button_root--ghost-flush_oblg9_231:focus-visible{outline:none}.ds-link-button_root--ghost-flush_oblg9_231:focus:before{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--ghost-flush_oblg9_231:focus:before{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--ghost-flush_oblg9_231:focus:before{outline:revert;outline-offset:revert}.ds-link-button_root--ghost-flush_oblg9_231:focus-visible:before{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--ghost-flush_oblg9_231:focus-visible:before{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--ghost-flush_oblg9_231:hover:before{background-color:#0000001a}}@media screen and (hover: hover) and (forced-colors: active){.ds-link-button_root--ghost-flush_oblg9_231:hover:before{background-color:transparent}}.ds-link-button_root--ghost-flush_oblg9_231[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed}.ds-link-button_root--ghost-flush_oblg9_231[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--ghost-flush_oblg9_231[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--ghost-flush_oblg9_231[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--navigation_oblg9_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-link-button_root--navigation_oblg9_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-link-button_root--navigation_oblg9_317:focus{outline:2px solid;outline-color:#252525;outline-offset:-2px}@media screen and (forced-colors: active){.ds-link-button_root--navigation_oblg9_317:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--navigation_oblg9_317:focus{outline:revert;outline-offset:revert}.ds-link-button_root--navigation_oblg9_317:focus-visible{outline:2px solid;outline-color:#252525;outline-offset:-2px}@media screen and (forced-colors: active){.ds-link-button_root--navigation_oblg9_317:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--navigation_oblg9_317:hover{background-color:#0000001a}}.ds-link-button_root--navigation_oblg9_317[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed}.ds-link-button_root--navigation_oblg9_317[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--navigation_oblg9_317[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--navigation_oblg9_317[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--dark-filled_oblg9_393{background-color:#f8f8f8;color:#252525}.ds-link-button_root--dark-filled_oblg9_393:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-filled_oblg9_393:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--dark-filled_oblg9_393:focus{outline:revert;outline-offset:revert}.ds-link-button_root--dark-filled_oblg9_393:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-filled_oblg9_393:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--dark-filled_oblg9_393:hover{background-color:#dadada}}.ds-link-button_root--dark-filled_oblg9_393[aria-disabled=true]{background-color:transparent;cursor:not-allowed;color:#ffffff80;color:#00000080;background-color:#dadada}.ds-link-button_root--dark-filled_oblg9_393[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--dark-filled_oblg9_393[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--dark-filled_oblg9_393[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--dark-outline_oblg9_450{border-color:#f8f8f8;color:#fff}.ds-link-button_root--dark-outline_oblg9_450:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-outline_oblg9_450:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--dark-outline_oblg9_450:focus{outline:revert;outline-offset:revert}.ds-link-button_root--dark-outline_oblg9_450:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-outline_oblg9_450:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--dark-outline_oblg9_450:hover{background-color:#ffffff26}}.ds-link-button_root--dark-outline_oblg9_450[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80;border-color:currentColor}.ds-link-button_root--dark-outline_oblg9_450[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--dark-outline_oblg9_450[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--dark-outline_oblg9_450[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--dark-ghost_oblg9_506{color:#fff}.ds-link-button_root--dark-ghost_oblg9_506:focus{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost_oblg9_506:focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--dark-ghost_oblg9_506:focus{outline:revert;outline-offset:revert}.ds-link-button_root--dark-ghost_oblg9_506:focus-visible{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost_oblg9_506:focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--dark-ghost_oblg9_506:hover{background-color:#ffffff26}}.ds-link-button_root--dark-ghost_oblg9_506[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80}.ds-link-button_root--dark-ghost_oblg9_506[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost_oblg9_506[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--dark-ghost_oblg9_506[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--dark-ghost-flush_oblg9_560{color:#fff}.ds-link-button_root--dark-ghost-flush_oblg9_560:focus,.ds-link-button_root--dark-ghost-flush_oblg9_560:focus-visible{outline:none}.ds-link-button_root--dark-ghost-flush_oblg9_560:focus:before{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost-flush_oblg9_560:focus:before{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-link-button_root--dark-ghost-flush_oblg9_560:focus:before{outline:revert;outline-offset:revert}.ds-link-button_root--dark-ghost-flush_oblg9_560:focus-visible:before{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost-flush_oblg9_560:focus-visible:before{forced-color-adjust:auto;outline-color:Highlight}}}@media (hover: hover){.ds-link-button_root--dark-ghost-flush_oblg9_560:hover:before{background-color:#ffffff26}}@media screen and (hover: hover) and (forced-colors: active){.ds-link-button_root--dark-ghost-flush_oblg9_560:hover:before{background-color:transparent}}.ds-link-button_root--dark-ghost-flush_oblg9_560[aria-disabled=true]{background-color:transparent;color:#00000080;cursor:not-allowed;color:#ffffff80}.ds-link-button_root--dark-ghost-flush_oblg9_560[aria-disabled=true] svg{fill:currentColor}@media screen and (forced-colors: active){.ds-link-button_root--dark-ghost-flush_oblg9_560[aria-disabled=true]{color:GrayText;border-color:GrayText}}.ds-link-button_root--dark-ghost-flush_oblg9_560[aria-disabled=true]:before{background-color:transparent}.ds-link-button_root--small_oblg9_237{min-width:2rem;min-height:2rem;padding-block-start:5px;padding-block-end:5px;padding-inline-start:15px;padding-inline-end:15px}.ds-link-button_root--small_oblg9_237.ds-link-button_root--ghost-flush_oblg9_231:before{right:-8px;left:-8px}.ds-link-button_root--icon-left_oblg9_635{flex-direction:row-reverse}.ds-link-button_root--icon-only_oblg9_638{width:3rem;height:3rem}.ds-link-button_root--icon-only_oblg9_638.ds-link-button_root--ghost-flush_oblg9_231{width:1rem;height:1rem}.ds-link-button_root--icon-only-small_oblg9_647{width:2rem;height:2rem;min-width:2rem;min-height:2rem}.ds-link-button_root--icon-only-small_oblg9_647.ds-link-button_root--ghost-flush_oblg9_231{width:1rem;height:1rem}@media (min-width: 1024px){.ds-link-button_icon--navigation_oblg9_659{min-width:.75rem;min-height:.75rem;width:.75rem;height:.75rem}}.ds-link-button_label--hidden_oblg9_667{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}