:root {
  accent-color: var(--primary);
}

fieldset {
  border: 1px solid var(--border);

  legend {
    padding-inline: .5rem;
    color: var(--border);
  }
}

details {
  border: 1px solid var(--border);
  border-radius: .25rem;
  padding-inline: .5em;
}

summary {
  font-weight: bold;
  margin-inline: -.5em;
  padding: 0.5em;
  cursor: pointer;

  &::marker,
  &::-webkit-details-marker{
      color: var(--primary);
    }
}

details[open] {
  // padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5em;
}
