@import "Includes\Palette";     // Loads all the styles in the Palette.style file
                               // path is relative to this file
Style1                = value;
Style2                = "value string with spaces";
"Style Name"        : Style1;
Style3                : Style1, Style2;

Style4 {
   property1 : value;
   property2 {
       subProperty : value;
   };
}

Style5 {
   .base        : Style1, Style2;
   property1 : value;
   .children {
       ChildName : Style2;
       *hello {
           property2 : value;
       }
       * : [
           @contains-name : text1,text2;
           @exclude-name : text3;
           @include-cmp : Button,Text;
           @exclude-cmp : MyScript
       ] Style2;
   };
}

Color.Primary          : #03A9F4; // RGB or RGBA value
Color.Primary.Light    : blue;    // Using the Standard HTML color names
                                 // https://www.w3schools.com/colors/colors_names.asp

Font.Light             : Arial;   // When applied to a Text component, Arial is resolved to the font file

"Company Name"         : "Inter Illusion";

EnemyProbability       : 0.3;

Color.Button.Primary    : Color.Primary;      // Color.Button.Primary is the same as Color.Primary
                                             // resolves to #03A9F4
                                               
Button.Primary          : Button, Text.Title; // Using Button.Primary is the same as applying
                                             // both 'Button' and 'Text.Title' styles

Text: {
   font: Font.Regular;     // Style finds the 'font' property and applies the value from Font.Regular
   fontSize: 16;           // 'fontSize' is changed to 16
   customVariable : "hey"  // if your script has a customVariable (property or field) it is changed to "hey"
}

Opacity.Text.Important  { color.a :  0.87 }     // the color property is changed so that
                                               // the alpha is 0.87 while keeping the RGB

Text: {
   font                : Arial;
   fontSize        : 16;
}
Text.Header1: {
   .base: Text;                    // Text.Header1 first applies the Style 'Text'
   font                : Font.Light;
   fontSize        : 96;
}
Button : {
   color : blue;
}
Button.Secondary: {
   .base: Button, Text.Header1;    // Inheritance can apply multiple Styles
   color.a : 0.8
}

Button: {
   .children: {
       Text: Text.Button       // Finds child named 'Text" and applies the style Text.Button
   }
}
Button.Primary: {
   .children: {
       *: { color: Color.Text.OnPrimary }  // If any of the children has a color property
                                           // its changed to the primary text color
                                                   
       Image: { color: #FFFFFF }               // only the child named 'Image' gets white color
       *Border: { active: false }          // Any child whose name has 'Border' gets deactivated
                                           // (e.g. "ImageBorder", "Border_Main", etc)
   }
}

Button.Primary2: {
   .children {
       *: [                            // Applies Text.Primary to any child matching the rules:
           @contain-name: second,text; // - The child name has any of the words "second" or "text"
           @exclude-name: main;        // - The name doesn't have "main"
           @include-cmp: Button,Text;  // - The child has to have either a Button or a Text component
           @exclude-cmp: Mask;         // - Can't have the Mask component
           @recursive;                 // Not only check the children, but also the grandchildren
       ] Text.Primary;
   }
}