@enact/moonstone/styles/variables.less

Large-screen/TV support library for Enact, containing a variety of UI components.

// Variables
//

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

// Font Sizes
// ---------------------------------------
@moon-superscript-text-size:        24px;
@moon-large-text-size:              48px;
@moon-pre-text-size:                24px;
@moon-header-font-size:             69px;
@moon-header-title-below-font-size: 27px;
@moon-header-sub-title-below-font-size: 27px;
@moon-header-compact-font-size:     60px;
@moon-header-compact-title-below-font-size: @moon-header-sub-title-below-font-size;
@moon-header-dense-title-font-size: 48px;
@moon-header-dense-title-below-font-size: 24px;
@moon-body-font-size:               30px;
@moon-body-small-font-size:         27px;
@moon-item-font-size:               33px;
@moon-item-font-size-large:         39px;
@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-value-font-size-large:   30px;
@moon-expandable-client-item-font-size:   27px;
@moon-expandable-client-item-font-size-large:   33px;
@moon-heading-large-font-size:      36px;
@moon-heading-medium-font-size:     33px;
@moon-heading-small-font-size:      27px;
@moon-notification-font-size:       30px;
@moon-button-font-size:             39px;
@moon-button-font-size-large:       48px;
@moon-button-small-font-size:       30px;
@moon-button-small-font-size-large: 36px;
@moon-labeledicon-font-size:        24px;
@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-input-font-size:              39px;
@moon-input-small-font-size:        36px;
@moon-tooltip-label-font-size:      27px;

@moon-non-latin-base-font-size:         33px;
@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-header-font-size:       57px;
@moon-non-latin-header-title-below-font-size: (@moon-header-title-below-font-size - 3px);
@moon-non-latin-body-font-size:         27px;
@moon-non-latin-body-small-font-size:   24px;
@moon-non-latin-button-large-font-size: 36px;
@moon-non-latin-button-small-font-size: 27px;
@moon-non-latin-expandable-client-item-font-size: 27px;

// Other Font Properties
// ---------------------------------------
@moon-font-family: "Moonstone";        // Formerly weight: 700
@moon-font-family-light: "Moonstone";  // Formerly weight: 300
@moon-font-family-small: "Moonstone";  // Formerly weight: 500
@moon-font-family-bold: "Moonstone";   // Formerly weight: 900
@moon-alt-font-family: "Moonstone";
@moon-non-latin-font-family: "Moonstone";
@moon-non-latin-font-family-light: "Moonstone";  // Formerly weight: Light
@moon-non-latin-font-family-bold: "Moonstone";   // Formerly weight: Bold
@moon-non-latin-font-weight: 400;
@moon-non-latin-font-weight-light: 300;
@moon-non-latin-font-weight-bold: 700;
@moon-non-latin-body-font-weight: @moon-non-latin-font-weight-light;

@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-header-standard-title-line-height: @moon-header-line-height;
@moon-header-compact-title-line-height: @moon-header-line-height;
@moon-header-standard-title-below-line-height: 1.4em;
@moon-header-standard-sub-title-below-line-height: @moon-header-standard-title-below-line-height;
@moon-header-dense-title-font-weight: bold;
@moon-non-latin-header-line-height: 1.5em;
@moon-non-latin-header-standard-title-line-height: @moon-non-latin-header-line-height;
@moon-non-latin-header-compact-title-line-height: @moon-non-latin-header-line-height;
@moon-non-latin-header-standard-title-below-line-height: @moon-non-latin-header-line-height;
@moon-non-latin-header-standard-sub-title-below-line-height: @moon-non-latin-header-line-height;

@moon-header-title-below-font-family: @moon-font-family;
@moon-header-title-below-font-weight: normal;
@moon-header-title-below-letter-spacing: 0;
@moon-header-title-below-font-style: normal;
@moon-header-sub-title-below-font-family: @moon-font-family;
@moon-header-sub-title-below-font-weight: normal;

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

