// Colors
$ColorDot                   = #7391c080;
$ColorAccent                = #5f8bc4;
$ColorHighlight             = #5f8bc4;
$ColorBackground            = #d4d4d4;
$ColorForeground            = #000;
$ColorOutline               = $ColorForeground;
$ColorGutter                = #bfc6d1;
$ColorGutterHovered         = #c5cbd6;
$ColorRaised                = #e9eaea;
$ColorRaisedPressed         = #ccd4dd;
$ColorRaisedFocused         = #cfd6dd;
$ColorRaisedHovered         = #f1f3f5;
$ColorSunken                = #e9eaea;
$ColorSunkenFocused         = #e0e6ee;
$ColorSunkenPressed         = #e0e6ee;
$ColorCalendarWeekdayHeader = #d3cac2;
$ColorCalendarWeekend       = #c2d3c4;
$ColorCalendarDay           = #d6dae2;

// Borders
$BorderOutline        = $ColorOutline                  ;
$BorderEngraved       = #c3c3c5 #e3e3e3 #e9e9e9 #c2c2c2;
$BorderGap            = #697c7c #566767 #566767 #697c7c;
$BorderLifted         = #f9fafc #c2c8d3 #a4afc0 #f5f6f8;
$BorderLiftedFocused  = #f0f4f9 #b1baca #9aa6b7 #e4e9ee;
$BorderFocused        = #5f8bc4 #5f8bc4 #5f8bc4 #5f8bc4;
$BorderTear           = $BorderEngraved                ;
$BorderTearFocused    = #7f94b5 #ced7e4 #ced7e4 #7f94b5;
$BorderTearPad        = #0000                          ;
$BorderTearPadFocused = #7391c080                      ;
$BorderInnerShadow    = #a4afc0                        ;
$BorderOuterShadow    = #a4afc0                        ;

*.* {
	TextColor: $ColorForeground;
	DotColor:  $ColorDot;
	Gap:       8;
}

*.Button {
	Border:  $BorderEngraved / 1, $BorderGap / 1, $BorderLifted / 1;
	Padding: 4 8;
	Color:   $ColorRaised;
}

*.Button[focused] {
	Border:  $BorderEngraved / 1, $BorderGap / 1, $BorderLiftedFocused / 1;
	Padding: 4 8;
	Color:   $ColorRaisedFocused;
}

*.Button[hovered] {
	Color: $ColorRaisedHovered;
}

*.Button[pressed] {
	Border:  $BorderEngraved / 1, $BorderGap / 1, $BorderInnerShadow / 1 0 0 1;
	Padding: 5 8 4 9;
	Color:   $ColorRaisedPressed;
}

*.TextInput {
	Border:  $BorderEngraved / 1, $BorderGap / 1, $BorderInnerShadow / 1 0 0 1;
	Padding: 5 4 4 5;
	Color:   $ColorSunken;
}

*.TextInput[focused] {
	Border: $BorderEngraved / 1, $BorderFocused / 1, $BorderInnerShadow / 1 0 0 1;
}

*.TextView {
	Border:  $BorderEngraved / 1, $BorderGap / 1, $BorderInnerShadow / 1 0 0 1;
	Padding: 5 4 4 5;
	Color:   $ColorSunken;
}

*.NumberInput {
	Gap: 0;
}

*.Container[sunken] {
	Border:  $BorderEngraved / 1, $BorderGap / 1, $BorderInnerShadow / 1 0 0 1;
	Padding: 5 4 4 5;
	Color:   $ColorSunken;
}

*.Container[outer] {
	Color:   $ColorBackground;
	Padding: 8;
}

*.Container[menu] {
	Border: $BorderGap / 1, $BorderLifted / 1;
	Color:  $ColorBackground;
	Gap:    0;
}

*.Container[menu, torn] {
	Border: ;
	Color:  $ColorBackground;
	Gap:    0;
}

*.Heading {
	Align: middle middle;
}

*.Heading[menu] {
	Align:   middle middle;
	Padding: 4 8;
}

*.Separator {
	Border: $BorderEngraved / 1;
}

*.Slider {
	Border: $BorderEngraved / 1, $BorderGap / 1, $BorderInnerShadow / 1 0 0 1;
	Color:  $ColorGutter;
}

*.Slider[focused] {
	Border: $BorderEngraved / 1, $BorderFocused / 1, $BorderInnerShadow / 1 0 0 1;
}

*.Slider[hovered] {
	Color: $ColorGutterHovered;
}

*.Slider[horizontal] {
	MinimumSize: 48 0;
}

*.Slider[vertical] {
	MinimumSize: 0 48;
}

*.SliderHandle {
	Border:      $BorderOuterShadow / 0 1 1 0, $BorderGap / 1, $BorderLifted / 1;
	Color:       $ColorRaised;
	MinimumSize: 12;
}

