// ============================================================================
// :: MD
// ============================================================================
/**
 * Scope defined for general markdown styling. Apply this scope to any markdown
 * generated content to set up the base styling.
 */

// ============================================================================
// :: Settings
// ============================================================================
$list-dot-size: 0.6rem;
$list-line-spacing: 2rem;

// ============================================================================
// :: Heading
// ============================================================================
.s-md {
  h1 {
    margin-top: 8rem;
    margin-bottom: 3.5rem;
  }

  h2 {
    margin-top: 6rem;
    margin-bottom: 2.5rem;
  }

  h3,
  h4,
  h5,
  h6 {
    margin-top: 5rem;
    margin-bottom: 1rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    &:first-child {
      margin-top: 0;
    }
  }
}

// ============================================================================
// :: Text
// ============================================================================
.s-md {
  p {
    margin-bottom: 1.5rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  strong {
    color: $bp-text-color-dark;
  }
}

// ============================================================================
// :: Link
// ============================================================================
.s-md {
  a {
    color: $bp-text-color-dark;
    font-weight: $font-weight-bold;
    text-decoration: underline;
    text-decoration-color: #c30000;
    text-underline-offset: 0.25em;
    transition: text-underline-offset 200ms ease,
      text-decoration-color 200ms ease;

    &:hover {
      text-underline-offset: 0.35em;
      opacity: 0.8;
      text-decoration-color: darken(#c30000, 10%);
    }
  }
}

// ============================================================================
// :: List
// ============================================================================
.s-md {
  ul {
    margin-bottom: 1.5rem;
    padding-left: 0;

    list-style-type: none;

    &:last-child {
      margin-bottom: 0;
    }
  }

  li {
    position: relative;
    /**
     * because of the position absolute on the :before we need to make up for
     * the lost space, we use the line width of the :before element and some
     * spacing to create the space between the side and the text
     */
    padding-left: $list-dot-size + $list-line-spacing;

    margin-bottom: 0.5rem;

    &::before {
      content: "";

      position: absolute;
      /**
       * because the top is not the middle of the first line, we need to take the
       * default line length used on the li en get half of it to position the dot
       * in the middle of the first line, we subtract half the size of it so that it
       * centers itself vertically on the first line
       */
      top: ($bp-line-height-base * 0.5) - ($list-dot-size * 0.5);
      left: $list-dot-size * 0.5;

      min-width: $list-dot-size;
      height: $list-dot-size;

      background-color: $bp-primary-color;
      border-radius: $border-radius-round;
    }

    p {
      margin-bottom: 0;

      &:last-child {
        margin-bottom: 1.5rem;
      }

      &:not(:first-child) {
        font-size: $bp-font-size-1x-small;
      }

      + ul {
        margin-top: 1.5rem;
      }
    }
  }

  ol {
    padding-left: 2rem;

    li {
      padding-left: 1rem;

      &::before {
        content: none;
      }
    }
  }
}

// ============================================================================
// :: Code
// ============================================================================
.s-md {
  p code {
    padding: 0.3rem 1rem;

    font-family: $bp-font-family-secondary;
    font-size: $bp-font-size-3x-small;
    letter-spacing: 0.1rem;

    color: $bp-text-color-dark;
    border: 1px solid $bp-border-color-base;
    background-color: $bp-background-color-medium-light;
  }

  pre[class*="language"] {
    padding: 3rem;
    margin: 3rem 0 8rem;

    font-size: $bp-font-size-3x-small;
    line-height: $bp-line-height-base;

    border: 1px solid $bp-border-color-base;
    border-left: 2px solid $bp-primary-color;
    background-color: transparent;
  }
}