@dnb/eufemia/components/accordion/style/dnb-accordion.min.css

DNB Eufemia Design System UI Library

.dnb-accordion{--accordion-color-text:var(--accordion-color-text--default);--accordion-color-description:var(
    --accordion-color-description--default
  );--accordion-color-bg:var(--accordion-color-bg--default);--accordion-color-border:var(--accordion-color-border--default);--accordion-border-width:var(
    --accordion-border-width--default,0.0625rem
  );--accordion-border-radius:0.5rem;--accordion-easing:var(--easing-default);--accordion-border-inset:var(--accordion-border-inset--default,inset);--accordion-header-margin-vertical:1.25rem;--accordion-header-margin-vertical--description:0.75rem;--accordion-header-wrapper-margin:1rem;--accordion-header-wrapper-margin--icon-right:1rem;--accordion-header-icon-gutter:1rem;--accordion-header-icon-margin:1rem;--accordion-header-icon-alignment:flex-start;--accordion-title-font-weight:var(--font-weight-basis);--accordion-title-font-weight--expanded:var(--font-weight-medium);--accordion-content-margin:1rem 0 0 0;--accordion-content-padding:0;display:flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis);position:relative}.dnb-accordion__header{align-items:center;background-color:var(--accordion-color-bg);border:none;border-radius:var(--accordion-border-radius);box-shadow:var(--ui-accordion-box-shadow);color:var(--accordion-color-text,var(--accordion-color-text--default));cursor:pointer;display:flex;outline:none}html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]){--accordion-color-text:var(--accordion-color-text--hover);--accordion-color-description:var(
    --accordion-color-description--hover
  );--accordion-color-bg:var(--accordion-color-bg--hover);--accordion-color-border:var(--accordion-color-border--hover);--accordion-border-width:var(--accordion-border-width--hover);--accordion-border-inset:var(--accordion-border-inset--hover)}html:not([data-whatintent=touch]) .dnb-accordion__header--after-click:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--after-click:hover:not([disabled]){--accordion-color-text:var(--accordion-color-text--after-click);--accordion-color-description:var(
    --accordion-color-description--after-click
  );--accordion-color-bg:var(--accordion-color-bg--after-click);--accordion-color-border:var(
    --accordion-color-border--after-click
  )}.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]){--accordion-color-text:var(--accordion-color-text--active);--accordion-color-description:var(
    --accordion-color-description--active
  );--accordion-color-bg:var(--accordion-color-bg--active);--accordion-color-border:var(--accordion-color-border--active);--accordion-border-width:var(--accordion-border-width--active);--accordion-border-inset:var(--accordion-border-inset--active)}html:not([data-whatinput=touch]) .dnb-accordion__header:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatinput=touch]) .dnb-accordion__header:focus-visible:not([disabled]){--accordion-color-text:var(--accordion-color-text--focus);--accordion-color-description:var(
    --accordion-color-description--focus
  );--accordion-color-bg:var(--accordion-color-bg--focus);--accordion-color-border:var(--accordion-color-border--focus);--accordion-border-width:var(--accordion-border-width--focus);--accordion-border-inset:var(--accordion-border-inset--focus)}.dnb-accordion__header[disabled]{--accordion-color-text:var(--accordion-color-text--disabled);--accordion-color-bg:var(--accordion-color-bg--disabled);--accordion-color-border:var(--accordion-color-border--disabled);--accordion-color-description:var(
    --accordion-color-description--disabled
  )}.dnb-accordion__header *,.dnb-accordion__header--prevent-click{pointer-events:none}.dnb-accordion__header__wrapper{display:flex;flex-direction:column;margin:var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin-bottom:var(--accordion-header-margin-vertical--description);margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{align-self:var(--accordion-header-icon-alignment);font-size:var(--font-size-small);line-height:var(--line-height-small);margin:var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);transition:transform .4s var(--accordion-easing)}@media (prefers-reduced-motion:reduce){.dnb-accordion__header__icon{transition-duration:.01ms}}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:var(--accordion-header-margin-vertical--description)}.dnb-accordion__header--icon-right{justify-content:space-between}.dnb-accordion__header--icon-right .dnb-accordion__header__icon{margin-left:var(--accordion-header-icon-gutter);margin-right:var(--accordion-header-icon-margin);order:3}.dnb-accordion__header--icon-right .dnb-accordion__header__container{order:1}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper{margin-left:var(--accordion-header-wrapper-margin--icon-right);margin-right:0;order:2}.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header--icon-right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover:not([disabled]){z-index:1}.dnb-accordion__header--filled,.dnb-accordion__header--outlined{--ui-accordion-box-shadow:var(
      --accordion-border-inset,var(--accordion-border-inset--default)
    ) 0 0 0 var(
      --accordion-border-width,var(--accordion-border-width--default)
    ) var(
      --accordion-color-border,var(--accordion-color-border--default)
    )}.dnb-accordion__header--expanded{--accordion-title-font-weight:var(
    --accordion-title-font-weight--expanded
  )}.dnb-accordion__header__title{font-size:var(--font-size-basis);font-weight:var(--accordion-title-font-weight);line-height:var(--line-height-basis)}.dnb-accordion__header__description{color:var(--accordion-color-description,var(--accordion-color-description--default));font-size:var(--font-size-small);font-weight:var(--font-weight-basis);line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-180deg)}.dnb-accordion__content{display:flex;transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}@media (prefers-reduced-motion:reduce){.dnb-accordion__content{transition-duration:.01ms}}.dnb-accordion__content__inner{margin:var(--accordion-content-margin);padding:var(--accordion-content-padding);width:100%}.dnb-accordion-group--single-container{transition:min-height 1s var(--accordion-easing)}@media (prefers-reduced-motion:reduce){.dnb-accordion-group--single-container{transition-duration:.01ms}}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40.00625em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;transition:opacity 1s var(--accordion-easing)}}@media screen and (min-width:40.00625em) and (prefers-reduced-motion:reduce){.dnb-accordion-group--single-container .dnb-accordion__content{transition-duration:.01ms}}@media screen and (min-width:40.00625em){.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40.00625em){.dnb-accordion-group--single-container .dnb-accordion-group__children{display:flex;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{transition:none}