// SYNTAX TEST "Packages/LESS/Syntaxes/LESS.sublime-syntax"

/*
Correctly differentiate between properties and selectors,
especially with pseudo-stuff because of the :
*/

*,
& + h1,
&:active #unit h1 + div,
&-element + h1,
[data-type="text"],
span::before[data-type="text"],
selector-ish::before[data-type="text"]:not(:first-child),
.selector:hover selector-ish.selector::before {
  *,
  & + h1,
  &:active + h1,
  &-element + h1,
  [data-type="text"],
  span::before[data-type="text"],
  filter::before[data-type="text"],
  selector-ish::before[data-type="text"]:not(:first-child),
  #selec-tor:hover, selector-ish::before {
    color: rgba(100, 120, 12, 95%);
    background-color: blue;
    line-height: ~"calc(@{space} + 4px)";
    span:hover {}
    filter:not(.empty) {}
    filter:drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
    filter:blue;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3))
  }
  color: rgba(100, 120, 12, 95%);
  background-color: blue;
  testbackground-color: blue;
}


/**
    *
/*  ^ comment.block.css punctuation.definition.comment.css */


/*
Test for ; insertion
the caret immediately after a selector should still be in meta.selector
*/
  button
  , button  // perhaps you want to type button:hover
//        ^ meta.selector
  , selector-ish  /* with comments at the end */
//              ^ meta.selector
  , button: // or maybe button::before (is caught by a regex in the keymap)



:root,
// <- entity.other.pseudo-class.css punctuation.definition.entity.css
// ^^ entity.other.pseudo-class.css
.class {
// ^^^^ meta.selector
//     ^ - meta.selector

  ~,
//^ punctuation.separator.combinator
  ::before,
// ^ entity.other.pseudo-element.css punctuation.definition.entity.css
// ^^ entity.other.pseudo-element.css
  .cl-ass { }
// ^^^^^^^ meta.selector
  span:hover { }
// ^^^ entity.name.tag.css
  background: #333;
// ^^^^^^^^^ meta.property-name.css
//           ^^^^^ meta.property-value.css
  background-color: pink;
// ^^^^^^^^^^^^^^^ meta.property-name.css
//                 ^^^^^ meta.property-value.css
  background: url('../assets/photo1-blue.jpg') center/cover no-repeat;
//                                             ^ support.constant.property-value.css
//                                                    ^ support.constant.property-value.css
//                                                          ^ support.constant.property-value.css
  &-bemish {  }
//^ keyword.operator.ampersand.less
// ^^^^^^^ entity.other.attribute-name.css
// ^^^^^^^^ meta.selector.css
  [data-type="text"]:hover,
//^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector
//                  ^^^^^^ entity.other.pseudo-class.css
//                  ^ punctuation.definition.entity.css
//                        ^ punctuation.separator.css
  [data-type="text"]:active {}
//^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector
//                  ^^^^^^^ entity.other.pseudo-class.css
//                  ^ punctuation.definition.entity.css

  #id@{interopol}bla,
  custom-element@{interopol}test,
  background: blue
// ^ meta.property-name.css
}


@foreground-color: grayscale(50%);
// <- variable.declaration.less punctuation.definition.variable.less
// ^ variable.declaration.less
//                 ^ meta.function-call.css support.function.filter.css
@background-color: hsl(30,100%,96%);
// <- variable.declaration.less punctuation.definition.variable.less
// ^ variable.declaration.less
@medialist-bg: @body-bg;
// ^^^^^^^^^^ variable.declaration.less
// <- variable.declaration.less punctuation.definition.variable.less
@media-list-bg: @body-bg;
// ^^^^^^^^^^ variable.declaration.less
// <- variable.declaration.less punctuation.definition.variable.less


*,
// <- entity.name.tag.wildcard.css
filter,
// ^^^ meta.selector.css entity.name.tag.css
//    ^ meta.selector.css punctuation.separator.css
filter
, .element
// <- punctuation.separator.sequence.css
filter {}
//    ^ meta.selector.css
// ^ entity.name.tag.css
//    ^ - entity.name.tag.css
filter{}
// ^ entity.name.tag.css
.use-mixin {
// ^^^^^^^ meta.selector.css entity.other.attribute-name.class.css
  &--bem {}
// ^^^^^ meta.selector.css entity.other.attribute-name
//^ keyword.operator.ampersand.less
  &_bem {}
// ^^^^ meta.selector.css entity.other.attribute-name
//     ^ meta.selector.css
}
.accordion__copy,
// ^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css
.accordion__copy--open {}
// ^^^^^^^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css
#main h1+.sub {
// <- entity.other.attribute-name.id.css punctuation.definition.entity.css
// ^^ entity.other.attribute-name.id.css
//    ^^ meta.selector.css entity.name.tag.css
//           ^ meta.selector.css
//     ^ - constant.numeric
//            ^ punctuation.section.property-list.begin.css
filter:hover {}
filter::before {}
// ^ entity.name.tag.css
//    ^^^^^^^^ entity.other.pseudo-element.css
//    ^^ punctuation.definition.entity.css
//             ^ punctuation.section.property-list.begin.css
//              ^ punctuation.section.property-list.end.css
html{}
// ^ entity.name.tag.css
html:after,
//  ^ entity.other.pseudo-element.css punctuation.definition.entity.css
//   ^ entity.other.pseudo-element.css
html:hover,
// ^ entity.name.tag.css
//  ^ entity.other.pseudo-class.css punctuation.definition.entity.css
//   ^ entity.other.pseudo-class.css
html::before {
// ^ entity.name.tag.css, keyword.control.html.elements
//  ^^ entity.other.pseudo-element.css punctuation.definition.entity.css
//     ^ entity.other.pseudo-element.css
  &:not(:first-child, :last-child) { text-decoration: underline; }
//      ^^^^^^^^^^^^ entity.other.pseudo-class.css
//      ^ punctuation.definition.entity.css
//                  ^ punctuation.separator.sequence.css
//                    ^^^^^^^^^^^ entity.other.pseudo-class.css
//                    ^ punctuation.definition.entity.css
  strong:not(:not(.strong)) {}
//           ^^^^ entity.other.pseudo-class.css
//                ^^^^^^^ entity.other.attribute-name.class.css
  &:first-child {}
//^^^^^^^^^^^^^^ meta.selector.css
// ^^^^^^^^^^^^ entity.other.pseudo-class.css
//^ keyword.operator.ampersand.less
// ^ punctuation.definition.entity.css
    & + & {}
  //  ^ punctuation.separator.combinator.css
  font-family: 'Lucida Grande', Verdana, sans-serif;
  font-size: 16px;
  line-height: ~"calc(@{space} + 4px)";
  transition: background-color .2s ease-in-out;

  cursor: pointer !important;
// ^ support.type.property-name.css
//          ^ meta.property-value.css support.constant.property-value.css
//                  ^ meta.property-value.css keyword.other.important.css
  display: -webkit-flex;
//  ^ support.type.property-name.css
//         ^ meta.property-value.css support.type.vendor-prefix.css
//                 ^ meta.property-value.css support.constant.property-value.css
  align-self : baseline;
//  ^ support.type.property-name.css
  -webkit-user-select: none;
//  ^ support.type.vendor-prefix.css
//         ^ support.type.property-name.css
  line-height: 1.5 * 20;
//                 ^ meta.property-value.css keyword.operator.less
  line-height: (1.5 %= 20);
//                  ^ meta.property-value.css keyword.operator.less
  color: @foreground-color;
//       ^^ meta.property-value.css variable.other.less
//       ^ punctuation.definition.variable.less
  --custom-background-color: green;
//        ^ support.type.custom-property.css support.type.custom-property.name.css
//                         ^ punctuation.separator.key-value.css
  padding-top: var(--custom-background-color, @blue);
//             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css
//             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css
//             ^^^ support.function.var.css
//                ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css
//                ^ punctuation.definition.group.begin.css
//                 ^^ support.type.custom-property.css punctuation.definition.custom-property.css
//                    ^ support.type.custom-property.css support.type.custom-property.name.css
//                                          ^ punctuation.separator
//                                            ^^^^^ variable.other
//                                                 ^ punctuation.definition.group.end.css
//                                                  ^ punctuation.terminator.rule.css
  padding-left: @{background-color};
//              ^^^^^^^^^^^^^^^^^^^ meta.property-value.css variable.other.less
//              ^ punctuation.definition.variable.less
//               ^ punctuation.definition.string.begin.less
//                ^ string.interpolated.less
//                                ^ punctuation.definition.string.end.less
  fill : rebeccapurple;
// ^ support.type.property-name.css
//        ^ meta.property-value.css support.constant.color.w3c-extended-color-keywords.css
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
// ^ support.type.property-name.css

  .fade-in(h1) {
    @keyframes fade-in-animation {
//  ^ meta.at-rule.keyframe.css keyword.control.at-rule.keyframe.css punctuation.definition.keyword.css
//             ^ meta.at-rule.keyframe.css entity.other.animation-name.css
      to {
        opacity: 1;
      }
    }

/*
Interpolated selectors
http://lesscss.org/features/#variables-feature-variable-interpolation
*/
    .@{selector}:hover + a,
//  ^^^^^^^^^^^^^^^^^^^^^^ meta.selector
//  ^ entity.other.attribute-name.class.css punctuation.definition.entity.css
//   ^^^^^^^^^^^ variable.other.less
//   ^ punctuation.definition.variable.less
//    ^ punctuation.definition.string.begin.less
//     ^ string.interpolated.less
//             ^ punctuation.definition.string.end.less
    @{selector}:hover + a {
//  ^^^^^^^^^^^^^^^^^^^^^^ meta.selector
//  ^^^^^^^^^^^ variable.other.less
//  ^ punctuation.definition.variable.less
//   ^ punctuation.definition.string.begin.less
//    ^ string.interpolated.less
//            ^ punctuation.definition.string.end.less
      @{property}: #0ee;
//    ^^^^^^^^^^^ meta.property-name
//    ^^^^^^^^^^^ variable.other
      background-@{property}: #999;
//              ^ - variable.other
//               ^^^^^^^^^^^ variable.other
//    ^^^^^^^^^^^^^^^^^^^^^^ meta.property-name
      @{property}-color: #999;
//    ^^^^^^^^^^^^^^^^^ meta.property-name
//    ^^^^^^^^^^^ variable.other
//               ^ - variable.other
      animation : progress-fade-in-animation .15s ease-in;
//                ^ meta.property-value.css
//                ^ string.unquoted.css
//    ^ meta.property-name.css support.type.property-name.css
      animation: progress-fade-in-animation .15s ease-in;
//             ^ source.less punctuation.separator.key-value.css
//    ^ meta.property-name.css support.type.property-name.css
//               ^ meta.property-value.css
//                                               ^ meta.property-value.css support.constant.property-value.css
//                                                      ^ punctuation.terminator.rule.css
    }
  }
}


