:host {
  --background-color: inherit;
  --label-color: var(--pos-normal-text-color);
  --description-color: var(--pos-normal-text-color);
  --uri-color: var(--pos-subtle-text-color);
  --font-family: var(--font-sans);
}

p.content {
  background-color: var(--background-color);
  line-height: var(--line-xs);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: var(--size-1);

  .url {
    font-size: var(--scale-fluid-1);
    color: var(--pos-subtle-text-color);
  }
}

a {
  color: var(--label-color);
  max-width: min(100%, var(--prose-lg));
  text-decoration: underline;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration-thickness: var(--size-px);
}

pos-label {
  color: var(--label-color);
  font-size: var(--scale-fluid-2);
  margin-bottom: var(--size-1);
}

pos-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: var(--weight-light);
  color: var(--description-color);
  font-size: var(--scale-fluid-2);
}

@media (min-width: 640px) {
  pos-label {
    font-size: var(--scale-fluid-0);
  }
  pos-description {
    font-size: var(--scale-fluid-1);
  }

  p.content {
    .url {
      font-size: var(--scale-fluid-000);
    }
  }
}