/**
 * Accordion (<details>)
 * Inspiration: https://codepen.io/koca/pen/RyeLLV
 */

details {
  display: block;
  margin-bottom: $spacing-typography;
  padding-bottom: $spacing-typography/2;
  border-bottom: 1px solid var(--muted-border);

  summary {
    list-style-type: none;
    cursor: pointer;
    line-height: 1rem;

    // Reset marker
    &::-webkit-details-marker {
      display: none;
    }
    &::marker {
      display: none;
    }
    &::-moz-list-bullet {
      list-style-type: none;
    }

    // Marker
    &::after {
      $caret-icon-color: "808080"; // Without '#' !important
      display: inline-block;
      width: 1rem;
      height: 1rem;
      float: right;
      transform: rotate(-90deg);
      // Source: https://feathericons.com/
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 1rem auto;
      content: '';
    }

    &:focus {
      outline: none;
    }

    ~ * {
      margin-top: $spacing-typography/2;

      ~ * {
        margin-top: 0;
      }
    }
  }

  // Open
  &[open] {

    summary {
      margin-bottom: $spacing-typography/4;
      color: var(--muted-text);

      &::after {
        transform: rotate(0);
      }
    }
  }
}