*.Scrollbar {
	Border: $BorderEngraved / 1, $BorderGap / 1, $BorderInnerShadow / 1 0 0 1;
	Color:  $ColorGutter;
}

*.Scrollbar[focused] {
	Border: $BorderEngraved / 1, $BorderFocused / 1, $BorderInnerShadow / 1 0 0 1;
}

*.Scrollbar[hovered] {
	Color: $ColorGutterHovered;
}

*.Scrollbar[horizontal] {
	MinimumSize: 48 0;
}

*.Scrollbar[vertical] {
	MinimumSize: 0 48;
}

*.ScrollbarHandle {
	Border:      $BorderOuterShadow / 0 1 1 0, $BorderGap / 1, $BorderLifted / 1;
	Color:       $ColorRaised;
	MinimumSize: 12;
}

*.ScrollContainer {
	Gap: 0;
}

*.Checkbox {
	Border:      $BorderEngraved / 1, $BorderGap / 1, $BorderInnerShadow / 1 0 0 1;
	Color:       $ColorSunken;
	Padding:     0 1 1 0;
	MinimumSize: 19;
}

*.Checkbox[focused] {
	Border:  $BorderEngraved / 1, $BorderFocused / 1, $BorderInnerShadow / 1 0 0 1;
	Color:   $ColorSunkenFocused;
	Padding: 0;
}

*.Checkbox[checked] {
	Texture:     "assets/checkbox-checked.png";
	TextureMode: center;
}

*.MenuItem {
	Padding: 4;
	Gap:     4;
	Color:   #0000;
}

*.MenuItem[focused] {
	Color: $ColorDot;
}

*.File {
	Color: #0000;
}

*.File[focused] {
	Color: $ColorDot;
}

*.TearLine {
	Border: $BorderTearPad / 3, $BorderTear / 1;
}

*.TearLine[focused] {
	Border: $BorderTearPadFocused / 3, $BorderTearFocused / 1;
}

*.Calendar {
	Border:  $BorderOuterShadow / 0 1 1 0, $BorderGap / 1;
	Color:   $ColorRaised;
	Padding: 2;
	Gap:     2;
}

*.CalendarGrid {
	Gap: 2 2;
}

*.CalendarWeekdayHeader {
	Color:   $ColorCalendarWeekdayHeader;
	Padding: 2;
}

*.CalendarDay {
	Color:       $ColorCalendarDay;
	Padding:     2;
	MinimumSize: 32;
}

*.CalendarDay[weekend] {
	Color: $ColorCalendarWeekend;
}

*.TabbedContainer {
	Gap: 0;
}

*.TabRow {
	Border:  $BorderEngraved / 1 1 0 1, $BorderGap / 1 1 0 1, $BorderInnerShadow / 1 0 0 1;
	Color:   $ColorSunken;
	Gap:     0;
	Padding: 1 0 0 0;
}

*.Tab {
	Border:  #0000 / 1 0 0 0, $BorderOuterShadow / 0 1 0 0, $BorderGap / 1 1 0 1, $BorderLifted / 1;
	Color:   $ColorSunken;
	Padding: 4 8 2 8;
}

*.Tab[active] {
	Border:  $BorderOuterShadow / 0 1 0 0, $BorderGap / 1 1 0 1, $BorderLifted / 1 1 0 1;
	Color:   $ColorBackground;
	Padding: 4 8;
}

*.TabSpacer {
	Border: $BorderLifted / 0 0 1 0;
	MinimumSize: 1 0;
}

*.Swatch {
	Border:      $BorderEngraved / 1, $BorderGap / 1;
	Color:       #FFF;
	MinimumSize: 19;
}

*.Swatch[focused] {
	Border: $BorderEngraved / 1, $BorderFocused / 1;
}

*.ColorPickerMap {
	Border:      $BorderEngraved / 1, $BorderGap / 1;
	Color:       $ColorSunken;
	MinimumSize: 128;
}

*.Dropdown {
	Border:  $BorderEngraved / 1, $BorderGap / 1, $BorderLifted / 1;
	Padding: 4 8;
	Color:   $ColorRaised;
}

*.Dropdown[focused] {
	Border:  $BorderEngraved / 1, $BorderGap / 1, $BorderLiftedFocused / 1;
	Padding: 4 8;
	Color:   $ColorRaisedFocused;
}

*.Dropdown[hovered] {
	Color: $ColorRaisedHovered;
}

*.Dropdown[pressed] {
	Border:  $BorderEngraved / 1, $BorderGap / 1, $BorderInnerShadow / 1 0 0 1;
	Padding: 5 8 4 9;
	Color:   $ColorRaisedPressed;
}