// Import the correct set of variables - dark by default but applications can decide by overwriting
// the variable to be 'light'
@import 'moonstone-variables-@{moon-theme}.less';

// default value
@moon-theme: 'dark';

// App
// ---------------------------------------
@moon-app-keepout: 18px;

@moon-neutral-bg-color: @moon-light-gray;
@moon-neutral-text-color: @moon-dark-gray;
@moon-neutral-child-text-color: @moon-dark-gray;
@moon-neutral-scroller-icon: url(../images/LightTheme_Icons/scroller_icon.png);
@moon-neutral-border-color: @moon-dark-gray;
@moon-neutral-icon-color: @moon-dark-gray;
@moon-neutral-button-text-color: @moon-dark-gray;
@moon-neutral-button-bg-color: @moon-white;
@moon-neutral-button-disabled-text-color: @moon-dark-gray;
@moon-neutral-button-disabled-bg-color: @moon-white;
@moon-neutral-thumb-bg-color: rgba(50, 50, 50, 0.8);


// Icon Font
// ---------------------------------------
@moon-icon-plus:              "\0002B";
@moon-icon-minus:             "\0002D";
@moon-icon-arrowhookleft:     "\021A9";
@moon-icon-arrowhookright:    "\021AA";
@moon-icon-ellipsis:          "\022EF";
@moon-icon-check:             "\02713";
@moon-icon-circle:            "\0EFFDB";
@moon-icon-stop:              "\0EFFDC";
@moon-icon-play:              "\0EFFDD";
@moon-icon-pause:             "\0EFFDE";
@moon-icon-forward:           "\0EFFDF";
@moon-icon-backward:          "\0EFFE0";
@moon-icon-skipforward:       "\0EFFE1";
@moon-icon-skipbackward:      "\0EFFE2";
@moon-icon-pauseforward:      "\0EFFE3";
@moon-icon-pausebackward:     "\0EFFE4";
@moon-icon-pausejumpforward:  "\0EFFE5";
@moon-icon-pausejumpbackward: "\0EFFE6";
@moon-icon-jumpforward:       "\0EFFE7";
@moon-icon-jumpbackward:      "\0EFFE8";
@moon-icon-denselist:         "\0EFFE9";
@moon-icon-bulletlist:        "\0EFFEA";
@moon-icon-list:              "\0EFFEB";
@moon-icon-drawer:            "\0EFFEC";
@moon-icon-arrowlargedown:    "\0EFFED";
@moon-icon-arrowlargeup:      "\0EFFEE";
@moon-icon-arrowlargeleft:    "\0EFFEF";
@moon-icon-arrowlargeright:   "\0EFFF0";
@moon-icon-arrowsmallup:      "\0EFFF1";
@moon-icon-arrowsmalldown:    "\0EFFF2";
@moon-icon-arrowsmallleft:    "\0EFFF3";
@moon-icon-arrowsmallright:   "\0EFFF4";
@moon-icon-closex:            "\0EFFF5";
@moon-icon-search:            "\0EFFF6";
@moon-icon-rollforward:       "\0EFFF7";
@moon-icon-rollbackward:      "\0EFFF8";
@moon-icon-exitfullscreen:    "\0EFFF9";
@moon-icon-fullscreen:        "\0EFFFA";
@moon-icon-arrowextend:       "\0F0021";
@moon-icon-arrowshrink:       "\0F0022";
@moon-icon-flag:              "\0F0023";
@moon-icon-funnel:            "\0F0024";
@moon-icon-trash:             "\0F0025";
@moon-icon-star:              "\0F0028";
@moon-icon-hollowstar:        "\0F0029";
@moon-icon-halfstar:          "\0F002A";
@moon-icon-gear:              "\0F002B";
@moon-icon-plug:              "\0F002C";
@moon-icon-lock:              "\0F002D";

