@stihl-design-system/components/assets/ActionCard.DeWHOXFn.css

Welcome to the STIHL Design System react component library.

.ds-action-card_root_wkyrw_1{background-color:#fff;border-radius:4px;display:flex;flex-direction:column;height:fit-content;min-width:13rem;max-width:42.9375rem;box-shadow:0 0 0 1px #dadada}.ds-action-card_root_wkyrw_1{transition:box-shadow var(--ds-animation-duration, .1s) linear}@media(prefers-reduced-motion:reduce){.ds-action-card_root_wkyrw_1{transition-duration:0ms}}@media screen and (forced-colors:active){.ds-action-card_root_wkyrw_1{border:1px solid LinkText}}.ds-action-card_root--elevated_wkyrw_24{box-shadow:0 2px 12px #00000014,0 1px 2px #00000029}.ds-action-card_root--clickable_wkyrw_27{cursor:pointer;position:relative}@media(hover:hover){.ds-action-card_root--clickable_wkyrw_27:hover{box-shadow:0 2px 12px #00000029,0 1px 2px #0003}}.ds-action-card_root--clickable_wkyrw_27:has(:focus-visible) .ds-action-card_primary-action_wkyrw_36:after{outline:2px solid;outline-color:#252525;outline-offset:4px}@media screen and (forced-colors:active){.ds-action-card_root--clickable_wkyrw_27:has(:focus-visible) .ds-action-card_primary-action_wkyrw_36:after{forced-color-adjust:auto;outline-color:Highlight}}.ds-action-card_root--clickable_wkyrw_27:has(:focus-within) .ds-action-card_primary-action_wkyrw_36:focus{outline:none}.ds-action-card_root--clickable_wkyrw_27 :is(.ds-action-card_media-wrapper_wkyrw_50,.ds-action-card_header_wkyrw_50,.ds-action-card_footer_wkyrw_50,.ds-action-card_supplementary_wkyrw_50):has(button,input,select,textarea,a,label,details,summary,video,audio,iframe){position:relative;z-index:2}.ds-action-card_root--horizontal_wkyrw_64{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto;grid-template-areas:"media content" "supplementary supplementary";width:100%;max-width:89.6875rem}.ds-action-card_root--horizontal_wkyrw_64 .ds-action-card_media-wrapper_wkyrw_50{grid-area:media;aspect-ratio:1/1;max-width:21.5625rem}.ds-action-card_root--horizontal_wkyrw_64 .ds-action-card_media-wrapper_wkyrw_50 img{border-top-right-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;aspect-ratio:1/1}.ds-action-card_root--horizontal_wkyrw_64 .ds-action-card_content_wkyrw_83{grid-area:content;height:auto;padding:32px}.ds-action-card_root--horizontal_wkyrw_64 .ds-action-card_content--padding-small_wkyrw_88{padding:16px}.ds-action-card_root--horizontal_wkyrw_64 .ds-action-card_supplementary_wkyrw_50{grid-area:supplementary;padding-block:8px;padding-inline:16px}.ds-action-card_root--horizontal-has-supplementary_wkyrw_96 .ds-action-card_media-wrapper_wkyrw_50 img{border-bottom-left-radius:0}.ds-action-card_root--padding-small_wkyrw_99 .ds-action-card_supplementary_wkyrw_50{padding-block:4px;padding-inline:0px}.ds-action-card_media-wrapper_wkyrw_50{width:100%;height:auto;aspect-ratio:16/9}.ds-action-card_media-wrapper_wkyrw_50 img{border-top-left-radius:4px;border-top-right-radius:4px;width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9}.ds-action-card_content_wkyrw_83{display:flex;flex-direction:column;gap:24px;padding:24px;height:100%;order:1}.ds-action-card_content--padding-small_wkyrw_88{padding:16px}.ds-action-card_footer_wkyrw_50{margin-block-start:auto}.ds-action-card_supplementary_wkyrw_50{display:flex;border-top:1px solid #DADADA;flex-direction:column;align-items:stretch;gap:16px;padding-block:6px;padding-inline:8px;order:2}.ds-action-card_primary-action_wkyrw_36{appearance:none;background:transparent;border:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;padding:0;margin:0;position:absolute;inset:0;z-index:1}.ds-action-card_primary-action_wkyrw_36:after{content:"";position:absolute;z-index:1;cursor:pointer;inset:0}.ds-action-card_primary-action_wkyrw_36:focus{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors:active){.ds-action-card_primary-action_wkyrw_36:focus{forced-color-adjust:auto;outline-color:Highlight}}.ds-action-card_primary-action-label_wkyrw_179{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}