/* Description content */

.pw-descr-content {
  display: flex;
  flex-direction: column;
  gap: .35rem;

  padding: .25rem .15rem .35rem;

  color: var(--pw-text);
  font-family: var(--pw-round-font);
}

.pw-descr-kicker {
  align-self: flex-start;

  margin: 0 0 .15rem;
  padding: .15rem .4rem;

  background: rgb(255 255 255 / .55);
  border-radius: 999px;

  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .045em;
}

.pw-descr-content > .tip {
  margin: 0;
  line-height: 1.45;
}

/* Dynamic preview */

.pw-descr-dynamic-content:empty {
  display: none;
}

.pw-descr-dynamic-content:not(:empty) {
  margin-block: .4rem;
}

.pw-descr-dynamic-content .pw-preview-item {
  margin-top: 0;
}

/* Further reading */

.pw-descr-docs {
  display: flex;
  flex-direction: column;
  gap: .3rem;

  margin-top: .45rem;
  padding-top: .55rem;

  border-top: 1px dashed rgb(35 30 20 / .18);
}

.pw-descr-docs-title {
  margin: 0 0 .15rem;

  color: var(--pw-muted);

  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .015em;
}

.pw-descr-doc {
  display: flex;
  align-items: center;
  gap: .45rem;

  padding: .35rem .4rem;

  color: var(--pw-text);
  text-decoration: none;

  border-radius: 5px;

  transition:
      background-color .08s ease,
      transform .08s ease;
}

.pw-descr-doc:hover {
  background: rgb(255 255 255 / .45);
  transform: translateX(2px);
}

.pw-descr-doc-icon {
  display: grid;
  place-items: center;
  flex: 0 0 1.5rem;

  width: 1.5rem;
  height: 1.5rem;

  background: rgb(255 255 255 / .65);
  border-radius: 5px;

  font-size: .95rem;
}

.pw-descr-doc > span:last-child {
  display: flex;
  flex-direction: column;
  gap: .08rem;
  min-width: 0;
}

.pw-descr-doc-type {
  color: var(--pw-muted);

  font-size: .59rem;
  font-weight: 850;
  letter-spacing: .065em;
}

.pw-descr-doc-title {
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.3;
}

.pw-descr-doc:focus-visible {
  outline: 2px solid var(--pw-text);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pw-descr-doc {
      transition: none;
  }
}