@dnb/eufemia/cjs/components/accordion/style/themes/dnb-accordion-theme-ui.css

DNB Eufemia Design System UI Library

/*
 * Accordion theme
 *
 */
/*
 * Utilities
 */
.dnb-accordion__header {
  color: var(--ui-accordion-color--override, var(--ui-accordion-color));
  background-color: var(--ui-accordion-background--override, var(--ui-accordion-background));
  box-shadow: var(--ui-accordion-box-shadow);
  border: none;
  /* 
   * VARIANTS
   * Each variant is mutually exclusive
   */
  /* 
   * STATES
   * States that can exist across all variants.
   */
}
.dnb-accordion__header__description {
  color: var(--ui-accordion-description-color--override, var(--ui-accordion-description-color));
}
.dnb-accordion__header--outlined, .dnb-accordion__header--filled {
  --ui-accordion-border-inset: inset;
  --ui-accordion-box-shadow: var(--ui-accordion-border-inset) 0 0 0
    var(--accordion-border-width)
    var(
      --ui-accordion-border-color--override,
      var(--ui-accordion-border-color)
    );
}
.dnb-accordion__header--outlined[disabled], .dnb-accordion__header--filled[disabled] {
  --ui-accordion-color: var(--color-sea-green-30);
  --ui-accordion-background-: var(--color-white);
  --ui-accordion-border-color: var(--color-sea-green-30);
  --ui-accordion-description-color: var(--ui-accordion-color);
  --ui-accordion-expanded-color: var(--color-white);
  --ui-accordion-expanded-background: var(--color-sea-green-30);
}
.dnb-accordion__header--outlined {
  --ui-accordion-color: var(--color-emerald-green);
  --ui-accordion-background: var(--color-white);
  --ui-accordion-border-color: var(--color-black-8);
  --ui-accordion-description-color: var(--color-black-55);
  --ui-accordion-expanded-color: var(--color-white);
  --ui-accordion-expanded-background: var(--color-sea-green);
  --ui-accordion-expanded-border-color: var(
    --ui-accordion-expanded-background
  );
  --ui-accordion-expanded-description-color: var(
    --ui-accordion-expanded-color
  );
}
html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:focus-visible:not([disabled]) {
  --accordion-border-width: 0.125rem;
  --ui-accordion-border-color: var(--color-emerald-green);
  --ui-accordion-expanded-border-color: var(--color-emerald-green);
  --ui-accordion-expanded-color: var(--color-emerald-green);
  --ui-accordion-expanded-background: var(--color-mint-green);
}
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]) {
  --accordion-border-width: 0.125rem;
  --ui-accordion-color: var(--color-emerald-green);
  --ui-accordion-background: var(--color-white);
  --ui-accordion-border-color: var(--color-emerald-green);
  --ui-accordion-description-color: var(--color-black-55);
  --ui-accordion-border-inset: ;
  --ui-accordion-expanded-color: var(--ui-accordion-color);
  --ui-accordion-expanded-background: var(--ui-accordion-background);
  --ui-accordion-expanded-border-color: var(
    --ui-accordion-border-color
  );
  --ui-accordion-expanded-description-color: var(
    --ui-accordion-description-color
  );
  --ui-accordion-after-click-color: var(--color-white);
  --ui-accordion-after-click-background: var(--color-sea-green);
  --ui-accordion-after-click-border-color: var(--color-sea-green);
  --ui-accordion-after-click-description-color: var(--color-white);
  z-index: 1;
}
.dnb-accordion__header--outlined:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active[disabled] {
  cursor: not-allowed;
}
.dnb-accordion__header--outlined:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active:not([disabled]) {
  --accordion-border-width: 0.0625rem;
  --ui-accordion-background: var(--color-pistachio);
  --ui-accordion-border-inset: inset;
}
.dnb-accordion__header--filled {
  --accordion-border-width: 0.125rem;
  --accordion-title-font-weight--expanded: var(--font-weight-basis);
  --ui-accordion-color: var(--color-emerald-green);
  --ui-accordion-background: var(--color-pistachio);
  --ui-accordion-border-color: var(--color-pistachio);
  --ui-accordion-description-color: var(--color-black-55);
}
html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover:not([disabled]) {
  --ui-accordion-background: var(--color-white);
}
.dnb-accordion__header--filled:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active[disabled] {
  cursor: not-allowed;
}
.dnb-accordion__header--filled:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active:not([disabled]) {
  --ui-accordion-color: var(--color-white);
  --ui-accordion-background: var(--color-sea-green);
  --ui-accordion-border-color: var(--color-sea-green);
  --ui-accordion-description-color: ar(--color-white);
}
html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:not([disabled]) {
  --ui-accordion-border-color: var(--color-sea-green);
}
.dnb-accordion__header--expanded {
  --ui-accordion-color--override: var(
    --ui-accordion-expanded-color--override,
    var(--ui-accordion-expanded-color)
  );
  --ui-accordion-background--override: var(
    --ui-accordion-expanded-background--override,
    var(--ui-accordion-expanded-background)
  );
  --ui-accordion-border-color--override: var(
    --ui-accordion-expanded-border-color--override,
    var(--ui-accordion-expanded-border-color)
  );
  --ui-accordion-description-color--override: var(
    --ui-accordion-expanded-description-color--override,
    var(--ui-accordion-expanded-description-color)
  );
}
.dnb-accordion__header--after-click {
  --ui-accordion-expanded-color--override: var(
    --ui-accordion-after-click-color
  );
  --ui-accordion-expanded-background--override: var(
    --ui-accordion-after-click-background
  );
  --ui-accordion-expanded-border-color--override: var(
    --ui-accordion-after-click-border-color
  );
  --ui-accordion-expanded-description-color--override: var(
    --ui-accordion-after-click-description-color
  );
}