// Font Sizes
// ---------------------------------------
@moon-superscript-text-size:        24px;
@moon-large-text-size:              48px;
@moon-pre-text-size:                24px;
@moon-header-font-size:             120px;
@moon-super-header-font-size:       33px;
@moon-sub-header-font-size:         30px;
@moon-sub-header-below-font-size:   27px;
@moon-small-header-font-size:       60px;
@moon-small-header-sub-header-font-size:   @moon-sub-header-below-font-size;
@moon-body-font-size:               33px;
@moon-item-font-size:               33px;
@moon-popup-header-font-size:       72px;
@moon-popup-sub-header-font-size:   27px;
@moon-popup-content-font-size:      30px;
@moon-expandable-value-font-size:   27px;
@moon-expandable-client-item-font-size:   27px;
@moon-divider-font-size:            24px;
@moon-button-large-font-size:       36px;
@moon-button-small-font-size:       27px;
@moon-clock-minute-font-size:       60px;
@moon-clock-text-font-size:         54px;
@moon-clock-meridiem-font-size:     24px;
@moon-clock-top-font-size:          66px;
@moon-clock-bottom-font-size:       27px;
@moon-calendar-day-small-font-size: 24px;

@moon-non-latin-superscript-text-size:  24px;
@moon-non-latin-large-text-size:        48px;
@moon-non-latin-pre-text-size:          24px;
@moon-non-latin-popup-header-font-size: 66px;
@moon-non-latin-sub-header-font-size:   33px;
@moon-non-latin-super-header-font-size: 33px;
@moon-non-latin-body-font-size:         27px;
@moon-non-latin-divider-font-size:      27px;
@moon-non-latin-button-large-font-size: 36px;
@moon-non-latin-button-small-font-size: 27px;
@moon-non-latin-header-font-size:       102px;
@moon-non-latin-expandable-client-item-font-size: 27px;


// Other Font Properties
// ---------------------------------------
@moon-font-family: "MuseoSans 700";
@moon-font-family-light: "MuseoSans 300";
@moon-font-family-small: "MuseoSans 500";
@moon-font-family-bold: "MuseoSans 900";
@moon-alt-font-family: "Moonstone Miso";
@moon-non-latin-font-family: "Moonstone LG Display";
@moon-non-latin-font-family-light: "Moonstone LG Display Light";
@moon-non-latin-font-family-bold: "Moonstone LG Display Bold";

@moon-header-font-family: @moon-alt-font-family;
@moon-header-font-weight: normal;
@moon-header-letter-spacing: normal;
@moon-header-font-style: normal;
@moon-header-line-height: 1.3em;
@moon-medium-header-line-height: 1.3em;
@moon-small-header-line-height: 1.3em;
@moon-non-latin-header-text-line-height: 1.5em;
@moon-non-latin-medium-header-line-height: 1.5em;
@moon-non-latin-small-header-line-height: 1.5em;

@moon-popup-header-font-family: @moon-header-font-family;
@moon-popup-header-font-weight: normal;
@moon-popup-header-letter-spacing: normal;
@moon-popup-header-font-style: normal;
@moon-popup-header-line-height: normal;

@moon-sub-header-font-family: @moon-font-family;
@moon-sub-header-font-weight: normal;
@moon-sub-header-letter-spacing: 0;
@moon-sub-header-font-style: normal;
@moon-sub-header-line-height: 2em;
@moon-sub-header-below-font-family: @moon-font-family-light;

@moon-super-header-font-family: @moon-alt-font-family;
@moon-super-header-font-weight: normal;
@moon-super-header-letter-spacing: normal;
@moon-super-header-font-style: normal;
@moon-super-header-line-height: normal;

@moon-body-font-family: @moon-font-family-light;
@moon-body-font-weight: normal;
@moon-body-letter-spacing: 0;
@moon-body-font-style: normal;
// Body text line heights must be speified in px, since moon.ExpandableText requires precise line measurement
@moon-body-line-height: @moon-body-font-size + 6;
@moon-non-latin-body-line-height: 1.7em;

@moon-divider-font-family: "MuseoSans 700 Italic";
@moon-divider-font-weight: normal;
@moon-divider-font-style: normal;
@moon-divider-letter-spacing: 0;

@moon-expandable-value-font-family: @moon-font-family-light;
@moon-expandable-value-font-weight: normal;
@moon-expandable-value-font-style: normal;

@moon-button-font-family: "Moonstone Miso Bold";
@moon-button-font-weight: normal;
@moon-button-font-style: normal;
@moon-button-letter-spacing: normal;

@moon-icon-font-family: "Moonstone Icons";
@moon-icon-font-size: 72px;

@accordion-sub-menu-line-height: 1.7em;

@moon-invalid-text-color: @moon-red;

// Popup
// ---------------------------------------
@moon-popup-padding: 39px;

