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;
}
h2 {
  @apply font-semibold text-2xl font-serif flex gap-2.5;
}
h3 {
  @apply font-semibold text-xl font-serif flex gap-2.5;
}
summary:not(.hidden) {
  @apply flex whitespace-pre-wrap;
}
.btn {
  @apply cursor-pointer rounded-md px-3 py-2.5 border shadow-2xs border-gray-200 hover:bg-gray-100 flex font-medium;
  &.iconized {
    @apply flex gap-2 items-center;
  }
  &.borderless {
    @apply border-0;
  }
  &.tight {
    @apply p-1;
  }
  &.cancel {
    @apply bg-gray-200;
  }
  &.disabled,
  &[disabled] {
    @apply bg-gray-200 text-gray-500 cursor-not-allowed;
  }
  &.submit {
    @apply bg-emerald-600 hover:bg-emerald-700 text-white ;
  }
}
.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 {
    @apply bg-risk-1;
  }
  &.risk-2 {
    @apply bg-risk-2;
  }
  &.risk-3 {
    @apply bg-risk-3;
  }
  &.risk-4 {
    @apply bg-risk-4;
  }
  &.risk-5 {
    @apply bg-risk-5;
  }
}
input,
textarea {
  @apply border border-gray-200 rounded-sm;
}