/* CSS Modules

   Interoperable CSS: https://github.com/css-modules/icss#specification
   localAlias is basically any string inside a CSS file,
   that will be replaced with the value stored as keyFromDep
   keys must be a single term, consisting of only alphanumeric characters, underscores and dashes
*/
:import("path/to/dep.css") {
// ^^^^ entity.other.pseudo-class.css-modules.css
//     ^ punctuation.definition.group.begin.css
//      ^^^^ string
//                       ^ punctuation.definition.group.end.css
//                         ^ punctuation.section.property-list.begin.css
  localAlias: keyFromDep;
// ^^^^^^^^^ meta.property-name.css-modules.css
//            ^^^^^^^^^^ string
   blababla : "keyFromDep";
// ^^^^^^^^ meta.property-name.css-modules.css
//          ^ punctuation
//            ^^^^^^^^^^ string
//                        ^ punctuation
}
// an exportedKey exposes a specific value (a selector, a value, anything really)
:export {
// ^^^^ entity.other.pseudo-class.css-modules.css
  exportedKey: exportedValue;
// ^^^^^^^^^ meta.property-name.css-modules.css
//           ^ punctuation
//             ^^^^^^^^^^ string
//                          ^ punctuation
}
/* CSS Modules
   Composing selectors: https://github.com/css-modules/css-modules#css-modules
*/
.otherClassName {
  composes: className from "./style.css";  // from filename
  composes: classNameA classNameB;         // multiple classnames
  composes: globalClassName from global;   // from global classnames
// ^^^^^^^ meta.property-name.css-modules.css
//        ^ punctuation
//                          ^^^^ keyword.control.import.from.css-modules.css
//                                     ^ punctuation
}
/* CSS Modules
   Global vs. local scope: https://github.com/css-modules/css-modules#exceptions
*/
.localA :global .global-b .global-c :local(.localD.localE::before) .global-d
//      ^^^^^^^ entity.other.pseudo-class.css-modules
//                                  ^^^^^^ entity.other.pseudo-class.css-modules
//                                        ^ meta.function-call.css meta.group.css punctuation.definition.group.begin.css
//                                         ^^^^^^^^^^^^^^^^^^^^^^ meta.selector
//                                                               ^ punctuation.definition.group.end.css
:global {  // global blocks
// ^^^^ entity.other.pseudo-class.css-modules
  .global-class-name {
    color: green;
  }
}
:local {  // local blocks
// ^^^ entity.other.pseudo-class.css-modules
  .global-class-name {
    color: green;
  }
}


/*
  Support property values after a line break
*/
.grid {
  grid-template-areas:
    "header header"
    "aside main";
}


/*
  Mixins
  http://lesscss.org/features/#mixins-feature
*/
.border-radius(@color: h1; @padding; @margin: 2;) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}


/*
Guarded Namespaces and Mixins
http://lesscss.org/features/#mixins-feature-guarded-namespaces
*/

#namespace when not (@mode = huge) {
//                         ^ meta.function.parameters.less keyword.operator.less
//                           ^ string.unquoted
.a-test-mixin(@color: black; /*@margin: 10px;*/ @padding: 20px) when (lightness(@a) >= 50%) {
//                           ^^^^^^^^^^^^^^^^^^ comment.block.css
//                           ^^ punctuation.definition.comment.css
//                                           ^^ punctuation.definition.comment.css
//                                                              ^^ keyword.operator
//                                                                              ^^ meta.function.parameters.less variable.other.less
//                                                                              ^ punctuation.definition.variable.less
  .nested {
    @media screen and (max-width: 100px) {
      .mixin(@a) when not (isnumber(@a)) and (@a > 0) ... }
//                    ^^ keyword.operator
//                         ^^^^^^^^ meta.function-call.less support.function.less
    }
  }
  color: mix(@grey4, @grey5);
//       ^ meta.property-value.css meta.function-call.less support.function.less
  background: mix(@white, mix(@grey4, @grey5));
//                          ^ meta.property-value.css meta.function-call.less support.function.less
  background-color: linear-gradient(@white, mix(@grey4, mix(@grey4, @grey5)));
//                                          ^ meta.property-value.css meta.function-call.less support.function.less
  padding: @padding;
}
.mixin(@a) when not (isnumber(@a)) and (@a > 0) ... }
//                                         ^ meta.function.parameters.less keyword.operator.less


