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

Welcome to the STIHL Design System react component library.

.ds-radio_root_14ige_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_14ige_24{cursor:not-allowed}.ds-radio_root--with-custom-area_14ige_27{max-width:none}.ds-radio_root--with-custom-area--above_14ige_30{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_14ige_38{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_14ige_38{transition:background-color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){.ds-radio_radio_14ige_38{transition-duration:0ms}}.ds-radio_radio_14ige_38 .ds-radio_dot_14ige_56{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_14ige_38 .ds-radio_dot_14ige_56{transition:opacity var(--ds-animation-duration, .1s) linear,background-color var(--ds-animation-duration, .1s) linear}@media (prefers-reduced-motion: reduce){.ds-radio_radio_14ige_38 .ds-radio_dot_14ige_56{transition-duration:0ms}}@media screen and (forced-colors: active){.ds-radio_radio_14ige_38 .ds-radio_dot_14ige_56{background-color:Highlight}}.ds-radio_radio--invalid_14ige_80{border-color:#d43b3b;box-shadow:0 0 0 1px #d43b3b}.ds-radio_label_14ige_85{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_14ige_102{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_14ige_113{column-gap:8px}.ds-radio_custom-area_14ige_117{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_14ige_125{opacity:.5}.ds-radio_custom-area--above_14ige_128{overflow-y:visible;max-height:unset;height:fit-content;margin-inline-start:0px}.ds-radio_hint_14ige_135{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_14ige_135{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_14ige_135{transition-duration:0ms}}.ds-radio_hint--visible_14ige_159{margin-block-start:4px;margin-block-end:4px}.ds-radio_hint--unchecked-hidden_14ige_163{height:0;opacity:0;pointer-events:none}.ds-radio_input_14ige_169{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_14ige_169:checked+.ds-radio_radio_14ige_38 .ds-radio_dot_14ige_56{opacity:1}.ds-radio_input_14ige_169:disabled+.ds-radio_radio_14ige_38{border-color:#00000080}.ds-radio_input_14ige_169:disabled+.ds-radio_radio_14ige_38 .ds-radio_dot_14ige_56{background-color:#dadada}@media screen and (forced-colors: active){.ds-radio_input_14ige_169:disabled+.ds-radio_radio_14ige_38 .ds-radio_dot_14ige_56{background-color:GrayText}}@media screen and (forced-colors: active){.ds-radio_input_14ige_169:disabled+.ds-radio_radio_14ige_38{border-color:GrayText}}.ds-radio_input_14ige_169:disabled~.ds-radio_label_14ige_85{color:#00000080}@media screen and (forced-colors: active){.ds-radio_input_14ige_169:disabled~.ds-radio_label_14ige_85{color:GrayText}}.ds-radio_input_14ige_169:focus{outline:none}.ds-radio_input_14ige_169:focus+.ds-radio_radio_14ige_38{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-radio_input_14ige_169:focus+.ds-radio_radio_14ige_38{forced-color-adjust:auto;outline-color:Highlight}}@media screen and (forced-colors: active){.ds-radio_input_14ige_169:focus+.ds-radio_radio_14ige_38{border-color:Highlight}}@supports selector(:focus-visible){.ds-radio_input_14ige_169:focus{outline:none}.ds-radio_input_14ige_169:focus+.ds-radio_radio_14ige_38{outline:revert;outline-offset:revert}.ds-radio_input_14ige_169:focus-visible{outline:none}.ds-radio_input_14ige_169:focus-visible+.ds-radio_radio_14ige_38{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-radio_input_14ige_169:focus-visible+.ds-radio_radio_14ige_38{forced-color-adjust:auto;outline-color:Highlight}}@media screen and (forced-colors: active){.ds-radio_input_14ige_169:focus-visible+.ds-radio_radio_14ige_38{border-color:Highlight}}}@media (hover: hover){.ds-radio_input_14ige_169:hover:not(:disabled)+.ds-radio_radio_14ige_38{background-color:#0000001a}.ds-radio_input_14ige_169:hover:not(:disabled)+.ds-radio_radio_14ige_38 .ds-radio_dot_14ige_56{background-color:#d9480f}}@media screen and (hover: hover) and (forced-colors: active){.ds-radio_input_14ige_169:hover:not(:disabled)+.ds-radio_radio_14ige_38 .ds-radio_dot_14ige_56{background-color:Highlight}}@media screen and (hover: hover) and (forced-colors: active){.ds-radio_input_14ige_169:hover:not(:disabled)+.ds-radio_radio_14ige_38{border-color:Highlight}}