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

DNB Eufemia Design System UI Library

/*
* Accordion component
*
*/
/*
 * Utilities
 */
.dnb-accordion {
  --accordion-border-width: 0.0625rem;
  --accordion-border-radius: 0.5rem;
  --accordion-easing: var(--easing-default);
  --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;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-small);
  line-height: var(--line-height-basis);
}
.dnb-accordion__header {
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  border: var(--accordion-border-width) solid transparent;
  border-radius: var(--accordion-border-radius);
}
.dnb-accordion__header * {
  pointer-events: none;
}
.dnb-accordion__header--prevent-click {
  pointer-events: none;
}
.dnb-accordion__header__wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;
}
.dnb-accordion__header--description .dnb-accordion__header__wrapper {
  margin-top: var(--accordion-header-margin-vertical--description);
  margin-bottom: var(--accordion-header-margin-vertical--description);
}
.dnb-accordion__header__container {
  margin: 0 1rem;
}
.dnb-accordion__header__icon {
  align-self: var(--accordion-header-icon-alignment);
  margin: var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  transition: transform 400ms var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-accordion__header__icon {
    transition-duration: 0.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-right: var(--accordion-header-icon-margin);
  margin-left: var(--accordion-header-icon-gutter);
  order: 3;
}
.dnb-accordion__header--icon-right .dnb-accordion__header__container {
  order: 1;
}
.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper {
  order: 2;
  margin-right: 0;
  margin-left: var(--accordion-header-wrapper-margin--icon-right);
}
.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;
}
.dnb-accordion__header--expanded {
  --accordion-title-font-weight: var(
    --accordion-title-font-weight--expanded
  );
}
.dnb-accordion__header__title {
  font-size: var(--font-size-basis);
  line-height: var(--line-height-basis);
  font-weight: var(--accordion-title-font-weight);
}
.dnb-accordion__header__description {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-basis);
}
.dnb-accordion__header__title + .dnb-accordion__header__description {
  margin-top: 0.25rem;
}
.dnb-accordion__header__description + .dnb-accordion__header__title {
  margin-top: 0.25rem;
}
.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon {
  transform: rotate(-180deg);
}
.dnb-accordion__content {
  display: flex;
  width: 100%;
  will-change: height;
  transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-accordion__content {
    transition-duration: 0.01ms;
  }
}
.dnb-accordion__content__inner {
  width: 100%;
  margin: var(--accordion-content-margin);
  padding: var(--accordion-content-padding);
}
.dnb-accordion-group--single-container {
  transition: min-height 1s var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-accordion-group--single-container {
    transition-duration: 0.01ms;
  }
}
.dnb-accordion-group--single-container .dnb-accordion {
  position: static;
  max-width: 60rem;
}
@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: 0.01ms;
  }
}
@media screen and (min-width: 40.00625em) {
  .dnb-accordion-group--single-container .dnb-accordion__content__inner {
    margin-top: 0;
  }
}
@media screen and (min-width: 40.00625em) {
  .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 {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 60%;
  }
}
.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;
}