/*
Attribute selectors
*/
  a[data-property="text"] {
// ^^^^^^^^^^^^^^^^^^^^^^ meta.attribute-selector.css
// ^ punctuation.definition.entity.css
//   ^ entity.other.attribute-name.css
//               ^ keyword.operator.attribute-selector.css
//                ^ string.quoted.double.css punctuation.definition.string.begin.css
//                  ^ string.quoted.double.css
//                     ^ punctuation.definition.string.end.css
//                      ^ punctuation.definition.entity.css
  a[value^="text"] {
//   ^ meta.attribute-selector.css entity.other.attribute-name.css
//       ^ meta.attribute-selector.css keyword.operator.attribute-selector.css
  a[value="text"], a[value="text"] { }
//                  ^ punctuation.definition.entity.css
  a[href~="#"] {
//       ^ meta.attribute-selector.css keyword.operator.attribute-selector.css
  a[value|='text'] {
//       ^ meta.attribute-selector.css keyword.operator.attribute-selector.css
//           ^ meta.attribute-selector.css string.quoted.single.css
  a[value$=text] {
//       ^ meta.attribute-selector.css keyword.operator.attribute-selector.css
//          ^ meta.attribute-selector.css string.unquoted.css
  a[width*="100%" i] {
//       ^ meta.attribute-selector.css keyword.operator.attribute-selector.css
//                ^ meta.attribute-selector.css keyword.other.css
  a[value*="text" I] {
//       ^ meta.attribute-selector.css keyword.operator.attribute-selector.css





  color: @link-color;
//       ^ punctuation.definition.variable.less
  color: @@color; // variable variables
//       ^^ punctuation.definition.variable.less
  /*
  Properties as Variables
  http://lesscss.org/features/#variables-feature-properties-as-variables-new-
  */
  color: $color;
//       ^^^^^^ variable.other.less
//       ^ punctuation.definition.variable.less
  color: $nonproperty;
//       ^^^^^^^^^^^^ - variable.other.less
//       ^ - punctuation.definition.variable.less

  text-decoration: none;
  & {}
//^^ meta.selector.css
  &:hover {
    .mixin   { /* */ }
//  ^ punctuation.definition.entity.css
//  ^^^^^^ meta.selector.css
    #mixin(@color-param, @position-param) { /* */ }
//  ^ punctuation.definition.entity.css
//  ^^^^^^ meta.selector.css
    .border-radius(@radius: 5px) {
      -webkit-border-radius: @radius;
         -moz-border-radius: @radius;
              border-radius: @radius;
    }
    .message-mixin(success; var(--green); var(--green-dark));
//                          ^^^ support.function.var.css
//                              ^^ punctuation.definition.custom-property.css
//                                ^ support.type.custom-property.name.css
    object-fit: scale-down;
//  ^^^^^^^^^^ support.type.property-name.css
//              ^^^^^^^^^^ meta.property-value.css support.constant.property-value.css
    color: lighten(@link-color, 5%);
//  ^ support.type.property-name.css
//         ^ meta.property-value.css meta.function-call.less support.function.less
//                ^ meta.property-value.css meta.function-call.less punctuation.definition.group.begin.less
//                   ^ meta.property-value.css meta.function-call.less meta.function.parameters.less variable.other.less
    background: linear-gradient(@grey2, @black);
//                            ^ meta.property-value.css meta.function-call.css support.function.gradient.css
//                             ^ meta.property-value.css meta.group.css punctuation.definition.group.begin.css
//                              ^ meta.property-value.css variable.other.less punctuation.definition.variable.less
//                               ^ meta.property-value.css variable.other.less
//                                      ^ meta.property-value.css variable.other.less punctuation.definition.variable.less
//                                       ^ meta.property-value.css variable.other.less
//                                            ^ meta.property-value.css meta.group.css punctuation.definition.group.end.css
  }
}


#variables {
  @variable: 10px;
  @another-variable: @variable;

  width: @variable + @another-variable;
  width: @variable*2;

  .@{varname}--subclass#another-variable@{variable}id[data-attr="text"] { color: @orangy; }
//            ^ entity.other.attribute-name.class.css
//                     ^ entity.other.attribute-name.id.css punctuation.definition.entity.css
//                             ^ entity.other.attribute-name.id.css
//                                                 ^ entity.other.attribute-name.id.css
}
#@{varname}--subclass { color: @orangy; }
//          ^ entity.other.attribute-name.id.css

@media only tv /*awesome*/ and (-webkit-max-width: @pixels) and (max-pixel-ratio: 1920/1200) and (min-aspect-ratio: portrait) { }
//     ^ meta.at-rule.media.css keyword.operator.logic.media.css
//                                                         ^ meta.at-rule.media.css
//          ^ meta.at-rule.media.css support.constant.media.css
//               ^ meta.at-rule.media.css comment.block.css
//                             ^ meta.at-rule.media.css punctuation.definition.group.begin.css
//                              ^ meta.at-rule.media.css support.type.vendor-prefix.css
//                               ^ meta.at-rule.media.css support.type.vendor-prefix.css
//                                       ^ meta.at-rule.media.css support.type.property-name.media.css
//                                               ^ meta.at-rule.media.css punctuation.separator.key-value.css
//                                                 ^ meta.at-rule.media.css variable.other.less punctuation.definition.variable.less
//                                                  ^ meta.at-rule.media.css variable.other.less
//                                                          ^ meta.at-rule.media.css keyword.operator.logic.media.css
//                                                                                                                  ^ meta.at-rule.media.css support.constant.property-value.css
.avatar:not(body) {}
//          ^^^^ entity.name.tag.css
.avatar:not(.class) {}
//               ^ meta.group.css entity.other.attribute-name.class.css
//                ^ meta.group.css punctuation.definition.group.end.css
.class#id:nth-child(2n-1) {}
//                   ^ constant.numeric keyword.other.unit.css
//                    ^ meta.selector.css meta.function-call.css meta.group.css constant.numeric
.avatar:nth-child(3) {
//     ^ entity.other.pseudo-class.css punctuation.definition.entity.css
//.     ^ entity.other.pseudo-class.css
//.         ^ entity.other.pseudo-class.css
//.              ^ meta.group.css punctuation.definition.group.begin.css
//.               ^ meta.group.css constant.numeric.css
//.                ^ meta.group.css punctuation.definition.group.end.css
//.                 ^
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: url(data:@{image}/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);
// ^ support.type.property-name.css
//               ^ meta.property-value.css meta.group.css punctuation.definition.group.begin.css
//                 ^ meta.property-value.css meta.group.css string.unquoted.css
//                      ^ meta.property-value.css meta.group.css variable.other.less punctuation.definition.string.begin.less
//                                                                                                                                                                                                                                                                                                                                         ^ meta.property-value.css meta.group.css punctuation.definition.group.end.css
  background: url("data:@{image}/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7");
//               ^ meta.property-value.css meta.group.css punctuation.definition.group.begin.css
//                ^ meta.property-value.css meta.group.css string.quoted.double.css punctuation.definition.string.begin.css
//                 ^ meta.property-value.css meta.group.css string.quoted.double.css
//                      ^ meta.property-value.css meta.group.css string.quoted.double.css variable.other.less punctuation.definition.variable.less
//                                                                                                                                                                                                                                                                                                                                          ^ meta.property-value.css meta.group.css string.quoted.double.css punctuation.definition.string.end.css
//                                                                                                                                                                                                                                                                                                                                           ^ meta.property-value.css meta.group.css punctuation.definition.group.end.css
  background: url('data:@{image}/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7');
//               ^ meta.property-value.css meta.group.css punctuation.definition.group.begin.css
//                ^ meta.property-value.css meta.group.css string.quoted.single.css punctuation.definition.string.begin.css
//                 ^ meta.property-value.css meta.group.css string.quoted.single.css
//                      ^ meta.property-value.css meta.group.css string.quoted.single.css variable.other.less punctuation.definition.variable.less
//                                                                                                                                                                                                                                                                                                                                          ^ meta.property-value.css meta.group.css string.quoted.single.css punctuation.definition.string.end.css
//                                                                                                                                                                                                                                                                                                                                           ^ meta.property-value.css meta.group.css punctuation.definition.group.end.css
}
@import (reference) "@{themes}/tidal-wave.less";
//      ^^^^^^^^^^^ meta.at-rule.import.css meta.at-rule.arguments.less
//      ^ punctuation.definition.group.begin.less
//                ^ punctuation.definition.group.end.less
//                   ^ variable.other.less punctuation.definition.variable.less
//                      ^ string.quoted.double.css variable.other.less string.interpolated.less
//                                             ^ punctuation.terminator.rule.css
@import "mixins";
// <- meta.at-rule.import.css keyword.control.at-rule.import.css punctuation.definition.keyword.css
// ^ meta.at-rule.import.css keyword.control.at-rule.import.css
//      ^^^^^^^^ string.quoted.double.css
//      ^ punctuation.definition.string.begin.css
//             ^ punctuation.definition.string.end.css
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400");
//          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.less meta.at-rule.import.css  meta.function-call.css meta.group.css string.quoted.double.css
//          ^ punctuation.definition.string.begin.css
//                                                                      ^ punctuation.definition.string.end.css
@import url(somefile);
//         ^ punctuation.definition.group.begin.css
//      ^^^ meta.function-call.css support.function.url.css
//          ^^^^^^^^ meta.group.css string.unquoted.css
//                  ^ punctuation.definition.group.end.css
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500);
//          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css string.unquoted.css


/*
  Maps
  http://lesscss.org/#maps
  http://lesscss.org/features/#maps-feature
*/
@sizes: {
  mobile: 320px;
//^^^^^^ variable.declaration.map.less
//        ^^^^^ constant.numeric
//      ^ punctuation.separator.key-value
//             ^ punctuation.terminator.rule
  tablet: 768px;
  desktop: 1024px;
}
@config: {
  @options: {
    library-on: true
//  ^^^^^^^^^^ variable.declaration.map.less
  }
}
#colors() {
  primary: blue;
//  ^^^^^ variable.declaration.map.less
//       ^ punctuation.separator.key-value
  secondary: green;
}
#library() {
  .colors() { primary: grey; }
}

.button {
  color: #colors[primary];
//       ^^^^^^^ entity.other.attribute-name.id
//       ^ punctuation.definition.entity
//              ^^^^^^^^^ meta.brackets.less
//              ^ punctuation.section.brackets.begin
//                      ^ punctuation.section.brackets.end
//                ^^^^^^ variable.other.less
  border: 1px solid .colors[@secondary];
//                  ^^^^^^^ entity.other.attribute-name.class
//                  ^ punctuation.definition.entity
//                         ^^^^^^^^^ meta.brackets.less
//                         ^ punctuation.section.brackets.begin
//                                    ^ punctuation.section.brackets.end
//                          ^^^^^^ variable.other.less
//                          ^ punctuation.definition.variable
}
.navbar {
  display: block;

  @media (min-width: @sizes[tablet]) {
//                         ^^^^^^^^ meta.brackets.less
//                         ^ punctuation.section.brackets.begin
//                                ^ punctuation.section.brackets.end
//                          ^^^^^^ variable.other.less
    display: inline-block;
    background-color: rgba(#ui-colors.dark[background-090],0.7);
//                                                        ^ - meta.alias
  }
}

/*
CSS Guards
http://lesscss.org/features/#css-guards-feature
*/

& when (@config[@options][library-on] = true) {
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css
// ^ keyword.operator.logic.mixin.less
//     ^ meta.function.parameters.less punctuation.definition.group.begin
  .produce-ruleset {
    prop: val;
  }
}

.my-optional-style() when (@my-option = true) {
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css
//                   ^ keyword.operator.logic.mixin.less
//                        ^ meta.function.parameters.less punctuation.definition.group.begin
  button {
    color: white;
  }
}

button when not (@my-option = true) {
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css
//        ^ keyword.operator.logic.mixin.less
//          ^ keyword.operator.logic.mixin.less
//              ^ meta.function.parameters.less punctuation.definition.group.begin
  color: white;
}


/*
Aliasing Mixins
http://lesscss.org/features/#mixins-feature-mixin-aliasing-feature
*/
#theme.dark.navbar {
  .colors(light) {
    primary: purple;
  }
  .colors(dark) {
    primary: black;
    secondary: grey;
  }
  .box {
    @alias: #library.rules();
    @alias();
  }
}

.navbar {
  @colors: .theme#dark.navbar.colors(dark);
//       ^ punctuation.separator.key-value.css
//         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css meta.alias.less
//         ^ punctuation.definition.entity.less
//               ^ punctuation.definition.entity.less
//                    ^ punctuation.definition.entity.less
//                           ^ punctuation.definition.entity.less
//                                  ^ punctuation.definition.group.begin
//                                       ^ punctuation.definition.group.end
//                                        ^ punctuation.terminator.rule.css
  @colors: .theme.dark.navbar#colors(dark);
//       ^ punctuation.separator.key-value.css
//         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css meta.alias.less
//         ^ punctuation.definition.entity.less
//               ^ punctuation.definition.entity.less
//                    ^ punctuation.definition.entity.less
//                           ^ punctuation.definition.entity.less
//                                  ^ punctuation.definition.group.begin
//                                       ^ punctuation.definition.group.end
//                                        ^ punctuation.terminator.rule.css
  @colors: #theme.dark.navbar#colors(dark);
//       ^ punctuation.separator.key-value.css
//         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css meta.alias.less
//         ^ punctuation.definition.entity.less
//               ^ punctuation.definition.entity.less
//                    ^ punctuation.definition.entity.less
//                           ^ punctuation.definition.entity.less
//                                  ^ punctuation.definition.group.begin
//                                       ^ punctuation.definition.group.end
//                                        ^ punctuation.terminator.rule.css
  background: @colors[primary];
  border: 1px solid @colors[secondary];
  .button {
    @colors: #library.colors();
    color: @colors[primary];
    border-color: @colors[secondary];
    border-color: #library.colors[secondary];
//                ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css meta.alias.less
//                                          ^ punctuation.terminator.rule.css - meta.alias.less
//                               ^^^^^^^^^^^ meta.brackets.less
//                               ^ punctuation.section.brackets.begin.less
//                                         ^ punctuation.section.brackets.end.less
  }
}


/*
Detached Rulesets
http://lesscss.org/features/#detached-rulesets-feature
*/
header {
  background-color: blue;

  #hover({
//       ^ punctuation.section.property-list.begin.css
    .site-header-info-extra-tooltip {
      opacity: 1;
      #transition(~'opacity @{duration-short} @{ease}')
//                ^ string.quoted.single.css markup.raw.less keyword.operator.less
    }
    .site-header-info-extra-tooltip {
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css
      opacity: 1;
      #transition(~'opacity @{duration-short} @{ease}')

      .site-header-info-extra-tooltip {
//    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css
        opacity: 1;
        #transition(~'opacity @{duration-short} @{ease}')

      }
    }
  })

  .desktop-and-old-ie({
//                    ^ punctuation.section.property-list.begin.css
    background-color: red(color);
//  ^^^^^^^^^^^^^^^^  meta.property-name.css support.type.property-name.css
//                  ^ punctuation.separator.key-value.css
//                    ^ meta.function-call.css support.function.color.css
//                       ^ punctuation.definition.group.begin.css
    width: @variable + @another-variable;
    height: 100px;
  });
//^ punctuation.section.property-list.end.css
}