@moon-dialog-title-line-height: @moon-header-standard-title-line-height;
@moon-dialog-title-font-size: @moon-header-dense-title-font-size;
@moon-dialog-title-font-weight: @moon-header-dense-title-font-weight;
@moon-dialog-title-below-font-family: @moon-header-title-below-font-family;
@moon-dialog-title-below-font-weight: @moon-header-title-below-font-weight;

@moon-body-font-family: @moon-font-family;
@moon-body-font-weight: 300;
@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-body-line-height-large: @moon-body-line-height + 6; // The fact that this 6 is the same number as the above 6 is coincidental. LargeText is typically 6px larger than normal.
@moon-non-latin-body-line-height: 1.7em;

@moon-heading-large-font-family: @moon-font-family;
@moon-heading-large-font-weight: 600;
@moon-heading-large-font-style: normal;
@moon-heading-medium-font-family: @moon-heading-large-font-family;
@moon-heading-medium-font-weight: @moon-heading-large-font-weight;
@moon-heading-medium-font-style: @moon-heading-large-font-style;
@moon-heading-small-font-family: @moon-heading-large-font-family;
@moon-heading-small-font-weight: 400;
@moon-heading-small-font-style: @moon-heading-large-font-style;
@moon-heading-letter-spacing: 0;
@moon-heading-line-height: @moon-header-line-height;
@moon-heading-non-latin-font-family: @moon-non-latin-font-family-bold;
@moon-heading-non-latin-line-height: @moon-non-latin-header-standard-title-line-height;

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

@moon-icon-font-family: "Moonstone Icons";
@moon-icon-font-family-lg: "LG Icons";

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

// Header
// ---------------------------------------
@moon-header-standard-height: 180px;
@moon-header-compact-height: 90px;
@moon-header-indent-width: 18px;
@moon-header-title-subtitle-gap: 36px;
@moon-header-border-bottom-width: 3px;
@moon-header-indent-width: 18px;
@moon-header-controls-border-width: 1px;
@moon-header-components-separation: (@moon-spotlight-outset * 2);
@moon-header-components-gutter: 60px;
@moon-header-dense-height: 153px;

// Button
// ---------------------------------------
@moon-button-border-radius: 3px;
@moon-button-border-width: 3px;
@moon-button-colordot-height: 9px;
@moon-button-colordot-width: 27px;
@moon-button-font-family: @moon-alt-font-family;
@moon-button-font-style: normal;
@moon-button-font-weight: 600;
@moon-button-h-margin: @moon-spotlight-outset;
@moon-button-h-padding: 30px;
@moon-button-height-large: 96px;
@moon-button-height: 84px;
@moon-button-icon-h-margin: 15px;
@moon-button-icon-margin-end: @moon-button-icon-h-margin;
@moon-button-icon-margin-start: 0;
@moon-button-icon-position-after-margin-end: @moon-button-icon-margin-start;
@moon-button-icon-position-after-margin-start: @moon-button-icon-margin-end;
@moon-button-icon-position-after-small-margin-end: 0;
@moon-button-icon-position-after-small-margin-start: @moon-button-icon-small-margin-end;
@moon-button-icon-small-h-margin: @moon-button-icon-h-margin;
@moon-button-icon-small-margin-end: @moon-button-icon-small-h-margin;
@moon-button-icon-small-margin-start: 0;
@moon-button-max-width: 450px;
@moon-button-min-width: 300px;
@moon-button-pressed-scale: 0.05;
@moon-button-small-colordot-height: 9px;
@moon-button-small-colordot-width: 21px;
@moon-button-small-font-family: @moon-button-font-family;
@moon-button-small-font-style: @moon-button-font-style;
@moon-button-small-font-weight: @moon-button-font-weight;
@moon-button-small-h-margin: @moon-button-h-margin;
@moon-button-small-h-padding: 21px;
@moon-button-small-height-large: 72px;
@moon-button-small-height: 60px;
@moon-button-small-max-width: @moon-button-max-width;
@moon-button-small-min-width: 150px;
@moon-button-small-tap-area-height: (@moon-spotlight-outset + @moon-button-small-height + @moon-spotlight-outset);
@moon-button-to-button-large-h-margin: 30px;
@moon-non-latin-button-font-family: @moon-non-latin-font-family-bold;
@moon-non-latin-button-font-style: @moon-button-font-style;
@moon-non-latin-button-large-font-weight: @moon-non-latin-font-weight-bold;
@moon-non-latin-button-small-font-style: @moon-button-small-font-style;
@moon-non-latin-button-small-font-weight: @moon-non-latin-font-weight-bold;

