deploy: 33535ef

assets/packages/@rhds/elements/elements/rh-accordion/rh-accordion-header.css

@@ -3,7 +3,6 @@
   --_padding-inline-end: var(--rh-space-xl, 24px);
   --_padding-block-end: var(--rh-space-lg, 16px);
   --_padding-inline-start: var(--rh-space-xl, 24px);
-  --_active-text-color: var(--rh-color-text-primary);
   --_font-size: var(--rh-font-size-body-text-lg, 1.125rem);
   --_after-background-color: transparent;
   --_expanded-background-color: var(--rh-color-accent-brand);
@@ -48,19 +47,18 @@ a {
   border-inline-start-color: var(--rh-color-border-subtle);
 }
 
-#button,
-#button:before,
-#button:after {
-  background-color: var(--rh-color-surface);
-}
-
 #icon {
   width: 16px;
   height: 16px;
   will-change: rotate;
   transition: rotate 0.2s ease-in 0s;
 }
 
+span {
+  overflow: hidden;
+  text-align: start;
+}
+
 #button {
   width: 100%;
   padding:
@@ -71,36 +69,60 @@ a {
   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);
   color: var(--rh-color-text-primary);
-}
 
-#button #icon {
-  fill: currentcolor;
-}
+  & #icon {
+    fill: currentcolor;
+  }
 
-#button:after {
-  inset-block-start: -1px;
-  width: var(--rh-border-width-lg, 3px);
-  background-color: var(--_after-background-color);
-}
+  &:is(:hover,:active,:focus) {
+    &.light { background-color: var(--rh-color-surface-lighter); }
+    &.dark { background-color: var(--rh-color-surface-dark-alt); }
 
-span {
-  overflow: hidden;
-  text-align: start;
-}
+    & span {
+      color: var(--rh-color-text-primary);
+    }
+  }
 
-[part='container'] {
-  display: flex;
-  gap: var(--rh-space-xl, 24px);
-  container-type: inline-size;
+  &:focus {
+    outline: 2px solid var(--rh-color-interactive-primary-default);
+  }
+
+  &,
+  &:before,
+  &:after {
+    background-color: var(--rh-color-surface);
+  }
+
+  &:after {
+    inset-block-start: -1px;
+    width: var(--rh-border-width-lg, 3px);
+    background-color: var(--_after-background-color);
+  }
+
+  &.expanded {
+    --_after-background-color: var(--rh-color-accent-brand);
+
+    & #icon {
+      rotate: calc(var(--_isRTL, -1) * 180deg);
+    }
+
+    &.on.light {
+      --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+    }
+
+    &.on.dark {
+      --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+    }
+  }
 }
 
 #header-container {
   display: flex;
   gap: var(--rh-space-md, 8px);
-}
 
-#header-container.bottom {
-  flex-direction: column;
+  &.bottom {
+    flex-direction: column;
+  }
 }
 
 #header-text {
@@ -113,54 +135,26 @@ span {
   gap: var(--rh-space-md, 8px);
 }
 
-.expanded #button {
-  --_after-background-color: var(--rh-color-accent-brand);
-}
-
-.expanded #button #icon {
-  rotate: calc(var(--_isRTL, -1) * 180deg);
-}
-
-#button:hover,
-#button:active,
-#button:focus {
-  background-color: var(--rh-color-surface);
-}
-
-#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;
   border: 0;
-}
-
-.toggle:after {
-  content: '';
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-}
 
-.expanded.on.light {
-  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
-}
+  &,
+  &:before,
+  &:after {
+    padding: 0;
+    margin: 0;
+  }
 
-.expanded.on.dark {
-  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+  &:after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
 }
 
 @container (min-width: 576px) {