@dnb/eufemia/components/help-button/style/dnb-help-button.min.css

DNB Eufemia Design System UI Library

.dnb-help-button.dnb-help-button__inline--open{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-help-button__inline svg{will-change:transform}.dnb-help-button__inline svg:nth-of-type(2){bottom:0;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0}.dnb-help-button__inline--open svg:first-of-type{opacity:0}.dnb-help-button__inline--open svg:nth-of-type(2){animation:rotate-icon-in .4s var(--easing-default) forwards}.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:first-of-type{animation:animate-question .4s var(--easing-default) .2s forwards;opacity:0}.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2){animation:rotate-icon-out .4s var(--easing-default) forwards}.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg,html[data-visual-test] .dnb-help-button__inline svg{animation-duration:0ms}@media (prefers-reduced-motion:reduce){.dnb-help-button__inline svg{animation-duration:.01ms!important}}@keyframes rotate-icon-in{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(90deg)}}@keyframes rotate-icon-out{0%{opacity:1;transform:rotate(90deg)}30%{opacity:1}to{opacity:0;transform:rotate(0deg)}}@keyframes animate-question{0%{opacity:0;transform:rotate(10deg)}to{opacity:1;transform:rotate(0deg)}}.dnb-help-button__content .dnb-section{--background-color:var(--help-button-content-background);--rounded-corner--value:calc(var(--card-outline-width) + 0.5rem)}.dnb-help-button__content .dnb-section .dnb-p{max-width:var(--prose-max-width);transform:translate3d(0,-.5rem,0);transition:transform .4s var(--easing-default) 40ms}@media (prefers-reduced-motion:reduce){.dnb-help-button__content .dnb-section .dnb-p{transition-duration:.01ms}}.dnb-help-button__content{--help-button-indent-width:var(--card-outline-width)}:not(.dnb-card) .dnb-help-button__content .dnb-section{--outset-left:calc(var(--spacing-medium) + var(--help-button-indent-width));--outset-right:calc(var(--spacing-medium) + var(--help-button-indent-width))}.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p{transform:translateZ(0)}.dnb-help-button .dnb-button__bounding{transform:scale(1.5)}