/* Block Container */
.pala-block-container {
  max-width: var(--block-container-max-width, 1200px);
  padding-block: var(--block-container-padding-block, 5rem);
  padding-inline: var(--block-container-padding-inline, 2rem);
  margin: 0 auto;
}

/* Heading */
.pala-heading {
  margin: 0;
  text-wrap: balance;
  font-family: var(--heading-font-family, var(--theme-heading-font)), sans-serif;
  font-size: var(--heading-font-size, 2.5rem);
  line-height: var(--heading-line-height, 1);
  font-weight: var(--heading-font-weight, 600);
  color: var(--heading-color, inherit);
}

.pala-heading.-h2 {
  font-size: var(--heading-h2-font-size, 2rem);
  line-height: var(--heading-h2-line-height, 1);
}

/* Button */
.pala-button {
  cursor: pointer;
  text-decoration: none;
  /* remove default underline from links */
  display: flex;
  /* for nesting icons */
  align-items: center;
  justify-content: center;
  gap: var(--button-gap, 0.5rem);
  color: var(--button-color, white);
  font-size: var(--button-font-size, inherit);
  font-family: var(--button-font-family, inherit);
  font-weight: var(--button-font-weight, inherit);
  background: var(--button-background, var(--theme-primary-color, rebeccapurple));
  border: var(--button-border, 1px solid transparent);
  border-radius: var(--button-border-radius, 5px);
  padding-block: var(--button-padding-block, 0.75rem);
  padding-inline: var(--button-padding-inline, 1.75rem);
  transition: 0.1s all;
  white-space: nowrap;

  &[disabled] {
    opacity: 0.5;
  }
}

.pala-button:hover {
  filter: brightness(0.9);
}

.pala-button.-outline {
  color: inherit;
  /* setting var doesn't work */
  --button-border: 1px solid var(--theme-primary-color, rebeccapurple);
  --button-background: transparent;
}

.pala-button.-outline:hover {
  --button-color: var(--button-color, white);
  --button-background: var(--theme-primary-color, rebeccapurple);
}

/* Link */
.pala-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--link-text-decoration-color, 500);
  font-weight: var(--link-font-weight, 500);
  transition: 0.1s text-decoration-color;
}

.pala-link:hover {
  text-decoration-color: transparent;
}

/* Prose */
.pala-prose p {
  color: var(--prose-p-color, inherit);
  margin-block: var(--prose-p-margin-block, 0.25rem);
  line-height: var(--prose-p-line-height, 1.5);
}

.pala-prose a {
  text-decoration: underline;
}

.pala-prose img {
  width: var(--prose-img-width, 100%);
  margin-block: var(--prose-img-margin-block, 2rem);
  box-shadow: var(--prose-img-box-shadow, --theme-shadow);
  border-radius: var(--prose-img-border-radius, --theme-radius);
}

.pala-prose h1 {
  color: var(--prose-h1-color, inherit);
  font-family: var(--prose-h1-font-family, var(--theme-heading-font, inherit));
  font-size: var(--prose-h1-font-size, 2.5rem);
  line-height: var(--prose-h1-line-height, 1);
  font-weight: var(--prose-h1-font-weight, 600);
  margin-bottom: var(--prose-h1-margin-bottom, 1rem);
}

.pala-prose h2 {
  color: var(--prose-h2-color, inherit);
  font-family: var(--prose-h2-font-family, var(--theme-heading-font, inherit));
  font-size: var(--prose-h2-font-size, 2rem);
  font-weight: var(--prose-h2-font-weight, 600);
  line-height: var(--prose-h2-line-height, 1);
  margin-top: var(--prose-h2-margin-top, 1rem);
  margin-bottom: var(--prose-h2-margin-bottom, 0.75rem);
}

.pala-prose h2+ul,
.pala-prose h2+ol {
  margin-top: 0;
}

.pala-prose h3 {
  color: var(--prose-h3-color, inherit);
  font-family: var(--prose-h3-font-family, var(--theme-heading-font, inherit));
  font-size: var(--prose-h3-font-size, 1.5rem);
  font-weight: var(--prose-h3-font-weight, 600);
  line-height: var(--prose-h3-line-height, 1);
  margin-top: var(--prose-h3-margin-top, 1rem);
  margin-bottom: var(--prose-h3-margin-bottom, 0.5rem);
}

