// Lightning Design System 2.264.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @summary Initializes markdown
 * @name base
 * @selector .slds-markdown
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-markdown {
  p {
    line-height: 1.5rem;
  }
  h1 {
    font-size: $font-size-7;
    font-weight: $font-weight-regular;
    padding-block-start: $spacing-small;
    padding-block-end: $spacing-xx-small;
    line-height: $line-height-heading;
  }
  h2 {
    font-size: $font-size-6;
    font-weight: $font-weight-regular;
    padding-block-start: $spacing-small;
    padding-block-end: $spacing-xx-small;
    line-height: $line-height-heading;
  }
  h3 {
    font-size: $font-size-5;
    font-weight: 600;
    padding-block-start: $spacing-small;
    padding-block-end: $spacing-xx-small;
    line-height: $line-height-heading;
  }
  h4 {
    font-size: $font-size-4;
    font-weight: 600;
    padding-block-start: $spacing-small;
    padding-block-end: $spacing-xx-small;
    line-height: $line-height-heading;
  }
  h5 {
    font-size: $font-size-3;
    font-weight: $font-weight-bold;
    padding-block-start: $spacing-small;
    padding-block-end: $spacing-xx-small;
    line-height: $line-height-heading;
  }
  h6 {
    font-size: $font-size-2;
    font-weight: $font-weight-bold;
    padding-block-start: $spacing-small;
    padding-block-end: $spacing-xx-small;
    line-height: $line-height-heading;
  }
  ul {
    list-style: disc;
    margin-inline: 1.125rem 0;
    margin-block: 0 $spacing-xx-small;
    line-height: 1.25rem;
  }
  ol {
    list-style: decimal;
    margin-inline: 1.125rem 0;
    margin-block: 0 $spacing-xx-small;
    line-height: 1.25rem;
  }
  > ul,
  > ol {
    margin-block-end: $spacing-x-small;
  }
  li {
    padding-inline-start: $spacing-xxx-small;
  }
  ul:has(>li>input[type=checkbox]) {
    list-style-type: none;
    margin-inline-start: 0;
  }
  li input[type=checkbox] {
    vertical-align: middle;
    margin-inline-end: 0;
  }
  li:has(>input[type=checkbox])::before {
    content: ' ';
    display: inline-flex;
    vertical-align: middle;
    width: 0.875rem;
    height: 0.875rem;
    border: $border-width-thin solid var(--slds-g-color-neutral-base-70, rgb(230, 230, 230));
    border-radius: $border-radius-small;
    pointer-events: none;
    margin-inline-end: $spacing-xxx-small;
  }
  li:has(>input[type=checkbox]:checked)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http:%2F%2Fwww.w3.org/2000/svg'%3E%3Cpath d='M1.9 7.6L3.1 6.4L5.5 8.8L10.7 3.6L11.9 4.8L5.5 11.2L1.9 7.6Z' fill='black'/%3E%3C/svg%3E");
    background-position: center;
  }
  li:has(>input[type=checkbox]) input[type=checkbox] {
    width: 0;
    height: 0;
  }
  p:has(+ p),
  p:has(+ ul),
  p:has(+ ol),
  p:has(+ blockquote),
  p:has(+ table) {
    margin-block-end: $spacing-x-small;
  }
  hr {
    margin-block: $spacing-small;
  }
  pre:has(> code) {
    padding: $spacing-small $spacing-medium;
    margin-block-end: $spacing-x-small;
    background-color: var(--slds-g-color-neutral-base-95, rgb(243, 243, 243));
    border: $border-width-thin solid var(--slds-g-color-neutral-base-90, rgb(230, 230, 230));
    border-radius: $border-radius-medium;
  }
  pre > code {
    padding: 0;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
  }
  code {
    background-color: var(--slds-g-color-neutral-base-95, rgb(243, 243, 243));
    border: $border-width-thin solid var(--slds-g-color-neutral-base-90, rgb(230, 230, 230));
    padding: $spacing-xxx-small $spacing-xx-small;
    border-radius: $border-radius-medium;
    font-family: $font-family-monospace;
    font-size: $font-size-small;
  }
  kbd {
    background-color: var(--slds-g-color-neutral-base-90, rgb(229, 229, 229));
    border: $border-width-thin solid var(--slds-g-color-neutral-base-80, rgb(201, 201, 201));
    padding: $spacing-xxx-small $spacing-xx-small;
    border-radius: $border-radius-small;
    font-family: $font-family-monospace;
    font-size: $font-size-small;
    box-shadow: 0 1px 0 var(--slds-g-color-neutral-base-80, rgb(201, 201, 201));
  }
  mark {
    background-color: var(--slds-g-color-palette-yellow-90, rgb(249, 227, 182));
    padding: $spacing-xxx-small;
  }
  del,
  s {
    text-decoration: line-through;
    color: var(--slds-g-color-neutral-base-60, rgb(147, 147, 147));
  }
  sup,
  sub {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sup {
    top: -0.5em;
  }
  sub {
    bottom: -0.25em;
  }
  img {
    max-width: 100%;
    height: auto;
    border-radius: $border-radius-medium;
  }
  table {
    width: unset;
    border-collapse: separate;
    border-spacing: 0;
    margin-block-end: $spacing-x-small;
  }
  tr:first-child {
    th {
      border-top: $border-width-thin solid var(--slds-g-color-neutral-base-80, rgb(201, 201, 201));
      border-bottom: $border-width-thin solid var(--slds-g-color-neutral-base-80, rgb(201, 201, 201));
    }
    th:first-child {
      border-top-left-radius: $border-radius-medium;
    }
    th:last-child {
      border-top-right-radius: $border-radius-medium;
    }
  }
  th {
    background-color: var(--slds-g-color-neutral-base-95, rgb(243, 243, 243));
    padding: $spacing-xx-small $spacing-small;
    border-left: $border-width-thin solid var(--slds-g-color-neutral-base-80, rgb(201, 201, 201));
  }
  th:last-child {
    border-right: $border-width-thin solid var(--slds-g-color-neutral-base-80, rgb(201, 201, 201));
  }
  td {
    padding: $spacing-xx-small $spacing-small;
    &:has(code:first-child) {
      padding-inline-start: $spacing-x-small;
    }
    &:has(code:last-child) {
      padding-inline-end: $spacing-x-small;
    }
  }
  td:first-child {
    border-left: $border-width-thin solid var(--slds-g-color-neutral-base-80, rgb(201, 201, 201));
  }
  td:last-child {
    border-right: $border-width-thin solid var(--slds-g-color-neutral-base-80, rgb(201, 201, 201));
  }
  tr:not(:last-child) td {
    border-bottom: $border-width-thin solid var(--slds-g-color-neutral-base-90, rgb(229, 229, 229));
  }
  tr:last-child {
    td {
      border-bottom: $border-width-thin solid var(--slds-g-color-neutral-base-80, rgb(201, 201, 201));
    }
    td:first-child {
      border-bottom-left-radius: $border-radius-medium;
    }
    td:last-child {
      border-bottom-right-radius: $border-radius-medium;
    }
  }
  blockquote {
    margin-inline-start: 1.25rem;
    position: relative;
    margin-block-start: 0;
    margin-block-end: $spacing-x-small;

    p:has(+ blockquote) {
      margin-block-end: $spacing-x-small;
    }
  }
  blockquote::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: $spacing-xx-small;
    margin-left: -1.25rem;
    height: 100%;
    background-color: var(--slds-g-color-neutral-base-90, rgb(229, 229, 229));
    border-radius: $border-radius-small;
  }
}