// Drawer
// ---------------------------------------
@moon-drawers-activator-bar-height: 24px;
@moon-drawer-nub-width: 60px;
@moon-drawer-nub-height: 36px;

// Images
// ---------------------------------------
@moon-checkbox-icon-height: 36px;
@moon-checkbox-icon-width: 24px;
@moon-checkbox-width: 36px;

@moon-formcheckbox-image-width: 48px;
@moon-formcheckbox-image-height: 48px;

@moon-close-image-height: 36px;
@moon-close-image-width: 36px;

// Icon Sizes
// ---------------------------------------
@moon-icon-size: 48px;
@moon-icon-small-size: 36px;
@moon-icon-button-size: 84px;
@moon-icon-button-small-size: 60px;
@moon-icon-sprite-size: (@moon-icon-button-size - (@moon-button-border-width * 2));
@moon-icon-sprite-small-size: (@moon-icon-button-small-size - (@moon-button-border-width * 2));
@moon-icon-tap-area-offset: -(@moon-button-border-width + (@moon-button-small-tap-area-height - @moon-button-small-height) / 2);
@moon-icon-margin: 12px;

// Spotlight
// ---------------------------------------
@moon-spotlight-outset: 12px;

// Button
// ---------------------------------------
@moon-button-height: 84px;
@moon-button-small-height: 60px;
@moon-button-border-width: 6px;
@moon-button-border-radius: 9999px;
@moon-button-small-tap-area-height: 78px;
@moon-button-large-text-size: 30px;
@moon-button-small-text-size: 24px;
@moon-button-large-min-width: 180px;
@moon-button-small-min-width: 132px;
@moon-button-h-padding: 27px;
@moon-button-small-h-padding: 18px;
@moon-button-pressed-scale: 0.05;

// Header
// ---------------------------------------
@moon-header-height-large: 360px;
@moon-header-height-medium: 240px;
@moon-header-height-small: 120px;
@moon-header-indent-width: 18px;
@moon-header-title-subtitle-gap: 36px;
@moon-header-border-top-width: 3px;
@moon-header-border-bottom-width: 6px;
@moon-input-header-icon: url(../images/input-header-icon.png);

// Input
// ---------------------------------------
@moon-input-border-width: 6px;
@moon-input-height:60px;

// Pickers
// ---------------------------------------
@moon-picker-button-width: 60px;
@moon-picker-min-width: 60px;
@moon-picker-min-padding: 6px;

// Expandable Pickers
// ---------------------------------------
@moon-expandable-caret-icon-font-size: 48px;
@moon-expandable-client-item-line-height: 45px;

// Expandable Text
// ---------------------------------------
@moon-expandable-text-button-padding: 42px;

// Progress Bar
// ---------------------------------------
@moon-progress-bar-height: 12px;

// Slider Knob
// ---------------------------------------
@moon-slider-knob-width:@moon-button-small-height;
@moon-slider-knob-height:@moon-button-small-height;
@moon-slider-knob-spotlight-width: 90px;
@moon-slider-knob-spotlight-height: 90px;

// Items
// ---------------------------------------
@moon-item-height: 60px;
@moon-item-vertical-padding: 3px;
@moon-item-line-height: @moon-item-height - (@moon-item-vertical-padding * 2);
@moon-item-indent: 36px;

// Divider
@moon-divider-border-width: 3px;

// Breadcrumb
// ---------------------------------------
@moon-breadcrumb-width: 96px;
@moon-breadcrumb-text-size: 36px;

// Selectable Item
// ---------------------------------------
@moon-selectable-item-indicator-width: 18px;
@moon-selectable-item-indicator-height: 18px;
@moon-radio-item-gap: 12px;
@moon-radio-item-indicator-border: 3px;

// Spinner
// ---------------------------------------
@moon-spinner-size: 72px;
@moon-spinner-image: url(../images/spinner.gif);
@moon-spinner-image-width: 60px;
@moon-spinner-image-height: 60px;
@moon-spinner-time: 1.25s;		// Length of the spinner animation
@moon-spinner-ball-height: 15%;	// Height of the ball container
@moon-spinner-ball-width: @moon-spinner-ball-height;	// Height of the ball container
@moon-spinner-ball-disatance: 20%;	// Distance of the ball from the center
@moon-spinner-ball-angle: 13deg;	// Ball impact angle (should be set so there is no ball overlap)

