@stihl-design-system/components/assets/radio.9hUUyg8R.css

Welcome to the STIHL Design System react component library.

.ds-radio_root_1c2bg_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-size:1rem;line-height:1.25;font-size-adjust:.414;font-weight:400;color:#252525;display:grid;grid-template-areas:"dot label";grid-template-columns:auto 1fr;justify-content:flex-start;gap:8px;padding:0;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;height:fit-content;max-width:fit-content}.ds-radio_root--dark_1c2bg_24{color:#fff}.ds-radio_root--disabled_1c2bg_27{cursor:not-allowed}.ds-radio_root--with-custom-area_1c2bg_30{max-width:none}.ds-radio_root--with-custom-area--above_1c2bg_33{min-width:10rem;max-width:25rem;grid-template-areas:"custom-area custom-area" "dot label";grid-template-columns:auto 1fr;grid-template-rows:auto}.ds-radio_radio_1c2bg_41{grid-area:dot;width:1.25rem;height:1.25rem;min-width:1.25rem;min-height:1.25rem;border-radius:50%;border:1px solid #252525;position:relative}@media screen and (forced-colors:active){.ds-radio_radio_1c2bg_41{border-color:CanvasText}}.ds-radio_radio_1c2bg_41{transition:background-color var(--ds-animation-duration, .1s) linear}@media(prefers-reduced-motion:reduce){.ds-radio_radio_1c2bg_41{transition-duration:0ms}}.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{opacity:0;height:.75rem;width:.75rem;border-radius:50%;background-color:#e9640c;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{transition:opacity var(--ds-animation-duration, .1s) linear,background-color var(--ds-animation-duration, .1s) linear}@media(prefers-reduced-motion:reduce){.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{transition-duration:0ms}}@media screen and (forced-colors:active){.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{background-color:Highlight}}.ds-radio_radio--invalid_1c2bg_88{border-color:#d43b3b;box-shadow:0 0 0 1px #d43b3b}.ds-radio_radio--dark_1c2bg_92{border-color:#f8f8f8}.ds-radio_radio--dark_1c2bg_92 .ds-radio_dot_1c2bg_64{background-color:#f37a1f}@media screen and (forced-colors:active){.ds-radio_radio--dark_1c2bg_92 .ds-radio_dot_1c2bg_64{background-color:Highlight}}.ds-radio_radio--dark_1c2bg_92.ds-radio_radio--invalid_1c2bg_88{border-color:#d43b3b;box-shadow:0 0 0 1px #d43b3b}.ds-radio_label_1c2bg_108{grid-area:label;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-size:1rem;line-height:1.25;font-size-adjust:.414;font-weight:400;width:100%;max-width:34em;display:grid;grid-template-areas:"label custom-area" "hint hint";grid-template-columns:auto minmax(auto,1fr)}.ds-radio_label--bold_1c2bg_125{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-size:1rem;line-height:1.25;font-size-adjust:.426;font-weight:700;font-synthesis-weight:none}.ds-radio_label--with-custom-area_1c2bg_137{column-gap:8px}.ds-radio_custom-area_1c2bg_141{grid-area:custom-area;margin-inline-start:4px;min-width:max-content;min-height:1.25rem;max-height:2rem;overflow-y:hidden}.ds-radio_custom-area--disabled_1c2bg_149{opacity:.5}.ds-radio_custom-area--above_1c2bg_152{overflow-y:visible;max-height:unset;height:fit-content;margin-inline-start:0px}.ds-radio_hint_1c2bg_159{grid-area:hint;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-size:.875rem;line-height:1.14;font-size-adjust:.414;font-weight:400;display:block;max-width:34em;grid-column:span 2;opacity:1}.ds-radio_hint_1c2bg_159{transition:height var(--ds-animation-duration, .25s) cubic-bezier(.5,0,.5,1),margin-block var(--ds-animation-duration, .25s) cubic-bezier(.5,0,.5,1),opacity var(--ds-animation-duration, .25s) cubic-bezier(.5,0,.5,1)}@media(prefers-reduced-motion:reduce){.ds-radio_hint_1c2bg_159{transition-duration:0ms}}.ds-radio_hint--visible_1c2bg_183{margin-block-start:4px;margin-block-end:4px}.ds-radio_hint--unchecked-hidden_1c2bg_187{height:0;opacity:0;pointer-events:none}.ds-radio_input_1c2bg_193{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-radio_input_1c2bg_193:checked+.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{opacity:1}.ds-radio_input_1c2bg_193:disabled+.ds-radio_radio_1c2bg_41{border-color:#00000080}.ds-radio_input_1c2bg_193:disabled+.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{background-color:#dadada}@media screen and (forced-colors:active){.ds-radio_input_1c2bg_193:disabled+.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{background-color:GrayText}}@media screen and (forced-colors:active){.ds-radio_input_1c2bg_193:disabled+.ds-radio_radio_1c2bg_41{border-color:GrayText}}.ds-radio_input_1c2bg_193:disabled~.ds-radio_label_1c2bg_108{color:#00000080}@media screen and (forced-colors:active){.ds-radio_input_1c2bg_193:disabled~.ds-radio_label_1c2bg_108{color:GrayText}}.ds-radio_input_1c2bg_193:focus{outline:none}.ds-radio_input_1c2bg_193:focus+.ds-radio_radio_1c2bg_41{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors:active){.ds-radio_input_1c2bg_193:focus+.ds-radio_radio_1c2bg_41{forced-color-adjust:auto;outline-color:Highlight}}@media screen and (forced-colors:active){.ds-radio_input_1c2bg_193:focus+.ds-radio_radio_1c2bg_41{border-color:Highlight}}@supports selector(:focus-visible){.ds-radio_input_1c2bg_193:focus{outline:none}.ds-radio_input_1c2bg_193:focus+.ds-radio_radio_1c2bg_41{outline:revert;outline-offset:revert}.ds-radio_input_1c2bg_193:focus-visible{outline:none}.ds-radio_input_1c2bg_193:focus-visible+.ds-radio_radio_1c2bg_41{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors:active){.ds-radio_input_1c2bg_193:focus-visible+.ds-radio_radio_1c2bg_41{forced-color-adjust:auto;outline-color:Highlight}}}@media(hover:hover){.ds-radio_input_1c2bg_193:hover:not(:disabled)+.ds-radio_radio_1c2bg_41{background-color:#0000001a}.ds-radio_input_1c2bg_193:hover:not(:disabled)+.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{background-color:#d9480f}}@media screen and (hover:hover)and (forced-colors:active){.ds-radio_input_1c2bg_193:hover:not(:disabled)+.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{background-color:Highlight}}@media screen and (hover:hover)and (forced-colors:active){.ds-radio_input_1c2bg_193:hover:not(:disabled)+.ds-radio_radio_1c2bg_41{border-color:Highlight}}.ds-radio_input--dark_1c2bg_294:disabled+.ds-radio_radio_1c2bg_41{border-color:#ffffff80}.ds-radio_input--dark_1c2bg_294:disabled+.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{background-color:#dadada}@media screen and (forced-colors:active){.ds-radio_input--dark_1c2bg_294:disabled+.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{background-color:GrayText}}@media screen and (forced-colors:active){.ds-radio_input--dark_1c2bg_294:disabled+.ds-radio_radio_1c2bg_41{border-color:GrayText}}.ds-radio_input--dark_1c2bg_294:disabled~.ds-radio_label_1c2bg_108{color:#ffffff80}@media screen and (forced-colors:active){.ds-radio_input--dark_1c2bg_294:disabled~.ds-radio_label_1c2bg_108{color:GrayText}}.ds-radio_input--dark_1c2bg_294:focus+.ds-radio_radio_1c2bg_41{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors:active){.ds-radio_input--dark_1c2bg_294:focus+.ds-radio_radio_1c2bg_41{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-radio_input--dark_1c2bg_294:focus-visible+.ds-radio_radio_1c2bg_41{outline:2px solid;outline-color:#fff;outline-offset:2px}@media screen and (forced-colors:active){.ds-radio_input--dark_1c2bg_294:focus-visible+.ds-radio_radio_1c2bg_41{forced-color-adjust:auto;outline-color:Highlight}}}@media(hover:hover){.ds-radio_input--dark_1c2bg_294:hover:not(:disabled)+.ds-radio_radio_1c2bg_41{background-color:#ffffff26}.ds-radio_input--dark_1c2bg_294:hover:not(:disabled)+.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{background-color:#f7a669}}@media screen and (hover:hover)and (forced-colors:active){.ds-radio_input--dark_1c2bg_294:hover:not(:disabled)+.ds-radio_radio_1c2bg_41 .ds-radio_dot_1c2bg_64{background-color:Highlight}}@media screen and (hover:hover)and (forced-colors:active){.ds-radio_input--dark_1c2bg_294:hover:not(:disabled)+.ds-radio_radio_1c2bg_41{border-color:Highlight}}