/**
 * Less syntax highlighting test file
 *
 * Based on the Less documentation ((c) 2017 Alexis Sellier, the Less Core Team, Contributors, The MIT License)
 *
 * @see http://lesscss.org/features/
 */

.mixin(@color; @padding; @margin: 2) {
  colorr: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

@my-ruleset: {
  .my-selector {
    background-color: black;
  }
};

@bacon: red;
@beacon: background-color;
@baecon: @{w} + @w;

.noStar:extend(.class #sh:extend(#hhh) ) {}
.noStar:nth-child(w: red) {}

@media (max-width: @width2) and handheld {
  height: auto;
}

.test when (@color = blue) .ffff {color: red;}

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;

  .x {
    x: @nn;
    a: white @{nn@{ww}};
    background: red;
  }
}

// Variables

@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

a, .link {
  color: @link-color;
}

a:hover {
  color: @link-color-hover;
}

.widget {
  color: #fff;
  background: @link-color;
}

// Variable interpolation

@my-selector: banner;

.@{my-selector} when (@s = calc("s"); @{s} = calc("dddd")) {
  font-weight: bold;
  line-height+: 40px;
  margin: 0 auto;
}

@images: "../img";

body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less";

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

// Variable names

@fnord:  "I am fnord.";
@var:    "fnord";

.variable-names-example {
  content: @@var;
}

// Lazy Evaluation

.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

// Default Variables

@base-color: green;
@dark-color: darken(@base-color, 10%);

@import "library.less";
@base-color: red;

// Extend

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

// Extend Syntax

.e:extend(.f) {}
.e:extend(.g) {}

.e:extend(.f, .g) {}

// Extend Attached to Selector

.big-division,
.big-bag:extend(.bag),
.big-bucket:extend(.bucket) {
}

// Extend Inside Ruleset

pre:hover,
.some-class {
  &:extend(div pre);
}

pre:hover:extend(div pre),
.some-class:extend(div pre) {}

// Extending Nested Selectors

.bucket {
  tr {
    color: blue;
  }
}
.some-class:extend(.bucket tr) {}

// Exact Matching with Extend

*.class {
  color: blue;
}
.noStar:extend(.class) {}

link:hover:visited {
  color: blue;
}
.selector:extend(link:visited:hover) {}

// nth Expression

:nth-child(1n+3) {
  color: blue;
}
.child:extend(:nth-child(n+3)) {}

[title=identifier] {
  color: blue;
}
[title='identifier'] {
  color: blue;
}
[title="identifier"] {
  color: blue;
}

.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}

// Extend "all"

.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}

.replacement:extend(.test all) {}

// Selector Interpolation with Extend

.bucket {
  color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;

// Scoping / Extend Inside @media

@media print {
  .screenClass:extend(.selector) {}
  .selector {
    color: black;
  }
}
.selector {
  color: red;
}
@media screen {
  .selector {
    color: blue;
  }
}

// Use Cases for Extend

.animal {
  background-color: black;
  color: white;
}
.bear {
  &:extend(.animal);
  background-color: brown;
}

.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}

// Mixins

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

// Not Outputting the Mixin

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

// Selectors in Mixins

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

// Namespaces

#outer {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner;
}

.d {
  #outer > .inner;
  #outer > .inner();
  #outer .inner;
  #outer .inner();
  #outer.inner;
  #outer.inner();
}

// Guarded Namespaces

#namespace when (@mode=huge) {
  .mixin() { /* */ }
}

#namespace {
  .mixin() when (@mode=huge) { /* */ }
}

#sp_1 when (default()) {
  #sp_2 when (default()) {
    .mixin() when not(default()) { /* */ }
  }
}

// The !important keyword

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color !important;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

// Parametric Mixins

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.wrap() {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

// Mixins with Multiple Parameters

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}

// Named parameters

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

// The @arguments Variable

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

// Advanced Arguments and the @rest Variable

.mixin(...) {}        // matches 0-N arguments
.mixin() {}           // matches exactly 0 arguments
.mixin(@a: 1) {}      // matches 0-1 arguments
.mixin(@a: 1; ...) {} // matches 0-N arguments
.mixin(@a; ...) {}    // matches 1-N arguments

.mixin(@a; @rest...) {
   // @rest is bound to arguments after @a
   // @arguments is bound to all arguments
}

// Pattern-matching

.mixin(@s; @color) { ... }

.class {
  .mixin(@switch; #888);
}

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

@switch: light;

.class {
  .mixin(@switch; #888);
}

// Mixins as Functions

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

// Passing Rulesets to Mixins

// declare detached ruleset
@detached-ruleset: { background: red; };

// use detached ruleset
.top {
    @detached-ruleset();
}

.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200px) { @rules(); }
  html.lt-ie9 &                         { @rules(); }
}

header {
  background-color: blue;

  .desktop-and-old-ie({
    background-color: red;
  });
}

@my-ruleset: {
  .my-selector {
    background-color: black;
  }
};

@my-ruleset: {
    .my-selector {
      @media tv {
        background-color: black;
      }
    }
  };
@media (orientation:portrait) {
    @my-ruleset();
}

// Scoping

@detached-ruleset: {
  caller-variable: @caller-variable; // variable is undefined here
  .caller-mixin(); // mixin is undefined here
};

selector {
  // use detached ruleset
  @detached-ruleset();

  // define variable and mixin needed inside the detached ruleset
  @caller-variable: value;
  .caller-mixin() {
    variable: declaration;
  }
}

/*
 * reference: use a Less file but do not output it
inline: include the source file in the output but do not process it
less: treat the file as a Less file, no matter what the file extension
css: treat the file as a CSS file, no matter what the file extension
once: only include the file once (this is default behavior)
multiple: include the file multiple times
optional: continue compiling when file is not found
 */

@import (optional, reference) "foo.less";

// Mixin Guards

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

// Guard Comparison Operators

.truth (@a) when (@a) { }
.truth (@a) when (@a = true) { }

// FIXME: @media as variable
@media: mobile;

.mixin (@a) when (@media = mobile) { }
.mixin (@a) when (@media = desktop) { }

.max (@a; @b) when (@a > @b) { width: @a }
.max (@a; @b) when (@a < @b) { width: @b }

// Guard Logical Operators

.mixin (@a) when (isnumber(@a)) and (@a > 0) {  }
.mixin (@a) when (@a > 10), (@a < -10) {  }
.mixin (@b) when not (@b > 0) { }

// Type Checking Functions

.mixin (@a; @b: 0) when (isnumber(@b)) { }
.mixin (@a; @b: black) when (iscolor(@b)) {}

button when (@my-option = true) {
  color: white;

  & when (@my-option = true) {
  button {
    color: white;
  }
  a {
    color: blue;
  }
}
}

// Loops

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

// Merge

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

// Space

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

// Parent Selectors

a {
  color: blue;
  &:hover {
    color: green;
  }
}

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

// Changing Selector Order

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}

// Combinatorial Explosion

p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}