// ToggleSwitch
// ---------------------------------------
@moon-toggleswitch-height: 30px;
@moon-toggleswitch-width: 60px;
@moon-toggleswitch-margin: @moon-toggleswitch-width + @moon-spotlight-outset;

// ToggleButton
// ---------------------------------------
@moon-toggle-button-switch-border-width: 3px;
@moon-toggle-button-switch-width: 15px;
@moon-toggle-button-text-switch-gutter: 18px;

// Tooltip
// ---------------------------------------
@moon-tooltip-height: 68px;
@moon-tooltip-label-height: 30px;

// IntegerPicker
// ---------------------------------------
@moon-integer-picker-radius: 48px;
@moon-integer-picker-height: 96px;
@moon-integer-picker-overlay-height: 30px;
@moon-integer-picker-shadow-width: 6px;
@moon-integer-picker-caret-font-size: 72px;

// Grid Dimensions
// ---------------------------------------
@moon-grid-gutter-width: 18px;
@moon-grid-gutter-height: 0px;
@moon-grid-column-width: 60px;
@moon-grid-row-height: 42px;

// ObjectActionDecorator
// ---------------------------------------
@moon-objaction-decorator-display: table-cell;

// Video Player
// ---------------------------------------
@moon-video-player-icon-text-gutter-width:         12px;
@moon-video-player-info-description-text-size:     36px;
@moon-video-player-info-text-size:                 15px;
@moon-video-player-side-padding:                   72px;
@moon-video-player-transport-slider-knob-size:     48px;
@moon-video-player-transport-slider-height:        84px;
@moon-video-player-transport-slider-tap-area:      81px;
@moon-icon-playpause-font-size:                    216px;
@moon-icon-main-control-font-size:                 192px;
@moon-icon-arrowextendshrink-font-size:            108px;
@moon-video-feedback-icon-width:                   36px;
@moon-video-feedback-icon-font-size:               120px;
@moon-video-feedback-icon-line-height:             30px;
@moon-video-feedback-icon-pausejumpbackward-width: 36px;
@moon-video-feedback-icon-pausejumpforward-width:  36px;
@moon-video-feedback-icon-play-width:              24px;
@moon-video-feedback-icon-pause-width:             24px;
@moon-video-feedback-icon-font-play-size:          72px;
@moon-video-feedback-icon-font-pause-size:         72px;
@moon-video-icon-exitfullscreen-font-size:         96px;
@moon-video-icon-exitfullscreen-line-height:       84px;


// Caret
// ---------------------------------------
@moon-caret-black-large-up-icon: url(../images/caret-black-large-up-icon.png);
@moon-caret-black-large-down-icon: url(../images/caret-black-large-down-icon.png);
@moon-caret-black-small-up-icon: url(../images/caret-black-small-up-icon.png);
@moon-caret-black-small-down-icon: url(../images/caret-black-small-down-icon.png);
@moon-caret-black-small-up-image: url(../images/caret-black-small-up-image.png);
@moon-caret-black-small-down-image: url(../images/caret-black-small-down-image.png);
@moon-caret-white-small-down-image: url(../images/caret-white-small-down-image.png);

// ContextualPopupButton
// ---------------------------------------
@moon-contextual-arrow: url(../images/contextual-arrow.png);
@moon-contextual-arrow-spotlight: url(../images/contextual-arrow-spotlight.png);
@moon-contextual-arrow-rtl: url(../images/contextual-arrow-rtl.png);
@moon-contextual-arrow-spotlight-rtl: url(../images/contextual-arrow-spotlight-rtl.png);
@moon-contextual-arrow-padding: 48px;
@moon-contextual-arrow-font-size: 60px;

// ContextualPopupButton
// ---------------------------------------
@moon-contextual-popup-border-radius: 15px;
@moon-contextual-popup-padding: 18px;
@moon-contextual-popup-gutter: 36px;
@moon-contextual-popup-nub-height: 18px;

// Panel
// ----------------------------------------
@moon-panel-breadcrumb-height: 360px;
@moon-panel-breadcrumb-inner-width: 210px;

// Panels
// ----------------------------------------
@moon-panels-handle-width: 132px;
@moon-panel-handle-icon-font-size: 144px;

// Progress Button
// ----------------------------------------
@moon-progress-button-bar-border-radius: @moon-button-border-radius;
@moon-progress-button-border-width: @moon-button-border-width;
