/**
* 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;
}
}