// SYNTAX TEST "Packages/Syntax-Highlighting-for-Sass/Syntaxes/SCSS.sublime-syntax"

/*
  block comment
*/

/*
  block comment contains #{ $variable }
*/

/*
  block comment contains #{ function($variable) + "escap\e" + -.5em }
*/

// line comment

// line comment contains #{ $variable }

// line comment contains #{ function($variable) + "escap\e" + -.5em }


// id selectors
#id {}

#id-#{$variable}-selector {}

#id-#{$variable}-#{$variable} {}

#id-#{$variable}-selector,
#another-id-selector {}

#id-#{$variable}-selector, #another-id-selector {}

#id:hover::before {}

#id:not(body)::before {} // body should be highlighted as type selector not value

#id:not(body):not(#id):not(.class):not(:first-child) {}

#id:not(#{$variable})::before {}


.class {}

.class-#{$variable}-selector {}

.class-#{$variable}-#{$variable} {}

.class-#{$variable}-selector,
.another-class-selector {}

.class-#{$variable}-selector, .another-class-selector {}

.class:haver::before {}

.class:not(body)::before {}

.class:not(body):not(#id):not(.class):not(:first-child) {}

.class:not(#{$variable})::before {}


#id.class:nth-of-type(2n) {}

.class#id:nth-child(2n-1) {}
.class#id:nth-child(2n+1) {}
.class#id:nth-child(2n - 1) {}


#id .class,
#id > .class,
#id ~ .class,
#id + .class {}


*,
*::before,
*::after {}


#{$variable}::before {}

##{$variable}-selector::before {}

.#{$variable}-selector::before {}


[attr] {}
a[title] {} // title should be highlighted as attribution, not type selector
a[href=""] {}
a[href=ab-_a123c] {}
a[href*=""] {}
a[href^=""] {}
a[href$=""] {}
a[data-*=""] {}
a[data~=""] {}
a[data|=""] {}


%placeholder {}

@extend %placeholder-a1o_321;

%#{$variable}-placeholder {} // Interpoluation in placeholder selector


::-webkit-selection {}
::selection {}


.block {
  &.class {}
  &::before {}

  &__element {}
  &--modifier {}
  &__element--#{$modifier} {}

  &#{$variable} {}

  &:not(&-#{$variable}) {}
}


:root {
  --css-variable_123: 20px;
}

body {
  padding: var(--css-variable_123);
  proprety-#{$variable}: value;
  #{$var}-proprety: value;
  proprety-#{$var}-proprety: value;
}


$variable: 123px;
$variable123: #fff;
$va1ri2ab3le-321a: #ABCDEF !default;
$_va1ri_2ab3le_321a: inline !important;
$variable: function($variable);

$map: (
  body: (
    width-1: 200px * $variable #{$variable} 'stirng',
    height: (
      "key": 200px * $variable #{$variable} 'stirng' function(),
      key: (
        "key": 200px * $variable #{$variable} 'stirng' function()
      )
    )
  )
);


$map: (
  key-1: #000,
  key-2: (
    key-3: 123px
  )
);

body {
  content: "double quoted string";
  content: 'single quoted string';
  content: "broken double quoted string will not be highlighted;
  content: 'broken single quoted string will not be highlighted;
  content: "double quoted string contains \escape";
  content: 'single quoted string contains \escape';
  content: "double quoted string contains #{ $variable }";
  content: 'single quoted string contains #{ $variable }';
  content: "double quoted string contains #{ function($variable) + -.5em }";
  content: 'single quoted string contains #{ function($variable) + -.5em }';
}

body {
  width: 123px;
  width: .123px;
  width: -321.123px;
  width: -.123px;
  width: -#{$number}px;
  width: -$variable;
  width: -($variable * 2);
  width: 20px+20px;
  width: auto;

  background: url(../../assets/image.pn
  background: url(../../assets/image.png);

  content: attr(data-att
  content: attr(data-attr);
}


a {
  text-align: center; display: block; line-height: 1.5; background: red;
}


@mixin mixin() {}
@mixin mixin-123_1eaf2u () {}

@function function($a, $b, $c...) {}

@include mixin() {}
@include mixin-123_1eaf2u {}

@else if {}
@if not {}
@if $a or $b {}

@media only screen and (max-width: 100px) and (min-width: 50px) {}

@media print {}


// TODO

body {
  background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
}

body::before {
  content '
multiple line string
';
}

#fff {
  box-shadow: 0 0 0 #fff,
    0 0 0 #fff,
    0 0 0 #fff;
}