// Dropdown
// ---------------------------------------
@moon-dropdown-border-radius: @moon-button-border-radius;
@moon-dropdown-tiny-width: 240px;
@moon-dropdown-small-width: @moon-button-min-width;
@moon-dropdown-medium-width: 345px;
@moon-dropdown-large-width: 390px;
@moon-dropdown-x-large-width: 525px;
@moon-dropdown-huge-width: 690px;
@moon-dropdown-list-tiny-width: (@moon-dropdown-tiny-width - (@moon-contextual-popup-padding * 2) - @moon-button-border-width);
@moon-dropdown-list-small-width: (@moon-dropdown-small-width - (@moon-contextual-popup-padding * 2) - @moon-button-border-width);
@moon-dropdown-list-medium-width: (@moon-dropdown-medium-width - (@moon-contextual-popup-padding * 2) - @moon-button-border-width);
@moon-dropdown-list-large-width: (@moon-dropdown-large-width - (@moon-contextual-popup-padding * 2) - @moon-button-border-width);
@moon-dropdown-list-x-large-width: (@moon-dropdown-x-large-width - (@moon-contextual-popup-padding * 2) - @moon-button-border-width);
@moon-dropdown-list-huge-width: (@moon-dropdown-huge-width - (@moon-contextual-popup-padding * 2) - @moon-button-border-width);
@moon-dropdown-list-max-height: (5 * @moon-item-height);
@moon-dropdown-list-max-height-large: (5 * @moon-item-height-large);

// Heading
// ---------------------------------------
@moon-heading-border-width: 1px;
@moon-heading-spacing-large: 39px;
@moon-heading-spacing-medium: 21px;
@moon-heading-spacing-small: 9px;
@moon-heading-padding: 0;
@moon-heading-showline-padding: 0 0 9px 0;

// Icon Button
// ---------------------------------------
@moon-icon-button-colordot-height: 9px;
@moon-icon-button-size: @moon-button-height;
@moon-icon-button-size-large: @moon-button-height-large;
@moon-icon-button-small-colordot-height: 6px;
@moon-icon-button-small-size: @moon-button-small-height;
@moon-icon-button-small-size-large: @moon-button-small-height-large;
// @moon-icon-button-border-radius: 6px;
@moon-icon-button-border-radius: 960px; // 960 generates a nicer, round REM number (40) than 999

// Icon Sizes
// ---------------------------------------
@moon-icon-size: 48px;
@moon-icon-size-large: (@moon-icon-size * 1.2);
@moon-icon-small-size: 36px;
@moon-icon-small-size-large: (@moon-icon-small-size * 1.2);
@moon-icon-font-size: (@moon-icon-size * 2);
@moon-icon-font-size-large: (@moon-icon-font-size * 1.2);
@moon-icon-small-font-size: (@moon-icon-small-size * 2);
@moon-icon-small-font-size-large: (@moon-icon-small-font-size * 1.2);
@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;

// Input
// ---------------------------------------
@moon-input-margin: 0 @moon-spotlight-outset;
@moon-input-padding: 0 @moon-input-icon-spacing;
@moon-input-font-weight: 600;
@moon-input-text-indent: 0.2em;
@moon-input-disabled-opacity: 0.4;
@moon-input-placeholder-opacity: 0.5;
@moon-input-border-radius: @moon-input-border-width;
@moon-input-border-width: 3px;
@moon-input-border-outline-width: @moon-input-border-width;
@moon-input-tooltip-offset: @moon-input-border-width;
@moon-input-icon-spacing: 15px;
@moon-input-height: @moon-button-height;
@moon-input-small-height: @moon-button-small-height;
@moon-input-decorator-small-height: @moon-input-small-height;
@moon-expandableinput-input-margin: 6px @moon-spotlight-outset;
@moon-input-highlight-height: 100%;
@moon-input-highlight-max-width: 378px;
@moon-input-highlight-small-max-width: 357px;

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

