.woocommerce_devdocs {
	@include breakpoint( '>1280px' ) {
		&.is-list {
			column-gap: $gap-large;
			columns: 2;
		}

		.woocommerce-devdocs__card {
			break-inside: avoid;
			margin-bottom: $gap-larger;
		}
	}

	.woocommerce-devdocs__card {
		background-color: transparent;

		& > .woocommerce-card__header {
			background-color: $studio-white;
		}

		& > .woocommerce-card__body {
			padding: 0;
		}
	}

	.woocommerce-devdocs__example {
		padding: $gap;
		box-shadow: inset 0 2px 1px rgba($gray-900, 0.075);

		// Grid background
		background-image: linear-gradient(rgba($gray-900, 0.05) 1px, transparent 1px),
			linear-gradient(90deg, rgba($gray-900, 0.05) 1px, transparent 1px),
			linear-gradient(rgba($gray-900, 0.025) 1px, transparent 1px),
			linear-gradient(90deg, rgba($gray-900, 0.025) 1px, transparent 1px);
		background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px;
		background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;

		.woocommerce-chart {
			margin: 0;
		}
	}

	.woocommerce-devdocs__docs {
		max-width: 720px;
		margin: 0 auto;
		padding: $gap;

		ul {
			list-style: disc;
			padding-left: 1.5em;
		}

		h1 code,
		h2 code,
		h3 code,
		h4 code {
			font-size: 0.9em;
		}

		table {
			border-collapse: collapse;
			border-spacing: 0;

			th,
			td {
				border-bottom: 1px solid $gray-400;
				text-align: left;
			}

			th {
				padding: 0.25em 3em 0.25em 0;
			}

			td {
				padding: 1.17em 3em 1.17em 0;
			}
		}

		// From wp-calypso: client/devdocs/style.scss
		pre {
			padding: 8px;
			background: $white;
			background-color: $white;
		}

		code {
			background-color: $white;
			border-radius: 3px;
			font-size: 15px;
			padding: 2px 6px;
			max-width: 100px;
		}

		pre > code {
			background-color: $transparent;
			padding: 2px 0;
		}
	}
}