.pala-prose h3+ul,
.pala-prose h3+ol {
  margin-top: 0;
}

.pala-prose h4 {
  color: var(--prose-h4-color, inherit);
  font-family: var(--prose-h4-font-family, var(--theme-heading-font, inherit));
  font-size: var(--prose-h4-font-size, 1.25rem);
  font-weight: var(--prose-h4-font-weight, 600);
  line-height: var(--prose-h4-line-height, 1);
  margin-top: var(--prose-h4-margin-top, 1rem);
  margin-bottom: var(--prose-h4-margin-bottom, 0.25rem);
}

.pala-prose h4+ul,
.pala-prose h4+ol {
  margin-top: 0;
}

.pala-prose h5 {
  color: var(--prose-h5-color, inherit);
  font-family: var(--prose-h5-font-family, var(--theme-heading-font, inherit));
  font-size: var(--prose-h5-font-size, 1.125rem);
  font-weight: var(--prose-h5-font-weight, 600);
  line-height: var(--prose-h5-line-height, 1);
  margin-top: var(--prose-h5-margin-top, 0.75rem);
  margin-bottom: var(--prose-h5-margin-bottom, 0.25rem);
}

.pala-prose h6 {
  color: var(--prose-h6-color, inherit);
  font-family: var(--prose-h6-font-family, var(--theme-heading-font, inherit));
  font-size: var(--prose-h6-font-size, 1rem);
  font-weight: var(--prose-h6-font-weight, 600);
  line-height: var(--prose-h6-line-height, 1);
  margin-top: var(--prose-h6-margin-top, 0.75rem);
  margin-bottom: var(--prose-h6-margin-bottom, 0.25rem);
}

.pala-prose ul {
  list-style: var(--prose-ul-list-style, disc);
  margin-block: var(--prose-ul-margin-block, 1rem);
  padding-left: var(--prose-ul-padding-left, 1.25rem);
}

.pala-prose ol {
  list-style: var(--prose-ol-list-style, decimal);
  margin-block: var(--prose-ol-margin-block, 1rem);
  padding-left: var(--prose-ol-padding-left, 1.25rem);
}

.pala-prose blockquote {
  margin-inline: 0;
  margin-block: var(--prose-blockquote-margin-block, 2rem);
  border: var(--prose-blockquote-border, 1px solid var(--theme-primary-color));
  padding: var(--prose-blockquote-padding, 2rem);
  box-shadow: var(--prose-blockquote-box-shadow, --theme-shadow);
  border-radius: var(--prose-blockquote-border-radius, --theme-radius);
}

.pala-prose pre {
  background: var(--prose-pre-background, #f6f8fa);
  border: var(--prose-pre-border, 1px solid #eaeaea);
  border-radius: var(--prose-pre-border-radius, var(--theme-radius, 0.5rem));
  margin-block: var(--prose-pre-margin-block, 0.5rem);
  padding: var(--prose-pre-padding, 0.5rem);
  font-family: var(--prose-pre-font-family, 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace);
  font-size: var(--prose-pre-font-size, 0.875rem);
  line-height: var(--prose-pre-line-height, 1.45);
  color: var(--prose-pre-color, #24292e);
  overflow-x: auto;
}

.pala-prose hr {
  margin-block: var(--prose-hr-margin-block, 3rem);
  border-color: var(--prose-hr-border-color, #eee);
}

/* Card */
.pala-card {
  display: var(--card-display, flex);
  flex-direction: var(--card-flex-direction, column);
  align-items: var(--card-align-items, flex-start);
  gap: var(--card-gap, 1.5rem);
  background-color: var(--card-background-color, white);
  border-radius: var(--card-border-radius, --theme-radius);
  box-shadow: var(--card-box-shadow, --theme-shadow);
  padding-block: var(--card-padding-block, clamp(2rem, 10vw, 6rem));
  padding-inline: var(--card-padding-inline, clamp(1rem, 10vw, 4rem))
}