rh-accordion-header.css

:host {
  --_padding-block-start: var(--rh-space-lg, 16px);
  --_padding-inline-end: var(--rh-space-xl, 24px);
  --_padding-block-end: var(--rh-space-lg, 16px);
  --_padding-inline-start: var(--rh-space-xl, 24px);
  --_text-color: var(--rh-color-text-primary-on-light, #151515);
  --_active-text-color: var(--rh-color-text-primary-on-light, #151515);
  --_background-color: var(--rh-color-surface-lightest, #ffffff);
  --_active-background-color: var(--_rhds-background-color, #f2f2f2);
  --_font-size: var(--rh-font-size-body-text-md, 1rem);
  --_after-background-color: transparent;
  --_expanded-background-color: var(--rh-color-accent-brand-on-light, #ee0000);
  --_isRTL: -1;
}

#heading {
  font-size: 100%;
  padding: 0;
  margin: 0;
  color: var(--rh-color-text-primary-on-light, #151515);
  background-color: var(--_rhds-background-color, var(--rh-color-surface-lightest, #ffffff));
  font-weight: var(--rh-font-weight-heading-medium, 500);
}

button,
a {
  cursor: pointer;
}

.dark {
  --_text-color: var(--rh-color-text-primary-on-dark, #ffffff);
  --_background-color: var(--rh-color-surface-darkest, #151515);
  --_active-background-color: var(--rh-color-surface-darkest, #151515);
  --_active-text-color: var(--rh-color-text-primary-on-dark, #ffffff);
  --_expanded-background-color: var(--rh-color-accent-brand-on-dark, #ee0000);
}

.rtl {
  --_isRTL: 1;
}

:host([large]) {
  --_font-size: var(--rh-font-size-body-text-lg, 1.125rem);
  --_padding-block-start: var(--rh-space-lg, 16px);
  --_padding-inline-end: var(--rh-space-xl, 24px);
  --_padding-block-end: var(--rh-space-lg, 16px);
  --_padding-inline-start: var(--rh-space-xl, 24px);
}

:host([expanded]) {
  border-inline-end:
    var(--rh-border-width-sm, 1px)
    solid
    var(--_border-color, var(--rh-color-border-subtle-on-dark, #707070));
}

:host(.animating) #button,
:host([expanded]) #button {
  border-inline-end-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
  border-inline-start-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
}

#button,
#button:before,
#button:after {
  background-color: var(--_background-color, transparent);
}

#icon {
  width: 16px;
  height: 16px;
  will-change: rotate;
  transition: rotate 0.2s ease-in 0s;
}

#button {
  padding:
    var(--_padding-block-start)
    var(--_padding-inline-end)
    var(--_padding-block-end)
    var(--_padding-inline-start);
  font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
  font-size: var(--_font-size, var(--rh-font-size-body-text-md, 1rem));
  font-weight: var(--rh-font-weight-heading-medium, 500);
  color: var(--_text-color);
}

#button #icon {
  fill: var(--_text-color);
}

#button[aria-expanded="true"] {
  --_after-background-color: var(--_expanded-background-color);
}

#button:after {
  inset-block-start: -1px;
  width: var(--rh-border-width-lg, 3px);
  background-color: var(--_after-background-color);
}

span {
  overflow: hidden;
  text-align: start;
}

[part="container"] {
  display: flex;
  gap: var(--rh-space-xl, 24px);
  container-type: inline-size;
}

#header-container {
  display: flex;
  flex-direction: column;
  gap: var(--rh-space-md, 8px);
}

[part="accents"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rh-space-md, 8px);
}

#button[aria-expanded="true"] #icon {
  rotate: calc(var(--_isRTL, -1) * 180deg);
}

#button:hover,
#button:active,
#button:focus {
  background-color: var(--_active-background-color);
}

#button:hover span,
#button:focus span,
#button:active span {
  color: var(--_active-text-color);
}

.toggle,
.toggle:before,
.toggle:after {
  padding: 0;
  margin: 0;
}

.toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
}

.toggle:after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
}

@container (min-width: 576px) {
  #header-container:not(.bottom) {
    flex-direction: row;
  }
}