///////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////
// MAIN HEADER
///////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////

//---------------------------------------------------------------------------------
-------------------------------------
// Main Background Bar
//---------------------------------------------------------------------------------
-------------------------------------

Stack#root::Bar#pMain::Bar#m_pHead
{
image: url("Header/header_bg_main.png");
fixed-left: 300;
fixed-right: 300;

smallWidth: 1200;
outer-margin-bottom: 2;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Resizing Labels
//---------------------------------------------------------------------------------
-------------------------------------

// Left
Stack#root Bar#pMain Bar#m_pHead Label#m_pFlexLeft
{
min-width: 4;
}

// Right
Stack#root Bar#pMain Bar#m_pHead Label#m_pFlexRight
{
min-width: 5;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Shared Elements
//---------------------------------------------------------------------------------
-------------------------------------

// Main Header Vertical Separator Line

Bar#m_pHead Label#pSeparator,
Bar#m_pHead Label#m_pControllerSeparatorMAS,
Bar#m_pHead Label#m_pControllerSeparatorKKS
{
image: url("Header/header_separator_main.png");
}
//---------------------------------------------------------------------------------
-------------------------------------
// Left Area
//---------------------------------------------------------------------------------
-------------------------------------

// Maschine Logo
Bar#m_pHead Button#m_pLogoMaschine
{
image: url("Header/header_logo_mas_big.png");
outer-margin-top: 5;
outer-margin-left: 10;
outer-margin-right: 23;
}

// SD Logo
Bar#m_pHead Label#m_pSDLogo
{
image: url("Header/header_logo_cp.png");
outer-margin-top: 7;
outer-margin-right: 15;
}

Bar#m_pHead Button#m_pLogoMaschine[size=small]
{
image: url("Header/header_logo_mas_small.png");
outer-margin-left: 10;
outer-margin-right: 10;
}

// Main Menu
Bar#m_pHead ButtonMenu#m_pOpenMenu
{
image: url("Header/header_btn_menu.png");
animations: 7;
foreground-color: no;

menu-offset-x: -9;
menu-offset-y: 3;
}

// Browser Button
Bar#m_pHead Button#m_pBrowserVisible
{
image:
url("Header/header_btn_browser_visible.png");
animations: 7;
foreground-color: no;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Transport Section
//---------------------------------------------------------------------------------
-------------------------------------

Bar#m_pHead Bar#m_pTransportBar
{
margin-top: 4;
}

// Rewind Button
Bar#m_pHead Bar#m_pTransportBar Button#m_pRewind
{
image: url("Header/header_btn_trans_rewind.png");
animations: 7;
}

// Play Button
Bar#m_pHead Bar#m_pTransportBar Button#m_pPlay
{
foreground-color: no;
image: url("Header/header_btn_trans_play.png");
animations: 7;
}

Bar#m_pHead Bar#m_pTransportBar Button#m_pPlay:!enabled

{
animation-index: 6;
}

// Loop
Bar#m_pHead Bar#m_pTransportBar Button#m_pLoop
{
foreground-color: no;
image: url("Header/header_btn_trans_loop.png");
animations: 7;
}

// Record
Bar#m_pHead Bar#m_pTransportBar Button#m_pRecord
{
foreground-color: no;
image: url("Header/header_btn_trans_record.png");
animations: 7;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Transport Mode Section
//---------------------------------------------------------------------------------
-------------------------------------

// Background
Bar#m_pHead Bar#m_pTransportModesBar
{
image: url("Header/header_bg_dark.png");
picture-includes-margin: true;
 fixed-left: 20;
fixed-right: 20;
margin-left: 2;
margin-right: 2;
outer-margin-top: 3;
outer-margin-left: 4;
}

// Separator Labels
Bar#m_pHead Bar#m_pTransportModesBar Label#pTransportModesSeparator
{
image: url("Header/header_separator_transmode.png");
picture-includes-margin: true;
outer-margin-right: 0;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Shared Properties
//---------------------------------------------------------------------------------
-------------------------------------

// Small Grey Parameter Name Labels

Bar#m_pHead Bar#m_pTransportModesBar Label
{
font-name: $fontPragmatica;
font-size: 9;
foreground-color: $colorWhite40;
margin-top: 4;
outer-margin-right: 7; // Main spacing
}

// Buttons
Bar#m_pHead Bar#m_pTransportModesBar::Button
{
foreground-color: no;
outer-margin-top: 8;
}

// Draggers
// Bar#m_pHead Bar#m_pTransportModesBar Dragger
Dragger.HeadDisplay
{
font-name: $fontPragmatica;
foreground-color: $colorWhite80;
font-size: 12;
vertical-alignment: center;
// margin-top: 5;
outer-margin-top: 1;
height: 26;
}
//=================================================================================
=====================================
// Transport Mode Elements Layout and Styling
//=================================================================================
=====================================

//---------------------------------------------------------------------------------
-------------------------------------
// Konnect Status Icon
//---------------------------------------------------------------------------------
-------------------------------------

Bar#m_pKonnectStatus
{
margin-top: 1;
margin-left: 4;
min-width: 30;
}

Bar#m_pKonnectStatus[enabled=false]
{
width: 28;
}

Bar#m_pKonnectStatus[enabled=true]
{
width: 41;
}

Bar#m_pKonnectStatus ButtonMenu#m_pStatusIcon
{
image: url("Header/HDR_BTN_Konnect.png");
animations: 7;
}

Bar#m_pKonnectStatus ButtonMenu#m_pStatusIcon:!selected:over,
Bar#m_pKonnectStatus ButtonMenu#m_pStatusIcon:selected:over,
Bar#m_pKonnectStatus ButtonMenu#m_pStatusIcon:selected:over:down
{
animation-index: 4;
}

Bar#m_pKonnectStatus ButtonMenu#m_pStatusIcon:selected
{
animation-index: 0;
}

Bar#m_pKonnectStatus ButtonMenu#m_pStatusIcon[state=running]
{
image: url("Header/HDR_BTN_KonnectRunning.png");
}

Bar#m_pKonnectStatus ButtonMenu#m_pStatusIcon[state=konnect_error]
{
image: url("Header/HDR_BTN_KonnectError.png");
}

Bar#m_pKonnectStatus ButtonMenu#m_pStatusIcon[state=module_error]
{
image: url("Header/HDR_BTN_KonnectError.png");
}

Bar#m_pKonnectStatus Button#m_pClientCount
{
height: 25;
width: 17;
image: no;
foreground-color: $colorWhite80;
horizontal-alignment: center;
font-size: 12;
font-name: $fontPragmatica;
margin-top: 1;
margin-right: 4;
}

Bar#m_pKonnectStatus Button#m_pClientCount[state=konnect_error],
Bar#m_pKonnectStatus Button#m_pClientCount[state=module_error]
{
foreground-color: $colorKonnectIconError;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Metronome Button
//---------------------------------------------------------------------------------
-------------------------------------

Bar#m_pHead Bar#m_pTransportModesBar Button#m_pMetronome

{
image: url("Header/header_btn_metronome.png");
animations: 7;
outer-margin-left: 5;
outer-margin-right: 5;
outer-margin-top: 7;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Tempo
//---------------------------------------------------------------------------------
-------------------------------------

Bar#m_pHead Bar#m_pTransportModesBar DraggerableValueEdit#m_pTempo

{
min-width: 39;
outer-margin-left: 6;
outer-margin-right: 3;
}

// Tempo Label in Slave Mode, Replaces Song Tempo Dragger

Bar#m_pHead Bar#m_pTransportModesBar Label#m_pSlaveTempoLabel
{
image: no;
font-name: $fontPragmatica;
font-size: 12;
width: 40;
margin-top: 1;
outer-margin-left: 7;
outer-margin-right: 2;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Swing
//---------------------------------------------------------------------------------
-------------------------------------

Bar#m_pHead Bar#m_pTransportModesBar DraggerableValueEdit#m_pSwing

{
width: 47;
outer-margin-right: 3;
outer-margin-left: 5;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Time Signature
//---------------------------------------------------------------------------------
-------------------------------------

// Time
Bar#m_pHead Bar#m_pTransportModesBar DraggerableValueEdit#m_pNumerator
{
outer-margin-left: 5;
}

Bar#m_pHead Bar#m_pTransportModesBar DraggerableValueEdit#m_pNumerator Dragger:!

enabled,
Bar#m_pHead Bar#m_pTransportModesBar DraggerableValueEdit#m_pDenominator Dragger:!
enabled
{
foreground-color: $colorWhite40;
}

Bar#m_pHead Bar#m_pTransportModesBar DraggerableValueEdit#m_pNumerator,

Bar#m_pHead Bar#m_pTransportModesBar DraggerableValueEdit#m_pDenominator
{
width: 16;
outer-margin-right: 2;
}

Bar#m_pHead Bar#m_pTransportModesBar Label#pTimeSigLabel

{
outer-margin-right: 5;
}

// Slash
Bar#m_pHead Bar#m_pTransportModesBar Label#m_pTimeSigSeparator
{
min-width: 5;
font-name: $fontPragmatica;
font-size: 12;
foreground-color: $colorWhite80;
margin-top: 0;
outer-margin-right: 0;
}

Bar#m_pHead Bar#m_pTransportModesBar Label#pTimeSigSeparator:!enabled

{
foreground-color: $colorWhite40;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Play Position
//---------------------------------------------------------------------------------
-------------------------------------

Bar#m_pHead Bar#m_pTransportModesBar Bar#pTransportDisplay

{
min-width: 87;
}

// Container for Play Position

Bar#m_pHead Bar#m_pTransportModesBar Bar#pTransportDisplay Label#pDraggerContainer
{
width: 50;
outer-margin-top: 1;
outer-margin-left: 7;
outer-margin-right: 0;
}

// Play Position Display

Bar#m_pHead Bar#m_pTransportModesBar Bar#pTransportDisplay Label#m_pLabel
{
width: 50;
height: 18;
 font-name: $fontPragmatica;
font-size: 12;
foreground-color: $colorWhite80;
horizontal-alignment: center;
margin-bottom: 4;
// outer-margin-bottom: 1;
}

// Play Position Dragger

Bar#m_pHead Bar#m_pTransportModesBar Bar#pTransportDisplay Dragger#m_pDragger,
Bar#m_pHead Bar#m_pTransportModesBar Bar#pTransportDisplay TextEdit#m_pTextEdit
{
width: 50;
height: 18;
}

// Transport Position Bar/Time

Bar#m_pHead Bar#m_pTransportModesBar Bar#pTransportDisplay Label#m_pTypeLabel
{
outer-margin-left: 2;
width: 30;
}

// Follow Button
Bar#m_pHead Bar#m_pTransportModesBar Button#m_pFollowPlayPosition
{
image: url("Header/header_btn_follow.png");
animations: 7;
outer-margin-left: 3;
outer-margin-right: 7;
}

// Grid
Bar#m_pHead Bar#m_pTransportModesBar Button#m_pPerformGrid
{
image: no;
font-name: $fontPragmatica;
font-size: 12;
foreground-color: $colorWhite80;
horizontal-alignment: center;
width: 38;
outer-margin-left: 7;
outer-margin-right: 3;
outer-margin-top: no;
margin-top: 1;
}

// Options Menu
Bar#m_pHead Bar#m_pTransportModesBar ButtonMenu#m_pOptionsMenu
{
image: url("Header/header_btn_options.png");
animations: 7;
foreground-color: no;
 outer-margin-top: 6;
outer-margin-left: 4;
outer-margin-right: 3;
}

//---------------------------------------------------------------------------------
-------------------------------------
// Right part
//---------------------------------------------------------------------------------
-------------------------------------

// KKS HW ICON
//---------------------------------------------------------------------------------
-------------------------------------

// Not Connected
Bar#m_pHead Bar#m_pRightBar Button#m_pControllerKKS
{
image: no;
width: 33;
// outer-margin-top: 3;
}

// S25
Bar#m_pHead Bar#m_pRightBar Button#m_pControllerKKS[ControllerModel=keyboard25]
{
image: url("Header/HDR_BTN_KB25_Icon.png");
animations: 7;
foreground-color: no;
}

// S49
Bar#m_pHead Bar#m_pRightBar Button#m_pControllerKKS[ControllerModel=keyboard49]
{
image: url("Header/HDR_BTN_KB49_Icon.png");
animations: 7;
foreground-color: no;
}

// S61
Bar#m_pHead Bar#m_pRightBar Button#m_pControllerKKS[ControllerModel=keyboard61]
{
image: url("Header/HDR_BTN_KB61_Icon.png");
animations: 7;
foreground-color: no;
}

// Maschine HW Icon
//---------------------------------------------------------------------------------
-------------------------------------

// NOT CONNECTED
Bar#m_pHead Bar#m_pRightBar Button#m_pControllerMAS
{
image: no;
 width: 33;
}

// MASCHINE
Bar#m_pHead Bar#m_pRightBar Button#m_pControllerMAS[ControllerModel=maschine]
{
image: url("Header/HDR_BTN_MaschineIcon.png");
animations: 7;
}

// MIKRO
Bar#m_pHead Bar#m_pRightBar Button#m_pControllerMAS[ControllerModel=mikro]
{
image:
url("Header/HDR_BTN_MaschineMikroIcon.png");
animations: 7;
}

// STUDIO
Bar#m_pHead Bar#m_pRightBar Button#m_pControllerMAS[ControllerModel=studio]
{
image: url("Header/HDR_BTN_MSTIcon.png");
animations: 7;
}

//=================================================================================
=====================================
// Master Level Meter & CPU Meter
//=================================================================================
=====================================

//---------------------------------------------------------------------------------
-------------------------------------
// Level Meter
//---------------------------------------------------------------------------------
-------------------------------------

// Container for Level Meter an CPU Meter

Bar#m_pHead Bar#m_pRightBar Bar#pLevelMeterContainer
{
image: url("Header/header_bg_dark.png");
picture-includes-margin: true;
width: 113;
fixed-left: 20;
fixed-right: 20;

margin-left: 2;
margin-right: 6;
margin-top: 5;
margin-bottom: 3;

outer-margin-top: 3;
outer-margin-left: 2;
outer-margin-right: 2;

spacing: 2;
}
// Container
Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter
{
width: 92;
height: 19;
spacing: 1;
}

// Left Right Background

Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter Bar#pChannelLeft,
Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter Bar#pChannelRight
{
image: url("Header/header_meter_bg_master.png");
outer-margin-left: 4;
}

// Left Right Meter LED

Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter Bar#pChannelLeft
LevelMeter,
Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter Bar#pChannelRight
LevelMeter
{
image:
url("Header/header_meter_led_master.png");
animations: 2;
animation-index: 0;
}

// Clipping
Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter Bar#pChannelLeft
Label,
Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter Bar#pChannelRight
Label
{
image: url("Header/header_meter_master_clip.png");
animations: 2;
animation-index: 0;
}

Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter Bar#pChannelLeft

Label:selected,
Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter Bar#pChannelRight
Label:selected
{
animation-index: 1;
}

// Slider
Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter Slider
{
background-color: no;
width: 92;
}

Bar#m_pHead Bar#m_pRightBar MasterLevelMeter#m_pMasterLevelMeter Grip

{
image: url("Header/header_meter_grip_master.png");
}

//---------------------------------------------------------------------------------
-------------------------------------
// CPU METER
//---------------------------------------------------------------------------------
-------------------------------------

// Container
Bar#m_pHead Bar#m_pRightBar Bar#pCpuMeterContainer
{
height: 19;
width: 11;
spacing: 2;
}

// CPU Meter Wrapper

Bar#m_pHead Bar#m_pRightBar Bar#pCpuMeterContainer Label#pCpuMeterOverlayContainer
{
height: 11;
width: 11;
}

// CPU Meter Outline

Bar#m_pHead Bar#m_pRightBar Label#pCpuMeterOverlay
{
image: url("Header/header_meter_bg_cpu.png");
}

// CPU Meter Peak Background

Bar#m_pHead Bar#m_pRightBar LevelMeter#m_pCPUMeter
{
background-color: $colorWhite30;
foreground-color: $colorWhite80;
width: 11;
height: 11;
}

// CPU Meter Label

Bar#m_pHead Bar#m_pRightBar Label#pCpuLabel
{
image: url("Header/header_meter_cpu_label.png");
}
//---------------------------------------------------------------------------------
----------------------

// Button Engine ON/OFF

Bar#m_pHead Bar#m_pRightBar Button#m_pEngine
{
image: url("Header/header_btn_engine.png");
animations: 7;
foreground-color: no;
}

// NI Logo
Button#pLogoNI
{
image: url("Header/header_logo_ni.png");
foreground-color: no;
outer-margin-left: 7;
outer-margin-right: 8;
outer-margin-top: 4;
}

ButtonMenu#m_pNudgeSnap
{
width: 80;
outer-margin-left: 8;
outer-margin-top: 8;
}