/* https://www.w3.org/TR/css-nesting-1/ */

/* Example 2 */

table.colortable {
	& td {
		text-align: center;

		&.c {
			text-transform: uppercase
		}

		&:first-child,
		&:first-child+td {
			border: 1px solid black
		}
	}

	& th {
		text-align: center;
		background: black;
		color: white;
	}
}

/* Example 3 */
/* & can be used on its own */
.foo {
	color: blue;

	&>.bar {
		color: red;
	}
}

/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
	color: blue;

	&.bar {
		color: red;
	}
}

/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo,
.bar {
	color: blue;

	&+.baz,
	&.qux {
		color: red;
	}
}

/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
	color: blue;

	& .bar & .baz & .qux {
		color: red;
	}
}

/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
	color: blue;

	& {
		padding: 2ch;
	}
}

/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
	color: blue;

	&& {
		padding: 2ch;
	}
}

/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error,
#404 {
	&:hover>.baz {
		color: red;
	}
}

/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
	&:is(.bar, &.baz) {
		color: red;
	}
}

/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
	margin: 0;

	&>figcaption {
		background: hsl(0 0% 0% / 50%);

		&>p {
			font-size: .9rem;
		}
	}
}

/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

/* No concatenation */
.foo {
	color: blue;

	&__bar {
		color: red;
	}
}

/* No & at all */
.foo {
	color: blue;

	.bar {
		color: red;
	}
}

/* & isn’t the first simple selector */
.foo {
	color: blue;

	.bar& {
		color: red;
	}
}

/* & isn’t the first selector of every one in the list */
.foo,
.bar {
	color: blue;

	&+.baz,
	.qux {
		color: red;
	}
}

/* Example 4 */
.foo {
	color: red;

	&>.bar {
		color: blue;
	}
}

/* equivalent to
  .foo { color: red; }
  .foo > .bar { color: blue; }
*/

.foo {
	color: red;

	.parent & {
		color: blue;
	}
}

/* equivalent to
  .foo { color: red; }
  .parent .foo { color: blue; }
*/

.foo {
	color: red;

	:not(&) {
		color: blue;
	}
}

/* equivalent to
  .foo { color: red; }
  :not(.foo) { color: blue; }
*/

.foo {
	color: red;

	.bar {
		color: blue;
	}
}

/* Invalid because there’s no nesting selector */

.foo {
	color: red;

	& .bar,
	.baz {
		color: blue;
	}
}

/* Invalid because not all selectors in the list
  contain a nesting selector */

/* Example 5 */
.foo {
	color: blue;

	.bar & {
		color: red;

		&.baz {
			color: green;
		}
	}
}

/* equivalent to
  .foo { color: blue; }
  .bar .foo { color: red; }
  .bar .foo.baz { color: green; }
*/

/* Example 6 */
/* Properties can be directly used */
.foo {
	display: grid;

	@media (orientation: landscape) {
		grid-auto-flow: column;
	}
}

/* equivalent to
  .foo { display: grid; }

  @media (orientation: landscape) {
    & {
      grid-auto-flow: column;
    }
  }
*/

/* finally equivalent to
  .foo { display: grid; }

  @media (orientation: landscape) {
    .foo {
      grid-auto-flow: column;
    }
  }
*/

/* Conditionals can be further nested */
.foo {
	display: grid;

	@media (orientation: landscape) {
		grid-auto-flow: column;

		@media (min-inline-size > 1024px) {
			max-inline-size: 1024px;
		}
	}
}

/* equivalent to
  .foo { display: grid; }

  @media (orientation: landscape) {
    .foo {
      grid-auto-flow: column;
    }
  }

  @media (orientation: landscape) and (min-inline-size > 1024px) {
    .foo {
      max-inline-size: 1024px;
    }
  }
*/

.foo {
	color: red;

	@media (min-width: 480px) {

		& h1,
		h2 {
			color: blue;
		}
	}
}

/* Invalid because not all selectors in the list
  contain a nesting selector */

.foo {
	color: red;

	@media (min-width: 480px) {
		& {
			color: blue;
		}
	}
}

/* Invalid because expects a selector prelude,
  instead a conditional group rule was provided */

/* Example 7 */
article {
	color: green;

	& {
		color: blue;
	}

	color: red;
}

article {
	color: green;

	& {
		color: blue;
	}

	color: red;

	&.foo {
		color: yellow;
	}

	/* valid! */
}

::after, .foo {
	color: green;

	& {
		color: blue;
	}

	color: red;

	@media screen {
		color: purple;
	}

	color: orange;
}
