:root {
  interpolate-size: allow-keywords;
}

.lightweight-accordion {
  margin-block-start:0.3em !important;
}

.lightweight-accordion details {
  border: 0;
  background-color: #fff;
  overflow: hidden;

  summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    gap: 0.938rem;
    padding: 0.938rem;
    background: #DFE0E1;
    transition:
      background-color 0.3s,
      color 0.3s;

    &:hover,
    &:focus-visible {
      /* additional styles */
    }
    
    .icon-arrow {
      display: block;
      height: 24px;
      width: 24px;
      background-position: center;
      background-size: contain;
      background-image: url('data:image/svg+xml,<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M14.83 16.42l9.17 9.17 9.17-9.17 2.83 2.83-12 12-12-12z"/><path d="M0-.75h48v48h-48z" fill="none"/></svg>');
      transition: rotate 0.3s;
    }
    
  }
  

/* Webkit */
details summary::-webkit-details-marker {
  display: none;
}

  .lightweight-accordion-body {
    padding:1rem;
    display: flex;
    flex-direction: column;
  }

  + details {
    margin-block-start: 0;
  }

  &::details-content {
    block-size: 0;
    transition:
      block-size 0.3s,
      content-visibility 0.3s;
    transition-behavior: allow-discrete;
  }

  &[open]::details-content {
    block-size: auto;
  }

  &[open] summary {
    .icon-arrow {
      rotate: 180deg;
    }
  }
}