@import url("foo.css");
@import url("bar.css");

@custom-media --foo (min-width: 30em);

/**
 * Multi-line comment
 */

:root {
  --brand-red: hsl(5deg 10% 40%);
}

/* Single-line comment */

.class-foo:not(a, div) {
  top: calc(100% - 2rem);
  margin: 0;
}

/* Flush single line comment */
@media (width >= 60em) {
  #id-bar {
    /* Flush to parent comment */
    --offset: 0px;

    left: calc(var(--offset) + 50%);
    font-family: Helvetica, "Arial Black", sans-serif;
    color: #fff;
  }

  /* Flush nested single line comment */
  a::after {
    content: "→";
    display: block;
    background-image: url("x.svg");
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.insert {
  display: block;
}

.alter::after {
  content: "example";
  color: red;
}

.delete {
  display: block;
}