@stihl-design-system/components/assets/radio.CgpGvYc-.css

Welcome to the STIHL Design System react component library.

.ds-radio_root_2idos_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: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--disabled_2idos_24{cursor:not-allowed}.ds-radio_root--with-custom-area_2idos_27{max-width:none}.ds-radio_root--with-custom-area--above_2idos_30{grid-template-areas:"custom-area custom-area" "dot label";grid-template-columns:auto 1fr;grid-template-rows:auto}.ds-radio_radio_2idos_36{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}.ds-radio_radio_2idos_36{transition:background-color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){.ds-radio_radio_2idos_36{transition-duration:0ms}}.ds-radio_radio_2idos_36 .ds-radio_dot_2idos_54{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_2idos_36 .ds-radio_dot_2idos_54{transition:opacity var(--ds-animation-duration, .1s) linear,background-color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){.ds-radio_radio_2idos_36 .ds-radio_dot_2idos_54{transition-duration:0ms}}@media screen and (forced-colors: active){.ds-radio_radio_2idos_36 .ds-radio_dot_2idos_54{background-color:Highlight}}.ds-radio_radio--invalid_2idos_78{border-color:#d43b3b;box-shadow:0 0 0 1px #d43b3b}.ds-radio_label_2idos_83{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-weight:400;font-size:1rem;line-height:1.25;font-size-adjust:.414;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_2idos_100{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-radio_label--with-custom-area_2idos_111{column-gap:8px}.ds-radio_custom-area_2idos_115{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--above_2idos_123{overflow-y:visible;max-height:unset;margin-inline-start:0px}.ds-radio_hint_2idos_129{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-weight:400;font-size:.875rem;line-height:1.14;font-size-adjust:.414;display:block;max-width:34em;grid-column:span 2;opacity:1}.ds-radio_hint_2idos_129{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_2idos_129{transition-duration:0ms}}.ds-radio_hint--visible_2idos_153{margin-block-start:4px;margin-block-end:4px}.ds-radio_hint--unchecked-hidden_2idos_157{height:0;opacity:0;pointer-events:none}.ds-radio_input_2idos_163{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_2idos_163:checked+.ds-radio_radio_2idos_36 .ds-radio_dot_2idos_54{opacity:1}.ds-radio_input_2idos_163:disabled+.ds-radio_radio_2idos_36{border-color:#00000080}.ds-radio_input_2idos_163:disabled+.ds-radio_radio_2idos_36 .ds-radio_dot_2idos_54{background-color:#00000080}@media screen and (forced-colors: active){.ds-radio_input_2idos_163:disabled+.ds-radio_radio_2idos_36 .ds-radio_dot_2idos_54{background-color:GrayText}}@media screen and (forced-colors: active){.ds-radio_input_2idos_163:disabled+.ds-radio_radio_2idos_36{border-color:GrayText}}.ds-radio_input_2idos_163:disabled~.ds-radio_label_2idos_83{color:#00000080}@media screen and (forced-colors: active){.ds-radio_input_2idos_163:disabled~.ds-radio_label_2idos_83{color:GrayText}}.ds-radio_input_2idos_163:focus{outline:none}.ds-radio_input_2idos_163:focus+.ds-radio_radio_2idos_36{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-radio_input_2idos_163:focus+.ds-radio_radio_2idos_36{forced-color-adjust:auto;outline-color:Highlight}}@media screen and (forced-colors: active){.ds-radio_input_2idos_163:focus+.ds-radio_radio_2idos_36{border-color:Highlight}}@supports selector(:focus-visible){.ds-radio_input_2idos_163:focus{outline:none}.ds-radio_input_2idos_163:focus+.ds-radio_radio_2idos_36{outline:revert;outline-offset:revert}.ds-radio_input_2idos_163:focus-visible{outline:none}.ds-radio_input_2idos_163:focus-visible+.ds-radio_radio_2idos_36{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-radio_input_2idos_163:focus-visible+.ds-radio_radio_2idos_36{forced-color-adjust:auto;outline-color:Highlight}}@media screen and (forced-colors: active){.ds-radio_input_2idos_163:focus-visible+.ds-radio_radio_2idos_36{border-color:Highlight}}}@media (hover: hover){.ds-radio_input_2idos_163:hover:not(:disabled)+.ds-radio_radio_2idos_36{background-color:#0000001a}.ds-radio_input_2idos_163:hover:not(:disabled)+.ds-radio_radio_2idos_36 .ds-radio_dot_2idos_54{background-color:#d9480f}}@media screen and (hover: hover) and (forced-colors: active){.ds-radio_input_2idos_163:hover:not(:disabled)+.ds-radio_radio_2idos_36 .ds-radio_dot_2idos_54{background-color:Highlight}}@media screen and (hover: hover) and (forced-colors: active){.ds-radio_input_2idos_163:hover:not(:disabled)+.ds-radio_radio_2idos_36{border-color:Highlight}}