// FormCheckbox
// ---------------------------------------
@moon-formcheckbox-size: (@moon-item-height * 0.65);	// Relative to `Item` height
@moon-formcheckbox-size-large: (@moon-item-height-large * 0.625);	// Relative to `Item` height
@moon-formcheckbox-check-icon-size: 60px;
@moon-formcheckbox-check-icon-size-large: 72px;
@moon-formcheckbox-border-size: 2px;
@moon-formcheckbox-border-radius: 960px; // Generic, sufficiently large value that converts to a nice amount of rem

// Checkbox
// ---------------------------------------
@moon-checkbox-size: 27px;
@moon-checkbox-size-large: 33px;
@moon-checkbox-border-radius: 960px; // Generic, sufficiently large value that converts to a nice amount of rem

// DaySelector
// ---------------------------------------
@moon-day-selector-vertical-margin: 3px;
@moon-day-selector-horizontal-margin: 6px;
@moon-day-selector-padding: 6px;
@moon-day-selector-item-padding: (@moon-formcheckbox-size / 2);
@moon-day-selector-border-width: @moon-button-border-width;
@moon-day-selector-border-radius: @moon-button-border-radius;
@moon-day-selector-checkbox-size: @moon-formcheckbox-size;
@moon-day-selector-checkbox-size-large: @moon-formcheckbox-size-large;
@moon-day-selector-checkbox-check-icon-size: @moon-formcheckbox-check-icon-size;
@moon-day-selector-checkbox-check-icon-size-large: @moon-formcheckbox-check-icon-size-large;
@moon-day-selector-checkbox-check-border-radius: @moon-formcheckbox-border-radius;
@moon-day-selector-checkbox-check-border-radius-large: @moon-day-selector-checkbox-check-border-radius;

// ToggleButton
// ---------------------------------------
@moon-toggle-button-switch-border-width: 3px;
@moon-toggle-button-switch-border-radius: 960px;
@moon-toggle-button-switch-width: 15px;
@moon-toggle-button-text-switch-gutter: 18px;
@moon-toggle-button-small-text-switch-gutter: 12px;
@moon-toggle-button-switch-icon-line-height: @moon-toggle-button-switch-width;
@moon-toggle-button-switch-icon-font-size: 30px;
@moon-toggle-button-switch-icon-font-family: @moon-icon-font-family;
@moon-toggle-button-selected-glyph-highcontrast: "\0EFFDB";

// Panels
// ---------------------------------------
@moon-panels-breadcrumb-font-family: @moon-alt-font-family;
@moon-panels-breadcrumb-text-size: @moon-body-font-size;
@moon-panels-breadcrumb-width: 96px;
@moon-panels-handle-width: 132px;
@moon-panel-v-padding: @moon-app-keepout;
@moon-panel-h-padding: (@moon-app-keepout - @moon-spotlight-outset);
@moon-panel-handle-icon-font-size: 144px;

// Toggle Item
// ---------------------------------------
@moon-toggle-item-icon-margin: @moon-icon-margin;

// Selectable Item
// ---------------------------------------
@moon-selectable-item-indicator-size: @moon-item-height;
@moon-selectable-item-indicator-size-large: @moon-item-height-large;
@moon-selectable-item-indicator-width: (@moon-icon-size / 2 - 3px);
@moon-selectable-item-indicator-width-large: (@moon-selectable-item-indicator-width + 6px);

// EditableIntegerPicker
// ---------------------------------------
@moon-editable-integer-picker-border-size: 6px;

