/**
 * @file
 * Collapsible details.
 */

details:not(.glb-form-wrapper, .form-wrapper, .ck) {
  --summary-icon-size: 0.5rem;

  position: relative;
  margin-block: 0 2rem;
  margin-inline: 0;
  margin-trim: block-end;
  padding-block: 0;
  padding-inline: 0;
  border: none;
}

/* Summary */
details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary {
  display: block;
  list-style: none;
  margin: 0;
  margin-trim: block-end;
  padding-block: 0;
  padding-inline: calc(var(--summary-icon-size) * 3) 0; /* Leave space for absolutely-positioned toggle */
  cursor: pointer;
  color: var(--color-link);
  font-size: var(--font-size-plus-3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-lineheight-heading);
  transition: color 200ms;
}

details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary * {
  color: var(--color-link);
  transition: color 200ms;
}
details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary:hover,
details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary:hover * {
  color: var(--color-link-hover);
}


/* Sizing */
details > summary.small,
details > summary.small * {
  font-size: var(--font-size-base);
}
details > summary.big,
details > summary.big * {
  font-size: var(--font-size-plus-5); /* <h4> equivalent */
}


/* Triangle toggle (left-aligned) */
details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary::-webkit-details-marker,
details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary::marker {
  display: none;
}
details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary::before {
  content: "";
  position: absolute;
  display: block;
  inline-size: 0;
  block-size: 0;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin-block-start: calc((var(--summary-icon-size) - 1em) / -2); /* Center vertical alignment */
  border-block-start: var(--summary-icon-size) solid transparent;
  border-block-end: var(--summary-icon-size) solid transparent;
  border-inline-start: calc(var(--summary-icon-size) * 1.5) solid var(--color-link);
  transition: border-color 200ms;
}

/* Icon hover and dark mode colors */
details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary:hover::before {
  border-inline-start-color: var(--color-link-hover);
}


/* Summary content */
details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary > * {
  display: inline;
  margin-block: 0;
}
details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary > :is(h2, h3, h4, h5, h6) {
  vertical-align: middle;
  color: inherit;
}
details:not(.glb-form-wrapper, .form-wrapper, .ck) > summary :is(time, .tag) {
  font-size: 1em; /* Reset tag size */
}


/* Open disclosure */
@keyframes rotateSummaryOpen {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 90deg;
  }
}
@keyframes rotateSummaryClose {
  0% {
    rotate: 90deg;
  }
  100% {
    rotate: 0deg;
  }
}

details:not(.glb-form-wrapper, .form-wrapper, .ck)[open] > summary {
  margin-block-end: 1.5rem;
}
details:not(.glb-form-wrapper, .form-wrapper, .ck)[open] > summary::before {
  animation: rotateSummaryOpen 200ms ease-out forwards;
}
details:not(.glb-form-wrapper, .form-wrapper, .ck):not([open]) > summary::before {
  animation: rotateSummaryClose 200ms ease-out forwards;
}



details:not(.glb-form-wrapper, .form-wrapper, .ck) > .details-wrapper {
  margin-inline-start: calc(var(--summary-icon-size) * 3);
  margin-trim: block-end;
}
details:not(.glb-form-wrapper, .form-wrapper, .ck) > *:last-child,
details:not(.glb-form-wrapper, .form-wrapper, .ck) > *:last-child > *:last-child,
details:not(.glb-form-wrapper, .form-wrapper, .ck) > *:last-child > *:last-child > *:last-child {
  margin-block-end: 0; /* Trim bottom margin */
}