@charset “UTF-8”;

// // Styles for rendered markdown in the .main-content container // // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type

.main-content {

line-height: $content-line-height;

ol,
ul,
dl,
pre,
address,
blockquote,
.table-wrapper {
  margin-top: 0.5em;
}

a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ul,
ol {
  padding-left: 1.5em;
}

li {
  .highlight {
    margin-top: $sp-1;
  }
}

ol {
  list-style-type: none;
  counter-reset: step-counter;

  > li {
    position: relative;

    &::before {
      position: absolute;
      top: 0.2em;
      left: -1.6em;
      color: $grey-dk-000;
      content: counter(step-counter);
      counter-increment: step-counter;
      @include fs-3;

      @include mq(sm) {
        top: 0.11em;
      }
    }

    ol {
      counter-reset: sub-counter;

      li {
        &::before {
          content: counter(sub-counter, lower-alpha);
          counter-increment: sub-counter;
        }
      }
    }
  }
}

ul {
  list-style: none;

  > li {
    &::before {
      position: absolute;
      margin-left: -1.4em;
      color: $grey-dk-000;
      content: "•";
    }
  }
}

.task-list {
  padding-left: 0;
}

.task-list-item {
  display: flex;
  align-items: center;

  &::before {
    content: "";
  }
}

.task-list-item-checkbox {
  margin-right: 0.6em;
}

hr + * {
  margin-top: 0;
}

h1:first-of-type {
  margin-top: 0.5em;
}

dl {
  display: grid;
  grid-template: auto / 10em 1fr;
}

dt,
dd {
  margin: 0.25em 0;
}

dt {
  grid-column: 1;
  font-weight: 500;
  text-align: right;
  &::after {
    content: ":";
  }
}

dd {
  grid-column: 2;
  margin-bottom: 0;
  margin-left: 1em;
}

.anchor-heading {
  position: absolute;
  right: -$sp-4;
  width: $sp-5;
  height: 100%;
  padding-right: $sp-1;
  padding-left: $sp-1;
  overflow: visible;

  @include mq(md) {
    right: auto;
    left: -$sp-5;
  }

  svg {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: $link-color;
    visibility: hidden;
  }
}

.anchor-heading:hover,
h1:hover > .anchor-heading,
h2:hover > .anchor-heading,
h3:hover > .anchor-heading,
h4:hover > .anchor-heading,
h5:hover > .anchor-heading,
h6:hover > .anchor-heading {
  svg {
    visibility: visible;
  }
}

summary {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin-top: 1.5em;
  margin-bottom: 0.25em;

  &:first-child {
    margin-top: $sp-2;
  }

  + table,
  + .table-wrapper,
  + .code-example,
  + .highlighter-rouge {
    margin-top: 1em;
  }

  + p {
    margin-top: 0;
  }
}

}