//simple case: @document
.parent {
  color:green;
  
  @document url-prefix() {
    .child {
      color:red;
    }
  }   
}

//selectors joinings test
.top {
  @supports (sandwitch: butter) {
    .inside & {
      property: value;
    }
  }
}

@supports (sandwitch: bread) {
  .in1 {
    .in2 {
      property: value;
    }
  }
}

.top {
  .inside & {
    @supports (sandwitch: ham) {
      property: value;
    }
  }
}

//combined with @font-face which has different kind of body
@supports (font-family: weirdFont) {
  @font-face {
    font-family: something;
    src: made-up-url;
  }
}

@font-face {
  @supports not (-webkit-font-smoothing: subpixel-antialiased) {
    font-family: something;
    src: made-up-url;
  }
}

//bubling through media
@supports (property: value) {
  .outOfMedia & {
    @media (max-size: 2px) {
      @supports (whatever: something) {
        property: value;
      } 
    }
  }
}

.onTop & {
  @supports (property: value) {
    @media (max-size: 2px) {
      @supports (whatever: something) {
        property: value;
      } 
    }
  }
}


//long combination of supports and media
@media print {
  html {
    in-html: visible;
    @supports (upper: test) {
      in-supports: first;
      div {
        in-div: visible;
        @supports not (-webkit-font-smoothing: subpixel-antialiased) {
          in-supports: second;
          @media screen {
            font-weight: 400;
            nested {
              property: value;
            }
          }
        }
      }
    }
  }
}

//another long combination of supports and media
@media print {
  @media (max-size: 2px) {
    .in1 {
      stay: here;
      @supports not (-webkit-font-smoothing: subpixel-antialiased) {
        .in2 & {
          @supports (whatever: something) {
            property: value;
          } 
        }
      }
    }
  }
}

//called from mixin 
.nestedSupportsMixin() {
  font-weight: 300;
  -webkit-font-smoothing: subpixel-antialiased;
  @supports not (-webkit-font-smoothing: subpixel-antialiased) {
    font-weight: 400;
    nested {
      property: value;
    }
  }
}

html {
    .nestedSupportsMixin;
}

// selectors should not propagate into all directive types
.onTop {
  @font-face {
    font-family: something;
    src: made-up-url;
  }

  @keyframes "textscale" {
      0% { font-size : 1em; }
    100% { font-size : 2em; }
  }

  animation   : "textscale";
  font-family : something;
}