// Radio Item
// ---------------------------------------
@moon-radio-item-indicator-size: 21px;
@moon-radio-item-indicator-size-large: 24px;
@moon-radio-item-indicator-border: 2px;  // ### Exceptional Case ###
	// 2px, not being a multiple of 3, poses special problems. Any math or assignment related to
	// this value must be specifically considered as to not impose layout issues related to, for
	// example a width of 19.9998px, which can be treated by 19px or 20px, depending on the case.

// GridListImageItem
// ---------------------------------------
@moon-gridlist-item-overlay-icon-size: 60px;
@moon-gridlist-item-border-width: 6px;
@moon-gridlist-item-caption-padding-top: 9px;

// Scrollable
// ---------------------------------------
@moon-scrollable-overscroll-thickness: 6px;
@moon-scrollable-overscroll-duration: 300ms;
@moon-scrollable-scrollbar-size: @moon-icon-button-small-size;

// ToggleSwitch
// ---------------------------------------
@moon-toggleswitch-height: 30px;
@moon-toggleswitch-width: 60px;
@moon-toggleswitch-height-large: 42px;
@moon-toggleswitch-width-large: 84px;
@moon-toggleswitch-margin: @moon-toggleswitch-width + @moon-spotlight-outset;
@moon-checkbox-toggle-switch-border-width: 1px;
@moon-checkbox-toggle-switch-selected-border-width: @moon-checkbox-toggle-switch-border-width;

// Popup
// ---------------------------------------
@moon-popup-padding-top: 24px;
@moon-popup-padding-right: 36px;
@moon-popup-padding-bottom: @moon-popup-padding-top;
@moon-popup-padding-left: @moon-popup-padding-right;
@moon-popup-body-margin-top: (@moon-popup-padding-top - 9px);
@moon-popup-body-margin-right: (@moon-popup-padding-right - 9px);
@moon-popup-body-margin-bottom: (@moon-popup-padding-bottom - 15px);
@moon-popup-body-margin-left: @moon-popup-body-margin-right;
@moon-popup-closecontainer-separation: @moon-spotlight-outset;

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

// Scrim
// ---------------------------------------
@moon-scrim-color: fade(black, 30%);

// Slider
// ---------------------------------------
@moon-slider-bar-height: @moon-progress-bar-height;
@moon-slider-knob-width: @moon-button-small-height;
@moon-slider-knob-width-large: @moon-button-small-height-large;
@moon-slider-knob-height: @moon-button-small-height;
@moon-slider-knob-height-large: @moon-button-small-height-large;
@moon-slider-tooltip-offset: (@moon-slider-knob-height / 2);
@moon-slider-knob-resting-state-scale: 0.75;

// IntegerPicker
// ---------------------------------------
@moon-integer-picker-shadow-width: 6px;

// Icons
// ---------------------------------------
@moon-icon-circle: "\0EFFDB";

// Spinner
// ---------------------------------------
@moon-spinner-size: 51px;
@moon-spinner-small-size: 36px;
@moon-spinner-small-size-large: 42px;
@moon-spinner-time: 1.25s;		// Length of the spinner animation
@moon-spinner-line-width: 3px;
@moon-spinner-small-line-width: 3px;
@moon-spinner-line-margin: 12px;
@moon-spinner-small-line-margin: 9px;
@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-distance: 20%;	// Distance of the ball from the center
@moon-spinner-ball-angle: 13deg;
@moon-spinner-icon: @moon-icon-circle;
@moon-spinner-font-weight: bold;

// Date/Time Pickers
// ---------------------------------------
@moon-date-component-pickers-padding: 48px;

// ContextualPopup
// ---------------------------------------
@moon-contextual-popup-border-width: 1px;
@moon-contextual-popup-border-radius: @moon-button-border-width;
@moon-contextual-popup-padding: @moon-spotlight-outset;
@moon-contextual-popup-arrow-height: 30px;
@moon-contextual-popup-arrow-width: 30px;

