oj-sp-expandable-list-item .oj-sp-expandable-list-item-collapsible {
  margin: 1px;
}

oj-sp-expandable-list-item .oj-sp-expandable-list-item-header {
  background-color: white;
  margin-left: 0;
}

oj-sp-expandable-list-item .oj-sp-expandable-list-item-header:hover {
  background-color: rgb(246, 246, 246);
}

oj-sp-expandable-list-item .oj-sp-expandable-list-item-header-sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 2;
}

/* oj-collapsible applies a margin of -8px to all link elements inside of it (though it should really only be applied to the chevron)
 * thus need to manually override that otherwise the link text gets cut off
 */
html:not([dir=rtl]) oj-sp-expandable-list-item .oj-sp-expandable-list-item-nav-text a {
  margin-left: 0;
}

html[dir=rtl] oj-sp-expandable-list-item .oj-sp-expandable-list-item-nav-text a {
  margin-right: 0;
}

/* Used when icon circle is present since JET doesn't have large enough padding classes
 * Right now we are hardcoding some values.  Note that the first two will go away when oj-collapsible supports the chevron on the right
 * and we control number 4 inside our CCA, the only uncontrolled value that could change at any time is the icon circle.
 * 1 - The chevron from oj-collapsible should be on the right, but right now I have to add padding to account for it (24px)
 * 2 - The chevron has 5px padding on the right (not multiple of 4!)
 * 3 - The icon circle is 44px wide
 * 4 - 16px padding between icon and first line of text
 * 5 - 16px padding adding on either side of the header, to provide some padding when the page has none
 * For a total of 105
 * The padding on the right is marked as PG in the specs which is the page margin, but since on phones the margin can be 0, discussed
 * with UX and we will have our own 16px always built in
  */
oj-sp-expandable-list-item .oj-sp-expandable-slot-padding {
  padding-left: 6.5625rem;
  padding-right: 1rem;
}

html[dir='rtl'] oj-sp-expandable-list-item .oj-sp-expandable-slot-padding {
  padding-right: 6.5625rem;
  padding-left: 1rem;
}

oj-sp-expandable-list-item .oj-sp-expandable-list-item-detail {
  border-top: 1px solid rgb(228, 225, 221); /* need the colour specs, this was best match --oj-palette-neutral-40 */
}

oj-sp-expandable-list-item .oj-sp-expandable-list-full-width {
  width: 100%;
}

/* Responsive changes */
@media screen and (max-width: 1023px) {
  /* Padding on the right needs to include the chevron though it will all go away when the chevron changes sides (39px)  */
  oj-sp-expandable-list-item .oj-sp-expandable-slot-padding {
    padding-left: 2.4375rem;
    padding-right: 1rem;
  }

  html[dir='rtl'] oj-sp-expandable-list-item .oj-sp-expandable-slot-padding {
    padding-right: 2.4375rem;
    padding-left: 1rem;
  }
}