.expandable-sections {
  --table-border-color: var(--lightest-gray);

  & summary {
    list-style: none;

    &::marker {
      font-size: 0;
    }

    & header.subheader h4 {
      gap: 0.5rem;
      justify-content: flex-start !important;
    }

    &:hover {
      & .close-details-icon,
      & .open-details-icon {
        opacity: 1;
      }
    }

    & section {
      font-size: 0.875rem;
    }
  }

  & .close-details-icon,
  & .open-details-icon {
    cursor: pointer;
    opacity: 0.25;
  }

  & .close-details-icon {
    display: none;
  }

  & .open-details-icon {
    display: block;
  }

  &[open] {
    & .open-details-icon {
      display: none;
    }

    & .close-details-icon {
      display: block;
    }

    & .only-when-closed {
      display: none;
    }
  }
}