svg.icon {
  @apply inline;
  &.icon-4 {
    @apply w-4 h-4;
  }
  &.icon-5 {
    @apply w-5 h-5;
  }
  &.icon-6 {
    @apply w-6 h-6;
  }
  &.icon-7 {
    @apply w-7 h-7;
  }
  &.icon-8 {
    @apply w-8 h-8;
  }
}
h1 {
  @apply font-semibold text-3xl font-serif flex gap-2.5 text-text-heading;
}
h2 {
  @apply font-semibold text-2xl font-serif flex gap-2.5 text-text-primary;
}
h3 {
  @apply font-semibold text-xl font-serif flex gap-2.5 text-text-primary;
}
h4 {
  @apply font-semibold text-base font-serif flex gap-2.5 text-text-primary;
}
p {
  @apply mt-1;
}
.muted {
  @apply text-text-muted;
}

summary:not(.hidden) {
  @apply flex whitespace-pre-wrap;
}

.limit-reached {
  @apply text-amber-600 bg-amber-50 w-fit p-2 rounded-md border-amber-300 border;
}

.risk-dot {
  @apply w-3 h-3 rounded-full inline-block;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  /*width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;*/
  &.risk-1,
  &.risk-low {
    @apply bg-risk-low;
  }
  &.risk-2,
  &.risk-medium {
    @apply bg-risk-medium;
  }
  &.risk-3,
  &.risk-high {
    @apply bg-risk-high;
  }
  &.risk-4,
  &.risk-very_high,
  &.risk-very-high {
    @apply bg-risk-very-high;
  }
  &.risk-5,
  &.risk-critical {
    @apply bg-risk-critical;
  }
}

article.panel {
  @apply flex flex-col border border-gray-200 rounded-md;
  & > header {
    @apply flex flex-row pt-3 pb-2 px-3 bg-gray-200;
    div {
      @apply flex-1 flex flex-col gap-3;
      h3 {
      }
    }
    .icon.toggle {
      @apply cursor-pointer;
    }
    &:has(~ main > summary.hidden) .icon.toggle {
      @apply rotate-90;
    }
  }
  & > main {
    @apply contents;
    summary {
      @apply px-3 pt-3;
    }
    aside {
      @apply p-3;
      span {
        @apply cursor-pointer text-primary;
      }
    }
  }
}

dl {
  @apply grid gap-2;
  grid-template-columns: auto 1fr;
  &[vertical] {
    grid-template-columns: none;
    grid-template-rows: auto 1fr;
  }
  dt {
    @apply font-semibold text-sm text-text-secondary;
  }
}