@stihl-design-system/components/assets/Dialog.DJkn65Es.css

Welcome to the STIHL Design System react component library.

body:has(dialog[open]){overflow:hidden}:where(.ds-dialog_root_kvopn_5){max-width:min(100vw - 48px,719px)}@media (min-width: 768px){:where(.ds-dialog_root_kvopn_5){max-width:min(100vw - 80px,719px)}}.ds-dialog_root_kvopn_5{background-color:#fff;border:none;overflow:hidden;padding:0;max-height:calc(100vh - 48px);min-width:272px;opacity:0;transform:translateY(-100%);transition:display var(--ds-animation-duration, .4s) allow-discrete,overlay var(--ds-animation-duration, .4s) allow-discrete,opacity var(--ds-animation-duration, .4s) cubic-bezier(.5,0,1,1),transform var(--ds-animation-duration, .4s) cubic-bezier(.5,0,1,1)}@media (prefers-reduced-motion: reduce){.ds-dialog_root_kvopn_5{transition-duration:0ms}}@media (min-width: 768px){.ds-dialog_root_kvopn_5{max-height:calc(100vh - 80px)}}@media screen and (forced-colors: active){.ds-dialog_root_kvopn_5{border:1px solid transparent}}.ds-dialog_root_kvopn_5[open]{opacity:1;transform:translateY(0);transition:display var(--ds-animation-duration, .4s) allow-discrete,overlay var(--ds-animation-duration, .4s) allow-discrete,opacity var(--ds-animation-duration, .4s) cubic-bezier(0,0,.5,1),transform var(--ds-animation-duration, .4s) cubic-bezier(0,0,.5,1)}@media (prefers-reduced-motion: reduce){.ds-dialog_root_kvopn_5[open]{transition-duration:0ms}}@starting-style{.ds-dialog_root_kvopn_5[open]{opacity:0;transform:translateY(-100%)}}.ds-dialog_root_kvopn_5[open]::backdrop{opacity:1;transition:display var(--ds-animation-duration, .4s) allow-discrete,overlay var(--ds-animation-duration, .4s) allow-discrete,opacity var(--ds-animation-duration, .4s) cubic-bezier(0,0,.5,1)}@media (prefers-reduced-motion: reduce){.ds-dialog_root_kvopn_5[open]::backdrop{transition-duration:0ms}}@starting-style{.ds-dialog_root_kvopn_5[open]::backdrop{opacity:0}}.ds-dialog_root_kvopn_5::backdrop{background-color:#00000080;position:fixed;inset:0;opacity:0;transition:display var(--ds-animation-duration, .4s) allow-discrete,overlay var(--ds-animation-duration, .4s) allow-discrete,opacity var(--ds-animation-duration, .4s) cubic-bezier(.5,0,1,1)}@media (prefers-reduced-motion: reduce){.ds-dialog_root_kvopn_5::backdrop{transition-duration:0ms}}.ds-dialog_root_kvopn_5 a:not([class]){display:inline;padding-inline-end:2px;padding-inline-start:2px;padding-block-start:0;padding-block-end:0;line-height:inherit;font-size:inherit;text-decoration-skip-ink:auto;text-decoration-line:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:currentColor}:where(.ds-dialog_root_kvopn_5 a:not([class]))[href^="http://"]:after,:where(.ds-dialog_root_kvopn_5 a:not([class]))[href^="https://"]:after,:where(.ds-dialog_root_kvopn_5 a:not([class]))[href^="#"]:after{display:inline-block;margin-inline-start:.375em;width:.75em;height:.75em}.ds-dialog_root_kvopn_5 a:not([class]){color:#252525}.ds-dialog_root_kvopn_5 a:not([class]):link,.ds-dialog_root_kvopn_5 a:not([class]):visited{color:#252525}.ds-dialog_root_kvopn_5 a:not([class]):active{background-color:#0000001a;color:#252525}@media (hover: hover){.ds-dialog_root_kvopn_5 a:not([class]):hover{background-color:#0000001a;color:#252525}}@media screen and (hover: hover) and (forced-colors: active){.ds-dialog_root_kvopn_5 a:not([class]):hover{background-color:Canvas}}.ds-dialog_root_kvopn_5 a:not([class])[href^="http://"]:after,.ds-dialog_root_kvopn_5 a:not([class])[href^="https://"]:after{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23252525' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath fill-rule='evenodd' d='M9 2V0h7v7h-2V3.4L8.1 9.3 6.7 7.9 12.6 2H9Zm5 8h-2v4H2V4h4V2H0v14h14v-6Z' clip-rule='evenodd'/%3E%3C/svg%3E")}.ds-dialog_root_kvopn_5 a:not([class])[href^="#"]:after{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23252525' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath d='M14.4 9.6 8 16 1.6 9.6 3 8.2l4 4V0h2v12.2l4-4 1.4 1.4Z'/%3E%3C/svg%3E")}.ds-dialog_root_kvopn_5 a:not([class]):focus{outline:2px solid;outline-color:#252525;outline-offset:0}@media screen and (forced-colors: active){.ds-dialog_root_kvopn_5 a:not([class]):focus{forced-color-adjust:auto;outline-color:Highlight}}@supports selector(:focus-visible){.ds-dialog_root_kvopn_5 a:not([class]):focus{outline:revert;outline-offset:revert}.ds-dialog_root_kvopn_5 a:not([class]):focus-visible{outline:2px solid;outline-color:#252525;outline-offset:0}@media screen and (forced-colors: active){.ds-dialog_root_kvopn_5 a:not([class]):focus-visible{forced-color-adjust:auto;outline-color:Highlight}}}.ds-dialog_root_kvopn_5 a:not([class]){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-dialog_root_kvopn_5 a:not([class]){transition-duration:0ms}}.ds-dialog_content-wrapper_kvopn_166{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh - 48px)}.ds-dialog_content-wrapper--no-footer_kvopn_172{padding-block-end:16px}@media (min-width: 768px){.ds-dialog_content-wrapper_kvopn_166{max-height:calc(100vh - 80px)}}.ds-dialog_content-wrapper_kvopn_166 .ds-dialog_close-button_kvopn_180{position:absolute;top:16px;right:16px;z-index:2}@media (min-width: 768px){.ds-dialog_content-wrapper_kvopn_166 .ds-dialog_close-button_kvopn_180{top:24px;right:24px}}.ds-dialog_header_kvopn_193,.ds-dialog_content_kvopn_166,.ds-dialog_footer_kvopn_195{padding-block-start:16px;padding-block-end:16px;padding-inline-start:16px;padding-inline-end:16px}@media (min-width: 768px){.ds-dialog_header_kvopn_193,.ds-dialog_content_kvopn_166,.ds-dialog_footer_kvopn_195{padding-block-start:24px;padding-block-end:24px;padding-inline-start:24px;padding-inline-end:24px}}.ds-dialog_header_kvopn_193{min-height:4rem;flex-shrink:0}.ds-dialog_header--scrollable_kvopn_216{border-bottom:1px solid #B1B1B1;padding-block-end:15px}@media (min-width: 768px){.ds-dialog_header--scrollable_kvopn_216{padding-block-end:23px}}.ds-dialog_header--close-button_kvopn_225{padding-inline-end:4rem}@media (min-width: 768px){.ds-dialog_header--close-button_kvopn_225{padding-inline-end:4.5rem}}.ds-dialog_content_kvopn_166{position:relative;overflow-y:auto}.ds-dialog_content--no-footer_kvopn_238{padding-block-end:0}.ds-dialog_footer_kvopn_195{max-height:13rem}.ds-dialog_footer--scrollable_kvopn_245{border-top:1px solid #B1B1B1;padding-block-start:15px}@media (min-width: 768px){.ds-dialog_footer--scrollable_kvopn_245{padding-block-start:23px}}