// ensure we don't confuse variables with @-keywords
    @pageColor: blue;
//  ^^^^^ - meta.at-rule
    @namespaceColor: pink;
//  ^^^^^ - meta.at-rule
    @documentColor: pink;
//  ^^^^^ - meta.at-rule
    @importColor: pink;
//  ^^^^^ - meta.at-rule
    @keyframesColor: pink;
//  ^^^^^ - meta.at-rule
    @supportsColor: pink;
//  ^^^^^ - meta.at-rule



// ------------ A selection of tests from the default CSS package: -------------


.test-strings {
    content: "double";
//           ^^^^^^^^  string.quoted.double.css
//           ^         punctuation.definition.string.begin.css
//                  ^  punctuation.definition.string.end.css
    content: 'single';
//           ^^^^^^^^  string.quoted.single.css
//           ^         punctuation.definition.string.begin.css
//                  ^  punctuation.definition.string.end.css

    content: 'invalid;
//                    ^ invalid.illegal.newline.css
}

.test-punctuation {
//                ^ punctuation.section.property-list
    top: 1px;
//     ^      punctuation.separator.key-value.css
//          ^ punctuation.terminator.rule.css

    top: cubic-bezier(0.2, 0, 0.13, 2);
/*                    ^^^ constant.numeric.float.decimal.css */
/*                     ^ punctuation.separator.decimal.css */
/*                       ^ punctuation.separator.sequence.css*/
/*                         ^ constant.numeric.integer.decimal.css  */
/*                          ^ punctuation.separator.sequence.css*/
/*                            ^^^^ constant.numeric.float.decimal.css */
/*                             ^ punctuation.separator.decimal.css */

    top: url("image");
//          ^         punctuation.definition.group.begin.css
//                  ^ punctuation.definition.group.end.css
}
// < punctuation.section.property-list.css

    .classname {}
//  ^^^^^^^^^^^ meta.selector.css
//  ^          punctuation.definition.entity.css
//   ^^^^^^^^^ entity.other.attribute-name.class.css

    #id {}
//  ^   punctuation.definition.entity.css
//   ^^ entity.other.attribute-name.id.css

    html {}
//  ^^^^ entity.name.tag.css

    @charset "UTF-8";
//  ^^^^^^^^^^^^^^^^ meta.at-rule
//  ^        punctuation.definition.keyword.css
//   ^^^^^^^ keyword.control.at-rule

    @import "x" print;
//  ^^^^^^^^^^^^^^^^^ meta.at-rule
//  ^                 punctuation.definition.keyword.css
//   ^^^^^^           keyword.control.at-rule
//              ^^^^^ support.constant.media.css

//  ^^^^^^^^^^ - meta.at-rule.namespace.css
    @namespace svg "http://www.w3.org/1999/xhtml";
//  ^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css
//  ^              punctuation.definition.keyword.css
//   ^^^^^^^^^     keyword.control.at-rule.namespace.css
//             ^^^ entity.other.namespace-prefix.css

    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css
//             ^^^ support.function.url.css
//             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css
//                ^ meta.group.css punctuation.definition.group.begin.css
//                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css string.quoted.double.css
//                                                                                ^ meta.group.css punctuation.definition.group.end.css

    @page :left {}
//  ^^^^^^^^^^^^ meta.at-rule.page.css
//  ^     punctuation.definition.keyword.css
//   ^^^^ keyword.control.at-rule.page.css

    @media only screen {}
//  ^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css
//  ^                  punctuation.definition.keyword.css
//   ^^^^^             keyword.control.at-rule.media.css
//         ^^^^        keyword.operator.logic.media.css
//              ^^^^^^ support.constant.media.css

    @media (min-width: 700px) {}
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */
/*  ^ punctuation.definition.keyword.css */
/*   ^^^^^ keyword.control.at-rule.media.css */
/*         ^ punctuation.definition.group.begin.css */
/*          ^^^^^^^^^ support.type.property-name.media.css */
/*                     ^^^^^ constant.numeric.integer.decimal.css */
/*                          ^ punctuation.definition.group.end.css */

    @media (min-width: 700px) and (max-width: 2000px) {}
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */
/*  ^ punctuation.definition.keyword.css */
/*   ^^^^^ keyword.control.at-rule.media.css */
/*         ^ punctuation.definition.group.begin.css */
/*          ^^^^^^^^^ support.type.property-name.media.css */
/*                     ^^^^^ constant.numeric.integer.decimal.css */
/*                          ^ punctuation.definition.group.end.css */
/*                            ^^^ keyword.operator.logic */
/*                                ^ punctuation.definition.group.begin.css */
/*                                 ^^^^^^^^^ support.type.property-name.media.css */
/*                                            ^^^^^^ constant.numeric.integer.decimal.css */
/*                                                  ^ punctuation.definition.group.end.css */

   @media only screen and (-webkit-min-device-pixel-ratio: /* comment */ 1.3),
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */
/*  ^ punctuation.definition.keyword.css */
/*   ^^^^^ keyword.control.at-rule.media.css */
/*         ^^^^ keyword.operator.logic.media.css */
/*              ^^^^^^ support.constant.media.css */
/*                     ^^^ keyword.operator.logic.media.css */
/*                         ^ punctuation.definition.group.begin.css */
/*                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ support.type.property-name.media.css */
/*                                                        ^ punctuation.separator.key-value.css */
/*                                                          ^^^^^^^^^^^^^ comment.block.css */
/*                                                                        ^^^ constant.numeric.float.decimal.css */
/*                                                                           ^ punctuation.definition.group.end.css */
/*                                                                            ^ punctuation.definition.arbitrary-repetition */
    only screen and (-o-min-device-pixel-ratio: 13/10),
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */
/*  ^^^^ keyword.operator.logic.media.css */
/*       ^^^^^^ support.constant.media.css */
/*              ^^^ keyword.operator.logic.media.css */
/*                  ^ punctuation.definition.group.begin.css */
/*                   ^^^^^^^^^^^^^^^^^^^^^^^^^ support.type.property-name.media.css */
/*                                            ^ punctuation.separator.key-value.css */
/*                                              ^^ constant.numeric.integer.decimal.css */
/*                                                ^ keyword.operator */
/*                                                 ^^ constant.numeric.integer.decimal.css */
/*                                                   ^ punctuation.definition.group.end.css */
/*                                                    ^ punctuation.definition.arbitrary-repetition */
    only screen and (min-resolution: 120dpi)
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css */
/*  ^^^^ keyword.operator.logic.media.css */
/*       ^^^^^^ support.constant.media.css */
/*              ^^^ keyword.operator.logic.media.css */
/*                  ^ punctuation.definition.group.begin.css */
/*                   ^^^^^^^^^^^^^^ support.type.property-name.media.css */
/*                                 ^ punctuation.separator.key-value.css */
/*                                   ^^^^^^ constant.numeric.integer.decimal.css */
/*                                         ^ punctuation.definition.group.end.css */
{}

    @custom-media --a-b (width: 1px);
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.custom-media.css
//  ^                          punctuation.definition.keyword.css
//   ^^^^^^^^^^^^              keyword.control.at-rule.custom-media.css
//                       ^^^^^ support.type.property-name.media.css

    @keyframes beat, bounce {}
