@import "../_util/index.import.less";

.document-formatting {
	@spacing: 1.5em;


  h1, h2, h3, h4 {
    line-height: 1em;

		&:not(:first-child) {
			margin-top: 4rem;
		}

		& + * {
			margin-top: @spacing / 2 !important;
		}
  }

  hr + * { margin-top: 0 !important; }

  h2 {
		.font-m3;
		.type-bold;
		color: @color-darker;
    margin-bottom: 1rem;
  }

  h3 {
		.font-m2;
		.type-semibold;
		color: @color-darker;
		margin-bottom: .25rem;
	}

  h4 {
		.font-m1;
		margin-bottom: .125rem;
	}

	// for theme's anchor links
	h2,
	h3 {
		position: relative;

		.anchor {
			.font-s3;
			.transform(translateY(-50%));
			.link(@color-medium);
			margin-right: 6px;

			@media screen and (min-width: @breakpoint) {
				.position(absolute, 50%, auto, auto, -30px);
			}

			&:hover { color: @color-primary !important; }
		}
	}

  p {
		.type-secondary;
    margin: @spacing 0;
    position: relative;

    &:first-of-type:not(:only-of-type) { margin-top: 0; }
		&:only-of-type { margin: 0; }
  }

	a {
		.link(@color-primary);
		.type-normal;
	}

  figure {
    clear: both;
		margin: @spacing 0;

    figcaption {
      .font-s1;
      color: @color-mediumdark;
    }
  }

  img {
    display: inline-block;
    max-width: 100%;
    position: relative;
    vertical-align: top;

    &.alignright{
      float: right;
      margin-right: 0;
    }

    &.alignleft{
      float: left;
      margin-left: 0;
    }

    &.aligncenter{
      display: block;
      margin-bottom: @spacing;
      margin-left: auto;
      margin-right: auto;
      margin-top: @spacing;
    }
  }

  blockquote {
    border-left: 2px solid @color-primary;
    color: @color-dark;
		margin: @spacing 0;
    padding: .75em 20px .75em 30px;

    p:only-of-type { margin: 0; }
  }

  ol,
	ul {
		.type-secondary;
    list-style-position: outside;
    margin-bottom: @spacing/2;
    margin-top: @spacing/2;
    padding-left: 30px;

		li {
			margin-bottom: .5rem;
		}
  }

  ol { list-style-type: decimal; }
  ul { list-style-type: disc; }

  *:not(figure.highlight) pre {
    margin-top: @spacing/2;
    margin-bottom: @spacing/2;

    code {
      border: none;
      box-shadow: none;
      color: @color-darkest;
      margin: 0;
      max-width: 100%;
      padding: 0;
    }
  }

	&>table {
		td, th {
			padding: 10px;
			border: 1px solid #ccc;
		}
	}

	.highlight {
		.font-s2;
		overflow-x: auto;

		table { width: 100%; }

		.gutter { width: 40px; }

		.gutter pre {
			margin: 0;
			padding: @spacing 10px;
			text-align: right;
		}

		.code {
			pre {
		    overflow-y: auto;
				overflow-x: auto;
		    padding: @spacing 15px @spacing 20px;
				margin: 0;
				white-space: pre;

				// Make sure that empty lines don't collapse to zero height by
				// inserting a zero-width space.
				.line:empty::after { content: '\200b'; }
		  }
		}
	}

	code {
		font-size: 90%;
	}

	dl {
    padding-left: 30px;
		margin: 0;

		&:not(:last-of-type) {
			margin-bottom: @spacing;
	    margin-top: @spacing;
		}

    dt {
      .type-semibold;

      &:not(:first-child) { margin-top: 1em; }

      code { line-height: inherit; }
    }

		dd {
			margin: 0;
		}
  }
}