/* Block Container */
.w--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 */
.w--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);
}

/* Button */
.w--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);
  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.25rem);
  transition: 0.1s all;

  &[disabled] {
    opacity: 0.5;
  }
}

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

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

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

/* Link */
.w--link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--theme-primary-color);
  transition: 0.1s text-decoration-color;

  &:hover {
    text-decoration-color: transparent;
  }
}

/* Prose */
.w--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);
}

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

.w--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);
}

.w--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);
}

.w--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);
}

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

.w--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);
}

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

.w--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);
}

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

.w--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);
}

.w--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);
}

.w--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);
}

.w--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);
}

.w--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);
}

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

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