//  ^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.keyframe.css
//  ^                       punctuation.definition.keyword.css
//   ^^^^^^^^^              keyword.control.at-rule.keyframe.css
//             ^^^^         entity.other.animation-name.css
//                 ^        punctuation.definition.arbitrary-repetition.css
//                   ^^^^^^ entity.other.animation-name.css

@keyframes test-keyframes-keywords {
    from, to {}
/*  ^^^^ keyword.keyframe-selector.css */
/*      ^ punctuation.separator.sequence.css */
/*        ^^ keyword.keyframe-selector.css */

    0%, 100% {}
/*  ^^ constant.numeric.integer.decimal.css */
/*   ^ keyword.other.unit.css */
/*    ^ punctuation.separator.sequence.css */
/*      ^^^^ constant.numeric.integer.decimal.css */
/*         ^ keyword.other.unit.css */

    .99%, 100.99% {}
/*  ^^^^ constant.numeric.float.decimal.css */
/*  ^ punctuation.separator.decimal.css */
/*     ^ keyword.other.unit.css */
/*      ^ punctuation.separator.sequence.css */
/*        ^^^^^^^ constant.numeric.float.decimal.css */
/*           ^ punctuation.separator.decimal.css */
/*              ^ keyword.other.unit.css */

    0%, to {}
/*  ^^ constant.numeric.integer.decimal.css */
/*   ^ keyword.other.unit.css */
/*    ^ punctuation.separator.sequence.css */
/*      ^^ keyword.keyframe-selector.css */
}

    @document url(http://) { }
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css */
/*  ^ punctuation.definition.keyword.css */
/*  ^^^^^^^^^ keyword.control.at-rule.document.css */
/*                         ^^^ meta.block.css */
/*                         ^ punctuation.definition.block.begin.css */
/*                           ^ punctuation.definition.block.end.css */

@document url(http://www),
/*        ^^^ support.function.url.css */
/*            ^^^^^^^^^^ string.unquoted.css */
/*                       ^ punctuation.separator.sequence.css */
          url-prefix("http://www"),
/*        ^^^^^^^^^^ support.function.url-prefix.css */
/*                   ^^^^^^^^^^^^ string.quoted.double.css */
          domain(mozilla.org),
/*        ^^^^^^ support.function.domain.css */
/*               ^^^^^^^^^^^ string.unquoted.css */
          regexp("https:.*")
/*        ^^^^^^ support.function.regexp.css */
/*               ^^^^^^^^^^ string.quoted.double.css */
{
    .class {
/*  ^^^^^^ meta.at-rule.document.css entity.other.attribute-name.class.css */
        display: none;
/*      ^^^^^^^ meta.at-rule.document.css meta.property-name.css */
    }
}

    @font-face {
//  ^^^^^^^^^^^ meta.at-rule.css
//  ^          punctuation.definition.keyword.css
//   ^^^^^^^^^ keyword.control.at-rule.css

    src: local(Font);
        /* */
//      ^^^^^ comment.block.css
}

    @font-face
//  ^^^^^^^^^^^ meta.at-rule.css
//  ^          punctuation.definition.keyword.css
//   ^^^^^^^^^ keyword.control.at-rule.css
{
    font-family: monospace,
//  ^^^^^^^^^^^ support.type.property-name.css
//               ^^^^^^^^^ support.constant.font-name.css
        /* */
//      ^^^^^ comment.block.css
}

    @supports not ( and ( top: 2px ) ) { }
/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.supports.css */
/*  ^ punctuation.definition.keyword.css */
/*   ^^^^^^^^ keyword.control.at-rule.supports.css */
/*            ^^^ keyword.operator.logic.css */
/*                ^ meta.group.css punctuation.definition.group.begin.css */
/*                  ^^^ keyword.operator.logic.css */
/*                      ^ meta.group.css punctuation.definition.group.begin.css */
/*                        ^^^ support.type.property-name.css */
/*                           ^ punctuation.separator.key-value.css */
/*                              ^^ constant.numeric.integer.decimal.css keyword.other.unit.css */
/*                                 ^ meta.group.css punctuation.definition.group.end.css */
/*                                   ^ meta.group.css punctuation.definition.group.end.css */
/*                                     ^^^ meta.block.css */
/*                                     ^ punctuation.definition.block.begin.css */
/*                                       ^ punctuation.definition.block.end.css */

@supports (--foo: green) {
/*         ^^^^^ support.type.custom-property.css */
    .class {
/*  ^^^^^^ meta.at-rule.supports.css entity.other.attribute-name.class.css */
        display: none;
/*      ^^^^^^^ meta.at-rule.supports.css meta.property-name.css */
    }
}

    @counter-style {}
//  ^          punctuation.definition.keyword.css
//  ^^^^^^^^^^^^^^ keyword.control.at-rule.counter-style.css

@counter-style none {}
//             ^^^^ invalid.illegal.counter-style-name.css

@counter-style decimal {}
//             ^^^^^^^ invalid.illegal.counter-style-name.css

    @counter-style name {
//  ^          punctuation.definition.keyword.css
//  ^^^^^^^^^^^^^^ keyword.control.at-rule.counter-style.css
//                 ^^^^ entity.other.counter-style-name.css
    symbols: "‣";
//  ^^^^^^^ support.type.property-name.css
    suffix: " ";
//  ^^^^^^ support.type.property-name.css
//          ^^^ string.quoted.double.css
}

    @counter-style blacknwhite
//  ^^^^^^^^^^^^^^ meta.at-rule.counter-style.css keyword.control.at-rule.counter-style.css
//                 ^^^^^^^^^^^ entity.other.counter-style-name.css
{
  system: cyclic;
  negative: "(" ")";
  prefix: "/";
  symbols: ◆ ◇;
  suffix: "/ ";
  range: 2 4;
  speak-as: "bullets";
//^^^^^^^^ support.type.property-name.css
}

.test-var { --test-var: arial; }
//          ^^^^^^^^^^ support.type.custom-property.css
//          ^^         punctuation.definition.custom-property
//            ^^^^^^^^ support.type.custom-property.name.css

.test-types {
    top: 20;
/*       ^^ constant.numeric.integer.decimal.css */
    top: +.95e-20;
/*       ^^^^^^^^ constant.numeric.float.decimal.css */
/*        ^ punctuation.separator.decimal.css */
   top: +1e1e1 .1e1e1;
/*       ^^^^ constant.numeric.float.decimal.css */
/*           ^ - constant.numeric */
/*              ^^^^ constant.numeric.float.decimal.css */
/*                  ^ - constant.numeric */
    top: -1.5e+93%;
/*       ^^^^^^^^^ constant.numeric.float.decimal.css */
/*         ^ punctuation.separator.decimal.css */
}

.test-units {
    top: 1px;
/*       ^^^ constant.numeric.integer.decimal.css */
/*        ^^ keyword.other.unit.css */
    top: 1.1em;
/*       ^^^^^ constant.numeric.float.decimal.css */
/*        ^ punctuation.separator.decimal.css */
/*          ^^ keyword.other.unit.css */
    top: -100%;
/*       ^^^^^ constant.numeric.integer.decimal.css */
/*           ^ keyword.other.unit.css */
    top: 1.1.1deg;
/*       ^^^^^^^^ constant.numeric.float.decimal.css */
/*        ^ punctuation.separator.decimal.css */
/*          ^ punctuation.separator.decimal.css */
/*            ^^^ keyword.other.unit.css */
}

.test-properties {
    -webkit-transform: none;
//  ^^^^^^^^^^^^^^^^^ meta.property-name.css
//  ^^^^^^^^ support.type.vendor-prefix.css
//          ^^^^^^^^^ support.type.property-name.css
//                     ^^^^ meta.property-value.css support.constant.property-value.css
}

.test-operators {
    top: calc(1px + 1px);
    /*            ^ keyword.operator.css */
    top: calc(1px - 1px);
    /*            ^ keyword.operator.css */
    top: calc(1px / 1px);
    /*            ^ keyword.operator.css */
    top: calc(1px * 1px);
    /*            ^ keyword.operator.css */

    top: calc(1px+1px);
    /*           ^ -keyword.operator.css */
    top: calc(1px-1px);
    /*           ^ -keyword.operator.css */
    top: calc(1px/1px);
    /*           ^ keyword.operator.css */
    top: calc(1px*1px);
    /*           ^ keyword.operator.css */
}

.test-important {
    top: 1px !important;
//           ^^^^^^^^^^ keyword.other.important.css
    top: 1px!important;
//          ^^^^^^^^^^ keyword.other.important.css
}

// Test Functional Pseudo Class Meta Scopes
.test:nth-child(even) {}
//   ^^^^^^^^^^^^^^^^ meta.function-call.css
//             ^^^^^^ meta.group.css
//             ^      punctuation.definition.group.begin.css
//                  ^ punctuation.definition.group.end.css

.test-pseudo-classes:nth-child(2):hover {}
//                   ^^^^^^^^^          entity.other.pseudo-class.css
//                             ^        constant.numeric.css
//                               ^      punctuation.definition.entity.css
//                                ^^^^^ entity.other.pseudo-class.css

.test-pseudo-class-numerics:nth-last-of-type(-n+3) {}
/*                         ^^^^^^^^^^^^^^^^^ entity.other.pseudo-class.css */
/*                                           ^^^^ constant.numeric.integer.decimal.css */

.test-pseudo-class-keywords:nth-of-type(odd) {}
/*                         ^^^^^^^^^^^^ entity.other.pseudo-class.css */
/*                                      ^^^ keyword.other.pseudo-class.css */

.test-pseudo-class-strings:dir(ltr) {}
/*                        ^^^^ entity.other.pseudo-class.css */
/*                             ^^^ string.unquoted.css */

.test-pseudo-class-tag:not(*) {}
/*                    ^^^^ entity.other.pseudo-class.css */
/*                         ^ entity.name.tag.wildcard.css */

.test-pseudo-elements::before {}
/*                   ^^ punctuation.definition.entity.css */
/*                   ^^^^^^^^ entity.other.pseudo-element.css */

.test-pseudo-elements:after {}
/*                   ^ punctuation.definition.entity.css */
/*                   ^^^^^^ entity.other.pseudo-element.css */

.test-pseudo-elements::-webkit-slider-runnable-track
/*                   ^^ punctuation.definition.entity.css */
/*                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ entity.other.pseudo-element.css */


.test-unicode { top: "\2764 \273e"; }
//                    ^^^^^       constant.character.escape.css
//                          ^^^^^ constant.character.escape.css

.test-unicode-range {
    unicode-range: U+0025-00FF, U+4??;
//                 ^^^^^^^^^^^        support.unicode-range.css
//                 ^^                 support.constant.unicode-range.prefix.css
//                   ^^^^^^^^^        constant.codepoint-range.css
//                       ^            punctuation.section.range.css
//                              ^^^^^ support.unicode-range.css
//                              ^^    support.constant.unicode-range.prefix.css
//                                ^^^ constant.codepoint-range.css
}

.test-escape-character { top: "\nstring\n"; }
//                             ^^         constant.character.escape.css
//                                     ^^ constant.character.escape.css

.test-attribute-selectors[disabled][type=button] {}
//                       ^^^^^^^^^^ meta.attribute-selector.css
//                       ^ punctuation.definition.entity.css
//                        ^^^^^^^^ entity.other.attribute-name.css
//                                ^ punctuation.definition.entity.css
//                                  ^^^^ entity.other.attribute-name.css
//                                       ^^^^^^ string.unquoted.css

.test-attribute-selectors-namespaces[n|a=""][*|a=""][|att] {}
//                                   ^ entity.other.namespace-prefix.css
//                                    ^ punctuation.separator.namespace.css
//                                           ^ entity.name.namespace.wildcard.css
//                                            ^ punctuation.separator.namespace.css
//                                                   ^ punctuation.separator.namespace.css

.test-attribute-selectors-operators[a=""][a~=""][a|=""][a^=""][a$=""][a*=""] {}
//                                   ^ keyword.operator.attribute-selector.css
//                                         ^^ keyword.operator.attribute-selector.css
//                                                ^^ keyword.operator.attribute-selector.css
//                                                       ^^ keyword.operator.attribute-selector.css
//                                                              ^^ keyword.operator.attribute-selector.css
//                                                                     ^^ keyword.operator.attribute-selector.css

.test-attribute-selectors-whitespace[a = ""] {}
//                                   ^   entity.other.attribute-name.css
//                                     ^ keyword.operator.attribute-selector.css

.test-attribute-selectors-flags[a="" i] {}
//                                   ^ keyword.other.css

   *.test-universal-selector {}
// ^ entity.name.tag.wildcard.css

.test-combinators >>> a >> a > a + b ~ a {}
//                ^^^                  punctuation.separator.combinator.css
//                      ^^             punctuation.separator.combinator.css
//                           ^         punctuation.separator.combinator.css
//                               ^     punctuation.separator.combinator.css
//                                   ^ punctuation.separator.combinator.css

.test-generic-font-families {
    font: serif;
//        ^^^^^      support.constant.font-name.css
    font: sans-serif;
//        ^^^^^^^^^^ support.constant.font-name.css
    font: cursive;
//        ^^^^^^^    support.constant.font-name.css
    font: fantasy;
//        ^^^^^^^    support.constant.font-name.css
    font: monospace;
//        ^^^^^^^^^  support.constant.font-name.css
}

.test-unquoted-font-name {
    font: m700, aria;
//        ^^^^ string.unquoted
//            ^ punctuation.separator
//            ^^ - string
//              ^^^^ string.unquoted
    font: inherit;
//        ^ - string
    font: initial;
//        ^ - string
    font: unset;
//        ^ - string
    font: italic;
//        ^ - string
    font: small-caps;
//        ^ - string
    font: 2em m700, sans-serif;
//        ^ - string
//            ^^^^ string.unquoted
//                ^ punctuation.separator
//                  ^ - string
    font-weight: bold;
//  ^^^^^^^^^^^ meta.property-name support.type.property-name
}

.test-color-values {
    color: aqua;
//         ^^^^ support.constant.color.w3c-standard-color-name.css

    color: aliceblue;
//         ^^^^^^^^^ support.constant.color.w3c-extended-color-keywords.css

    color: currentColor;
//         ^^^^^^^^^^^^ support.constant.color.w3c-special-color-keyword.css

    color: transparent;
//         ^^^^^^^^^^^ support.constant.color.w3c-special-color-keyword.css

    color: #b4da55;
//         ^ punctuation.definition.constant.css
//         ^^^^^^^ constant.other.color.rgb-value.css

    color: #137;
//         ^^^^ constant.other.color.rgb-value.css

    color: #0f0a;
//         ^^^^^ constant.other.color.rgba-value.css

    color: #a1b2c3d4;
//         ^^^^^^^^^ constant.other.color.rgba-value.css

    color: #E5F6A7B8;
//         ^ punctuation.definition.constant.css
//         ^^^^^^^^^ constant.other.color.rgba-value.css
}

.test-function-meta {
    top: filter(param1, 20px);
//       ^^^^^^^^^^^^^^^^^^^^ meta.function-call.css
//             ^^^^^^^^^^^^^^ meta.group.css
}

.test-color-functions {
    top: rgb(1, 4.5%);
/*       ^^^ support.function.color.css */
/*           ^ constant.numeric.integer.decimal.css */
/*            ^ punctuation.separator.sequence.css */
/*              ^^^^ constant.numeric.float.decimal.css */

    top: rgba();
/*       ^^^^ support.function.color.css */

    top: hsl(1deg, 4.5%);
/*       ^^^ support.function.color.css */
/*           ^^^^ constant.numeric.integer.decimal.css */
/*               ^ punctuation.separator.sequence.css */
/*                 ^^^^ constant.numeric.float.decimal.css */

    top: hsla();
/*       ^^^^ support.function.color.css */

    top: hwb();
/*       ^^^ support.function.color.css */


    top: gray(1, 4.5%);
/*       ^^^^ support.function.color.css */
/*            ^ constant.numeric.integer.decimal.css */
/*             ^ punctuation.separator.sequence.css */
/*               ^^^^ constant.numeric.float.decimal.css */

    top: device-cmyk(0.5, 1%, red());
/*       ^^^^^^^^^^^ support.function.color.css */
/*                   ^^^ constant.numeric.float.decimal.css */
/*                      ^ punctuation.separator.sequence.css */
/*                        ^^ constant.numeric.integer.decimal.css */
/*                            ^^^ support.function.color.css */

    top: color(w() s());
/*       ^^^^^ support.function.color.css */
/*             ^ support.function.color.css */
/*                 ^ support.function.color.css */

    top: alpha(- 1.5%);
/*       ^^^^^ support.function.color.css */
/*             ^ keyword.operator.css */
/*               ^^^^ constant.numeric.float.decimal.css */

    top: h(+ 1.5deg);
/*       ^ support.function.color.css */
/*         ^ keyword.operator.css */
/*           ^^^^^^ constant.numeric.float.decimal.css */

    top: w(* 1.5%);
/*       ^ support.function.color.css */
/*         ^ keyword.operator.css */
/*           ^^^^ constant.numeric.float.decimal.css */

    top: shade(1.5%);
/*       ^^^^^ support.function.color.css */
/*             ^^^^ constant.numeric.float.decimal.css */

    top: blenda(red 50% hsl);
/*       ^^^^^^ support.function.color.css */
/*              ^^^ support.constant.color.w3c-standard-color-name.css */
/*                  ^^^ constant.numeric.integer.decimal.css */
/*                      ^^^ keyword.other.color-space.css */

    background-color: color(var(--background) blend(var(--foreground) 80%));
/*  ^^^^^^^^^^^^^^^^ support.type.property-name.css */
/*                  ^ punctuation.separator.key-value.css */
/*                    ^^^^^ support.function.color.css */
/*                         ^ punctuation.definition.group.begin.css */
/*                          ^^^ support.function.var.css */
/*                             ^ punctuation.definition.group.begin.css */
/*                              ^^^^^^^^^^^^ support.type.custom-property */
/*                                          ^ punctuation.definition.group.end.css */
/*                                            ^^^^^ support.function.color.css */
/*                                                 ^ punctuation.definition.group.begin.css */
/*                                                  ^^^ support.function.var.css */
/*                                                     ^ punctuation.definition.group.begin.css */
/*                                                      ^^^^^^^^^^^^ support.type.custom-property.css */
/*                                                                  ^ punctuation.definition.group.end.css */
/*                                                                    ^^^ constant.numeric.integer.decimal.css */
/*                                                                       ^^ punctuation.definition.group.end.css */
/*                                                                         ^ punctuation.terminator.rule.css */
}

.test-transform-functions {
    top: rotate(0);
/*       ^^^^^^ support.function.transform.css */
/*              ^ constant.numeric.integer.decimal.css */

    top: rotate(1)
/*       ^^^^^^ support.function.transform.css */
/*              ^ - constant.numeric.integer.decimal.css */

    top: rotate3d(-1, 2deg);
/*       ^^^^^^^^ support.function.transform.css */
/*                ^^ constant.numeric.integer.decimal.css */
/*                    ^^^^ constant.numeric.integer.decimal.css */

    top: matrix3d(1, 0);
/*       ^^^^^^^^ support.function.transform.css */
/*                ^ constant.numeric.integer.decimal.css */
/*                 ^ punctuation.separator.sequence.css */
/*                   ^ constant.numeric.integer.decimal.css */

    top: translate3d(1, 2px, 3%);
/*       ^^^^^^^^^^^ support.function.transform.css */
/*                   ^ constant.numeric.integer.decimal.css */
/*                    ^ punctuation.separator.sequence.css */
/*                      ^^^ constant.numeric.integer.decimal.css */
/*                           ^^ constant.numeric.integer.decimal.css */

    top: translateY(2px);
/*       ^^^^^^^^^^ support.function.transform.css */
/*                  ^^^ constant.numeric.integer.decimal.css */

    top: translateX(1%);
/*       ^^^^^^^^^^ support.function.transform */
/*                  ^^ constant.numeric.integer.decimal.css */

    top: translateZ(0);
/*       ^^^^^^^^^^ support.function.transform */
/*                  ^ constant.numeric.integer.decimal.css */

    top: skewY(1deg);
/*       ^^^^^ support.function.transform.css */
/*             ^^^^ constant.numeric.integer.decimal.css */

    top: skew(1deg, 2turn);
/*       ^^^^ support.function.transform.css */
/*            ^^^^ constant.numeric.integer.decimal.css */
/*                ^ punctuation.separator.sequence.css */
/*                  ^^^^^ constant.numeric.integer.decimal.css */

    top: perspective(17px);
/*       ^^^^^^^^^^^ support.function.transform.css */
/*                   ^^^^ constant.numeric.integer.decimal.css */

    top: scaleY(2);
/*       ^^^^^^ support.function.transform.css */
/*              ^ constant.numeric.integer.decimal.css */

    top: skewY(1rad) rotate(1turn);
/*                   ^^^^^^ support.function.transform.css */
/*                          ^^^^^ constant.numeric.integer.decimal.css */

    transform: translate(var(--center), 0) scale(var(--ripple-scale), 1);
/*             ^^^^^^^^^ support.function.transform */
/*                       ^^^ support.function.var */
/*                           ^^^^^^^^ support.type.custom-property */
/*                                      ^ constant.numeric */
/*                                               ^^^ support.function.var */
}

.test-timing-functions {
    top: cubic-bezier(0.42, 0, 0.58, 1);
/*       ^^^^^^^^^^^^ support.function.timing.css */
/*                    ^^^^ constant.numeric.float.decimal.css */

    top: steps(020, start);
/*       ^^^^^ support.function.timing.css */
/*             ^^^ constant.numeric.integer.decimal.css */
/*                  ^^^^^ support.keyword.timing-direction.css */

    top: steps(1, end);
/*                ^^^ support.keyword.timing-direction.css */

    top: steps(1, middle);
/*                ^^^^^^ support.keyword.timing-direction.css */
}

.test-shape-functions {
    top: circle(at top 5.5e20em);
/*       ^^^^^^ support.function.shape.css */
/*              ^^ keyword.other.css */
/*                 ^^^ support.constant.property-value.css */
/*                     ^^^^^^^^ constant.numeric.float.decimal.css */

    top: ellipse(at 0%);
/*       ^^^^^^^ support.function.shape.css */
/*               ^^ keyword.other.css */
/*                  ^^ constant.numeric.integer.decimal.css */

    top: ellipse(closest-side);
/*               ^^^^^^^^^^^^ support.constant.property-value.css */

    top: inset(1.1px round 50%);
/*       ^^^^^ support.function.shape.css */
/*             ^^^^^ constant.numeric.float.decimal.css */
/*                   ^^^^^ keyword.other.css */

    top: rect(auto);
/*       ^^^^ support.function.shape.css */
/*            ^^^^ support.constant.property-value.css */

    top: rect(1px);
/*            ^^^ constant.numeric.integer.decimal.css */
}

.test-calc-function {
    top: calc(1.1px + 2rad);
/*       ^^^^ support.function.calc.css */
/*            ^^^^^ constant.numeric.float.decimal.css */
/*                    ^^^^ constant.numeric.integer.decimal.css */

    top: calc(attr(start, 1) - 1);
    /*        ^^^^ support.function.attr.css */

    top: calc(calc() * calc());
/*       ^^^^ support.function.calc.css */
/*            ^^^^ support.function.calc.css */
/*                   ^ keyword.operator.css */
/*                     ^^^^ support.function.calc.css */
    top: calc(100% - (1 * 10px) / 1 - (1 * 10px) / 1 - (1 * 10px) / 1);
/*       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.css */
/*       ^^^^ support.function.calc.css */
/*           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css */
/*           ^ punctuation.definition.group.begin.css */
/*            ^^^ constant.numeric.integer.decimal.css */
/*                 ^ keyword.operator.css */
/*                   ^ punctuation.definition.group.begin.css */
/*                   ^^^^^^^^^^ meta.group.css meta.group.css */
/*                            ^ punctuation.definition.group.end.css */
/*                              ^ keyword.operator.css */
/*                                    ^ punctuation.definition.group.begin.css */
/*                                         ^^ constant.numeric.integer.decimal.css */
/*                                           ^^ keyword.other.unit.css */
/*                                             ^ punctuation.definition.group.end.css */
/*                                               ^ keyword.operator.css */
/*                                                   ^ keyword.operator.css */
/*                                                     ^ punctuation.definition.group.begin.css */
/*                                                      ^ constant.numeric.integer.decimal.css */
/*                                                        ^ keyword.operator.css */
/*                                                          ^^ constant.numeric.integer.decimal.css */
/*                                                              ^ punctuation.definition.group.end.css */
/*                                                                ^ keyword.operator.css */
/*                                                                  ^ constant.numeric.integer.decimal.css */
/*                                                                   ^ punctuation.definition.group.end.css */
/*                                                                    ^ punctuation.terminator.rule.css - meta.group */
}

.test-toggle-function {
    top: toggle(5px red preserve-3d);
/*       ^^^^^^ support.function.toggle.css */
/*              ^^^ constant.numeric.integer.decimal.css */
/*                  ^^^ support.constant.color.w3c-standard-color-name.css */
/*                      ^^^^^^^^^^^ support.constant.property-value.css */
}

.test-attr-function {
    top: attr(*|c);
/*       ^^^^ support.function.attr.css */
/*            ^ entity.name.namespace.wildcard.css */
/*             ^ punctuation.separator.namespace.css */
/*              ^ entity.other.attribute-name.css */

    top: attr(n|size);
/*            ^ entity.other.namespace-prefix.css */
/*              ^^^^ entity.other.attribute-name.css */

    top: attr(size px, auto);
/*            ^^^^ entity.other.attribute-name.css */
/*                 ^^ keyword.other.unit.css */
/*                   ^ punctuation.separator.sequence.css */
/*                     ^^^^ support.constant.property-value.css */

    top: attr(preserve-3d);
/*            ^^^^^^^^^^^ entity.other.attribute-name.css */
}

.test-url-function {
    top: url("a");
/*       ^^^ support.function.url.css */
/*           ^^^ string.quoted.double.css */

    top: url(a);
/*           ^ string.unquoted.css */
}

.test-image-functions {
    top: image("a");
/*       ^^^^^ support.function.image.css */
/*             ^^^ string.quoted.double.css */

    top: image(a);
/*             ^ string.unquoted.css */

    top: image("a", rgb(0, 0, 0));
/*                ^ punctuation.separator.sequence.css */
/*                      ^ constant.numeric.integer.decimal.css */

    top: image-set("a" 1x, a 4dpi);
/*                 ^^^ string.quoted.double.css */
/*                     ^^ constant.numeric.integer.decimal.css */
/*                      ^ keyword.other.unit.css */
/*                       ^ punctuation.separator.sequence.css */
/*                         ^ string.unquoted.css */
/*                           ^^^^ constant.numeric.integer.decimal.css */

    top: cross-fade(50% "a", b);
/*       ^^^^^^^^^^ support.function.image.css */
/*                  ^^^ constant.numeric.integer.decimal.css */
/*                      ^^^ string.quoted.double.css */
/*                         ^ punctuation.separator.sequence.css */
/*                           ^ string.unquoted.css */
}

.test-gradient-functions {
    top: linear-gradient();
/*       ^^^^^^^^^^^^^^^ support.function.gradient.css */

    top: linear-gradient(45deg, white);
/*                       ^^^^^ constant.numeric.integer.decimal.css */
/*                            ^ punctuation.separator.sequence.css */
/*                              ^^^^^ support.constant.color.w3c-standard-color-name.css */

    top: linear-gradient(to top left);
/*                       ^^ keyword.other.css */
/*                          ^^^ support.constant.property-value.css */
/*                              ^^^^ support.constant.property-value.css */

    top: linear-gradient(0%, 100%);
/*                       ^^ constant.numeric.integer.decimal.css */
/*                           ^^^^ constant.numeric.integer.decimal.css */

    top: repeating-linear-gradient();
/*       ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css */

    top: radial-gradient();
/*       ^^^^^^^^^^^^^^^ support.function.gradient.css */

    top: radial-gradient(circle at top left);
/*                       ^^^^^^ keyword.other.css */
/*                              ^^ keyword.other.css */
/*                                 ^^^ support.constant.property-value.css */
/*                                     ^^^^ support.constant.property-value.css */

    top: radial-gradient(red, blue);
/*                       ^^^ support.constant.color.w3c-standard-color-name.css */
/*                          ^ punctuation.separator.sequence.css */

    top: repeating-radial-gradient();
/*       ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css */
}

.test-counter-functions {
    top: counter(name, decimal-leading-zero);
/*       ^^^^^^^ support.function.counter.css */
/*               ^^^^ entity.other.counter-name.css string.unquoted.css */
/*                   ^ punctuation.separator.sequence.css */
/*                     ^^^^^^^^^^^^^^^^^^^^ support.constant.property-value.counter-style.css */

    top: counters(name, "str", none);
/*       ^^^^^^^^ support.function.counter.css */
/*                ^^^^ entity.other.counter-name.css string.unquoted.css */
/*                    ^ punctuation.separator.sequence.css */
/*                      ^^^^^ string.quoted.double.css */
/*                           ^ punctuation.separator.sequence.css */
/*                             ^^^^ support.constant.property-value.counter-style.css */

    top: symbols(fixed "\2020" url());
/*       ^^^^^^^ support.function.counter.css */
/*               ^^^^^ support.constant.symbol-type.css */
/*                     ^^^^^^^ string.quoted.double.css */
/*                             ^^^ support.function.url.css */
}

.test-grid-functions {
    grid: repeat(20) / auto-flow 1fr;
/*        ^^^^^^ support.function.grid.css */
/*               ^^ constant.numeric.integer.decimal.css */
/*                     ^^^^^^^^^ support.constant.property-value.css */

    top: repeat(auto-fit, 2fr minmax(auto) 5%);
/*              ^^^^^^^^ support.keyword.repetitions.css */
/*                      ^ punctuation.separator.sequence.css */
/*                        ^^^ constant.numeric.integer.decimal.css */
/*                            ^^^^^^ support.function.grid.css */
/*                                   ^^^^ support.constant.property-value.css */
/*                                         ^^ constant.numeric.integer.decimal.css */

    top: minmax(min-content, 1fr, 10%);
/*       ^^^^^^ support.function.grid.css */
/*              ^^^^^^^^^^^ support.constant.property-value.css */
/*                         ^ punctuation.separator.sequence.css */
/*                           ^^^ constant.numeric.integer.decimal.css */
/*                                ^^^ constant.numeric.integer.decimal.css */
    grid-template: repeat(2, var(--size)) / repeat(2, 50%);
/*                           ^^^ support.function.var.css */
/*                               ^^^^^^ support.type.custom-property.css */
/*                                     ^^ punctuation.definition.group.end.css */
/*                                          ^^^^^^ support.function.grid.css */
    grid-template-columns:
      [a-line-name] auto
/*    ^ punctuation.section.begin.css */
/*     ^^^^^^^^^^^ string.unquoted.line-name.css */
/*                ^ punctuation.section.end.css */
      [b]     minmax(min-content, 1fr)
      [b c d] repeat(2, [e] 40px)
/*    ^ punctuation.section.begin.css */
/*     ^ string.unquoted.line-name.css */
/*      ^ - string.unquoted.line-name.css */
/*       ^ string.unquoted.line-name.css */
/*          ^ punctuation.section.end.css */
/*                      ^ punctuation.section.begin.css */
/*                       ^ string.unquoted.line-name.css */
/*                        ^ punctuation.section.end.css */
              repeat(5, auto);
}

.test-filter-functions {
    top: filter(url(), blur());
/*       ^^^^^^ support.function.filter.css */
/*              ^^^ support.function.url.css */
/*                     ^^^^ support.function.filter.css */

    top: blur(1px);
/*       ^^^^ support.function.filter.css */

    top: sepia(1% 1);
/*       ^^^^^ support.function.filter.css */
/*             ^^ constant.numeric.integer.decimal.css */
/*                ^ constant.numeric.integer.decimal.css */

    top: drop-shadow(1px rgb());
/*       ^^^^^^^^^^^ support.function.filter.css */
/*                   ^^^ constant.numeric.integer.decimal.css */
/*                       ^^^ support.function.color.css */

    top: hue-rotate(1turn);
/*       ^^^^^^^^^^ support.function.filter.css */
/*                  ^^^^^ constant.numeric.integer.decimal.css */
}


// Test Font Functions: format() & local()
@font-face {
  src: format("embedded-opentype");
//     ^^^^^^                     support.function.font-face.css
//            ^^^^^^^^^^^^^^^^^^^ string.quoted.double.css

  src: local(Gentium-Bold);
//     ^^^^^              support.function.font-face.css
//           ^^^^^^^^^^^^ string.unquoted.css

   src: local('Gentium-Bold');
/*     ^^^^^              support.function.font-face.css          */
/*           ^^^^^^^^^^^^^^ string.quoted.single.css              */
/*           ^ punctuation.definition.string.begin.css            */
/*                        ^ punctuation.definition.string.end.css */

   src: local("Gentium-Bold");
/*     ^^^^^              support.function.font-face.css          */
/*           ^^^^^^^^^^^^^^ string.quoted.double.css              */
/*           ^ punctuation.definition.string.begin.css            */
/*                        ^ punctuation.definition.string.end.css */
}

@font-face {
    font-family: m700, aria;
//               ^^^^ string.unquoted.css
//                     ^^^^ string.unquoted.css
}

.test-var-function {
    top: var(--name);
//       ^^^         support.function.var.css
//           ^^      punctuation.definition.custom-property.css
//             ^^^^  support.type.custom-property.name.css
}

.test-custom-tags > div > span + cust·m-tÀg > div-cøstom-tag ~ form-Çust😀m-tag.classname:last-child:hover {}
//                ^ -entity.name.tag.custom.css
//                  ^^^ entity.name.tag.css
//                        ^^^^ entity.name.tag.css
//                             ^ -entity.name.tag.custom.css
//                               ^^^^^^^^^^ entity.name.tag.custom.css
//                                            ^^^^^^^^^^^^^^ entity.name.tag.custom.css
//                                                           ^ -entity.name.tag.custom.css
//                                                             ^^^^^^^^^^^^^^^ entity.name.tag.custom.css
//                                                                             ^^^^^^^^^ entity.other.attribute-name.class.css
//                                                                                       ^^^^^^^^^^ -entity.name.tag.custom.css
//                                                                                                  ^^^^^ -entity.name.tag.custom.css

.test-property-name-order-doesnt-prevent-full-matches {
    grid-template-rows: none;
//  ^^^^^^^^^^^^^^^^^^ support.type.property-name
//                    ^ punctuation.separator.key-value
    grid-template-columns: none;
//  ^^^^^^^^^^^^^^^^^^^^^ support.type.property-name
//                       ^ punctuation.separator.key-value
    grid-template-areas: auto;
//  ^^^^^^^^^^^^^^^^^^^ support.type.property-name
//                     ^ punctuation.separator.key-value
    grid-template: initial;
//  ^^^^^^^^^^^^^ support.type.property-name
//               ^ punctuation.separator.key-value
    grid-row-gap: 3vmin;
//  ^^^^^^^^^^^^ support.type.property-name
//              ^ punctuation.separator.key-value
    grid-row: auto;
//  ^^^^^^^^ support.type.property-name
//          ^ punctuation.separator.key-value
}

.test-meta-scopes-for-completions {
    top: 5px;
//  ^^^ meta.property-name
//      ^^^^ meta.property-value
    top: ;
//  ^^^ meta.property-name
//      ^ meta.property-value
    top: 0
//  ^^^ meta.property-name
}/*     ^ meta.property-value */

.generic-font-family { font-family: my-serif, serif }
//                                  ^^^^^^^^ string.unquoted
//                                          ^ - string
//                                            ^^^^^ support.constant.font-name
.generic-font-family2 { font-family: sans-serif , fantasy , system-ui; }
//                                   ^^^^^^^^^^ support.constant.font-name
//                                                ^^^^^^^ support.constant.font-name
//                                                          ^^^^^^^^^ support.constant.font-name
.generic-font-family3 {
    font-family: cursive
//               ^^^^^^^ support.constant.font-name
}
.generic-font-family4 {
    font-family: droid serif;
//               ^^^^^^^^^^^ string.unquoted
}

.variable-beginnings {
    --1x: url(data:image/png;base64,PNG);
//  ^^^^ support.type.custom-property
//  ^^ punctuation.definition.custom-property
//    ^^ support.type.custom-property.name
//      ^ punctuation.separator.key-value
    background-image: var(--1x);
//                        ^^^^ support.type.custom-property
//                        ^^ punctuation.definition.custom-property
//                          ^^ support.type.custom-property.name
    --\ff: 5px;
//  ^^^^^ support.type.custom-property
//  ^^ punctuation.definition.custom-property
//    ^^^ support.type.custom-property.name
//       ^ punctuation.separator.key-value
}