// Dialog
// ---------------------------------------
@moon-dialog-padding-top: 42px;
@moon-dialog-padding-right: 42px;
@moon-dialog-padding-bottom: 24px;
@moon-dialog-padding-left: @moon-dialog-padding-right;
@moon-dialog-closecontainer-separation: 18px;
@moon-dialog-title-padding-right: (@moon-header-components-gutter - @moon-button-h-margin);

// Notification
// ---------------------------------------
@moon-notification-font-family: @moon-font-family;
@moon-notification-font-weight: 500;
@moon-notification-font-style: normal;
@moon-notification-border-width: 1px;
@moon-notification-border-radius: 3px;
@moon-notification-margin-bottom: 324px;
@moon-notification-padding-left-right: 39px;
@moon-notification-padding-top-bottom: 24px;
@moon-notification-min-width: 300px;
@moon-notification-max-width: ((@moon-notification-border-width * 2) + (@moon-notification-padding-left-right * 2) + (2 * ((@moon-button-small-h-margin * 2) + @moon-button-small-max-width)) + 12px);  // Attempt to calculate the width of all of the buttons and the pieces of Notification that influence the width to get the maximum size
@moon-notification-wide-width: ((@moon-notification-border-width * 2) + (@moon-notification-padding-left-right * 2) + (3 * ((@moon-button-small-h-margin * 2) + @moon-button-small-max-width)) + 12px);

// Tooltip
// ---------------------------------------
@moon-tooltip-font-weight: normal;
@moon-tooltip-offset: 9px;
@moon-tooltip-point-width: 12px;
@moon-tooltip-point-height: 12px;
@moon-tooltip-border-width: 1px;
@moon-tooltip-border-radius: 3px;
@moon-tooltip-label-height: 1.5em;
@moon-tooltip-padding: 3px 18px;

// Video
// ---------------------------------------
@moon-video-slider-tooltip-position-bottom:        @moon-spotlight-outset;
@moon-video-slider-tooltip-font-size:              24px;
@moon-video-slider-tooltip-line-height:            36px;
@moon-video-slider-tooltip-gutter-width:           12px;
@moon-video-slider-tooltip-thumbnail-border-width: 3px;
@moon-video-slider-tooltip-thumbnail-border-radius: @moon-contextual-popup-border-radius;
@moon-video-feedback-icon-width:                   0.5em; // The width of the icon is half of its own font size
@moon-video-feedback-icon-font-size:               2em;
@moon-video-feedback-mini-font-family:             @moon-alt-font-family;
@moon-video-feedback-mini-font-weight:             bold;
@moon-video-feedback-mini-font-style:              normal;
@moon-video-feedback-mini-position-top:            30px;
@moon-video-feedback-mini-position-left:           30px;
@moon-video-feedback-mini-padding-side:            18px;
@moon-video-feedback-mini-font-size:               39px;
@moon-video-feedback-mini-line-height:             60px;
// @moon-video-feedback-icon-pausejumpbackward-width: 36px;	// May need this later
// @moon-video-feedback-icon-pausejumpforward-width:  36px;	// May need this later
@moon-video-player-badge-text-size:                24px;
@moon-video-player-indicator-text-size:            24px;
@moon-video-player-padding-bottom:                 30px;
@moon-video-player-padding-side:                   60px;
@moon-video-player-slider-height:                  9px;
@moon-video-player-slider-knob-size:               24px;
@moon-video-player-slider-tap-area:                81px;
@moon-video-player-title-size:                     48px;

// MediaOverlay
// ---------------------------------------
@moon-mediaoverlay-width: 321px;
@moon-mediaoverlay-spotlight-outset-width: 6px;
@moon-mediaoverlay-font-weight: 500;

// Generic
// ---------------------------------------
@moon-translate-center: translate3d(-50%, -50%, 0);

// Deprecated - Will be removed in 4.0
// ---------------------------------------

// No longer shrinking these with updated moonstone font
@moon-video-feedback-icon-shrunken-size:           2em; // For play and pause icons, the em value is smaller since these glyphs are larger scale than the others.