.accordion > summary {
  --marker-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m8 9.586 5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L8 9.586Z" /></svg>');
  display: flex;
  flex-wrap: wrap;
  min-width: 100px;
  column-gap: 0.5rem;
  align-items: center;
  padding: 0.25rem 1rem 0.25rem 0.25rem;
  min-height: 3rem;
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
  border-radius: var(--border-radius);

  &:hover {
    background: var(--color-line-light);
  }

  &.is-header {
    background: none;

    &:hover {
      background: var(--color-line-light);
    }
  }

  &::-webkit-details-marker {
    display: none;
  }

  &::before {
    content: "";
    display: block;
    mask: var(--marker-image) center center / 100% 100% no-repeat;
    -webkit-mask: var(--marker-image) center center / 100% 100% no-repeat;
    mask-size: 1rem 1rem;
    width: 2rem;
    height: 2rem;
    background: currentColor;
    transform: rotate(-90deg);
    flex: 0 0 auto;
  }
}
.accordion.is-button {
  > summary {
    min-height: 40px;
    width: fit-content;
    margin-bottom: 1em;
  }
}
.accordion-title {
  font: var(--font-ui-bold);
  text-transform: capitalize;
  flex-basis: 0;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;

  em {
    font: var(--font-ui);
    color: var(--color-dim);
  }
}
.accordion-description {
  font: var(--font-small);
  color: var(--color-dim);
  width: 100%;
  padding-left: 2.5rem;
  padding-bottom: 0.5rem;

  &:empty {
    display: none;
  }
}

.accordion[open] > summary::before {
  transform: rotate(0deg);
}

.accordion-body {
  margin-top: 0.5rem;
}

.accordion.is-folder > summary {
  --marker-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M216,72H131.31L104,44.69A15.88,15.88,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.41,15.41,0,0,0,39.39,216h177.5A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40Z"></path></svg>');

  &::before {
    transform: none;
    mask-size: 2rem 2rem;
  }
}
.accordion.is-folder[open] > summary {
  --marker-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Z"></path></svg>');
}