@enact/sandstone/styles/variables.less

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

// Variables
//
@import "~@enact/ui/styles/variables.less";

//
// GUI Guide definition library
//
// These values come directly from the design guide file. Any changes to that file should be set
// here first, with measurement adjustments to be preformed on the component value definition lines
// below.
//
// Usage:
//   * These values should be the most basic literal values. Do not use math in this library;
//     those belong in the component definitions.
//   * Always use the full 4-value format for margin and padding defined here for predictability.
//   * Keep the mixins and their rules alphabetized.
//   * Spacing for readability is OK.
//   * Each mixin represents a top-level component.
//
#guide() {
	// Common sizes
	// 60px - tiny
	// 78px - small
	// 90px - medium
	// 108px - large
	// 150px - huge

	// Standard Mixins

	// .get-edge-size-difference
	//
	// Given the GUI guide line-height and the Enact framework line-height, calculate the difference
	.get-size-difference(@guide-size, @font-size, @line-height) when ((isem(@line-height)) or (ispercentage(@line-height))) {
		@result: #guide.get-size-difference(@guide-size, (@font-size * @line-height))[@result];
	}
	.get-size-difference(@guide-size, @size) {
		@result: (@size - @guide-size);
	}

	// .get-edge-size-difference
	//
	// Given the GUI guide line-height and the Enact framework line-height, calculate the difference
	// in one of the edges.
	// Results returned in `@results`
	.get-edge-size-difference(@guide-size, @font-size, @line-height) when ((isem(@line-height)) or (ispercentage(@line-height))) { // Repeating `when` clause here for slightly more descriptive error messages
		@result: (#guide.get-size-difference(@guide-size, @font-size, @line-height)[@result] / 2);
	}
	.get-edge-size-difference(@guide-size, @size) {
		@result: (#guide.get-size-difference(@guide-size, @size)[@result] / 2);
	}


	// Component Definition Mixins
	.header() {
		compact-padding: 60px;
		compact-title-font-size: 90px;
		compact-title-line-height: 72px;

		mini-margin: 0 0 36px 0;
		mini-padding: 60px 60px 45px 60px;
		mini-title-font-size: 90px;
		mini-title-line-height: 80px;

		standard-padding: 108px 150px 73px 150px;
		standard-title-font-size: 108px;
		standard-title-line-height: 127px;
		standard-titles-gap: 18px;
		standard-subtitle-font-size: 60px;
		standard-subtitle-line-height: 70px;

		wizard-padding: 108px 150px 66px 150px;
		wizard-title-font-size: 144px;
		wizard-title-line-height: 169px;
		wizard-titles-gap: 12px;
	}

	.panel() {
		body-padding: 0 150px;
	}
}

// App
// ---------------------------------------
@sand-app-keepout: 48px;

// Generic/Common/Shared
// ---------------------------------------
@sand-component-spacing: 36px;
@sand-component-spacing-bottom: 30px;
@sand-overlay-outline-width: 0.0625rem; // 3px
@sand-smallest-tappable-size: 168px;
@sand-translate-center: translate(-50%, -50%);
@sand-common-circular-corners: 9000px; // A value large enough that when applied to any node via border-radius produces a completely round corner

// Locale
// ---------------------------------------
// Cambodian(km), Sinhala(si), Thai(th), Vietnamse(vi)
@locale-tallglyph-languages: km, si, th, vi;

// Spotlight
// ---------------------------------------
@sand-spotlight-font-weight: 600;
@sand-spotlight-outset: 48px;
@sand-spotlight-focus-animation-duration: 200ms;
@sand-spotlight-focus-shadow-height: 36px;


// ---------------------------------------
// Font Rules
// ---------------------------------------

// Font Sizes
// ---------------------------------------
@sand-actionguide-label-font-size:  48px;
@sand-alert-overlay-font-size:      60px;
@sand-alert-subtitle-font-size:     @sand-heading-subtitle-font-size;
@sand-alert-title-font-size:        @sand-header-wizard-title-font-size;
@sand-alert-notitle-content-font-size: 90px;
@sand-base-font-size:               60px;
@sand-body-font-size:               @sand-base-font-size;
@sand-body-small-font-size:         54px;
@sand-button-font-size-large:       96px;
@sand-button-font-size:             78px;
@sand-button-small-font-size-large: 72px;
@sand-button-small-font-size:       60px;
@sand-header-compact-title-font-size: #guide.header[compact-title-font-size];
@sand-header-mini-title-font-size:  #guide.header[mini-title-font-size];
@sand-header-wizard-title-font-size: #guide.header[wizard-title-font-size];
@sand-heading-large-font-size:      72px;
@sand-heading-medium-font-size:     66px;
@sand-heading-small-font-size:      54px;
@sand-heading-tiny-font-size:       48px;
@sand-heading-subtitle-font-size:   #guide.header[standard-subtitle-font-size];
@sand-heading-title-font-size:      #guide.header[standard-title-font-size];
@sand-iconitem-label-font-size:     42px;
@sand-iconitem-title-font-size:     36px;
@sand-imageitem-caption-font-size:  60px;
@sand-imageitem-label-font-size:    48px;
@sand-input-font-size:              78px;
@sand-input-fullscreen-title-font-size: 144px;
@sand-input-fullscreen-numbercell-font-size:  126px;
@sand-input-fullscreen-numberfield-font-size: @sand-input-fullscreen-numbercell-font-size;
@sand-input-overlay-title-font-size:          @sand-header-compact-title-font-size;
@sand-input-overlay-numbercell-font-size:     108px;
@sand-input-overlay-numberfield-font-size:    @sand-input-overlay-numbercell-font-size;
@sand-input-invalid-tooltip-font-size:        @sand-inputfield-invalid-tooltip-font-size;
@sand-inputfield-invalid-tooltip-font-size:   48px;
@sand-inputfield-small-font-size:        72px;
@sand-item-font-size:               60px;
@sand-item-font-size-large:         72px;
@sand-item-label-font-size:         48px;
@sand-item-label-font-size-large:   54px;
@sand-item-small-font-size:         60px;
@sand-item-small-font-size-large:   72px;
@sand-item-small-label-font-size:   48px;
@sand-keyguide-font-size:           60px;
@sand-mediaoverlay-caption-font-size: 48px;
@sand-mediaoverlay-font-size:         48px;
@sand-mediaoverlay-title-font-size:   60px;
@sand-mediaplayer-times-min-width:    186px;
@sand-mediaplayer-times-text-size:    48px;
@sand-picker-font-size:             54px;
@sand-picker-joined-font-size:      66px;
@sand-steps-step-number-font-size:  54px;
@sand-switch-icon-font-size:        84px;
@sand-switch-icon-font-size-large:  138px;
@sand-tablayout-tab-font-size:      66px;
@sand-tooltip-label-font-size:      54px;

@sand-tallglyph-alert-title-font-size:  @sand-alert-title-font-size;
@sand-tallglyph-alert-notitle-content-font-size: @sand-alert-notitle-content-font-size;
@sand-non-latin-body-font-size:         54px;
@sand-non-latin-body-small-font-size:   48px;
@sand-tallglyph-body-small-font-size:   48px;
@sand-non-latin-button-large-font-size: 72px;
@sand-non-latin-button-small-font-size: 54px;
@sand-non-latin-header-compact-title-font-size: @sand-header-compact-title-font-size;
@sand-non-latin-header-mini-title-font-size: @sand-header-mini-title-font-size;
@sand-non-latin-header-wizard-title-font-size: @sand-header-wizard-title-font-size;
@sand-tallglyph-heading-subtitle-font-size: (@sand-heading-subtitle-font-size - 6px);
@sand-tallglyph-heading-title-font-size: 114px;
@sand-tallglyph-imageitem-caption-font-size: 54px;
@sand-tallglyph-imageitem-label-font-size: 36px;
@sand-non-latin-input-fullscreen-title-font-size: @sand-input-fullscreen-title-font-size;
@sand-non-latin-input-overlay-title-font-size: @sand-input-overlay-title-font-size;

// Other Font Properties
// ---------------------------------------
@sand-font-family: "Sandstone";        // Formerly weight: 700
@sand-font-family-bold: "Sandstone";   // Formerly weight: 900
@sand-alt-font-family: "Sandstone";
@sand-number-font-family: "Sandstone Number";
@sand-non-latin-font-family: "Sandstone";
@sand-non-latin-font-family-light: "Sandstone";  // Formerly weight: Light
@sand-non-latin-font-family-bold: "Sandstone";   // Formerly weight: Bold
@sand-non-latin-font-weight: normal;
@sand-non-latin-font-weight-light: 300;
@sand-non-latin-font-weight-bold: 700;
@sand-spottable-font-weight: 600;
@sand-common-line-height: 1.3em;
@sand-tallglyph-line-height: 1.5em;

// Alert
@sand-alert-font-family: @sand-font-family;
@sand-alert-font-weight: normal;
@sand-alert-line-height: normal;

// Body
@sand-body-font-family: @sand-font-family;
@sand-body-font-style: normal;
@sand-body-font-weight: normal;
@sand-body-line-height: @sand-body-font-size + 6;
@sand-non-latin-body-font-weight: @sand-non-latin-font-weight-light;
@sand-non-latin-body-font-style: @sand-body-font-style;
@sand-tallglyph-body-line-height: 1.7em;
@sand-non-latin-body-line-height: @sand-tallglyph-body-line-height; // "non-latin" variable retained for legacy code safety.

// Button
@sand-button-font-family: @sand-alt-font-family;
@sand-button-font-style: normal;
@sand-button-font-weight: @sand-spottable-font-weight;
@sand-button-small-font-family: @sand-button-font-family;
@sand-button-small-font-style: @sand-button-font-style;
@sand-button-small-font-weight: @sand-button-font-weight;
@sand-non-latin-button-font-family: @sand-non-latin-font-family-bold;
@sand-non-latin-button-font-style: @sand-button-font-style;
@sand-non-latin-button-font-weight: @sand-non-latin-font-weight-bold;
@sand-non-latin-button-small-font-style: @sand-button-small-font-style;
@sand-non-latin-button-small-font-weight: @sand-non-latin-font-weight-bold;

// Date and Time Picker
@sand-datecomponentpicker-margin: 24px;
@sand-timepicker-colon-margin: 0 6px;

// Heading
@sand-heading-line-height: @sand-common-line-height;
@sand-heading-font-style: normal;
@sand-heading-title-font-family: @sand-alt-font-family;
@sand-heading-title-font-weight: normal;
@sand-heading-title-line-height: @sand-heading-line-height;
@sand-heading-subtitle-font-family: @sand-font-family;
@sand-heading-subtitle-font-weight: normal;
@sand-heading-subtitle-line-height: 1.4em;
@sand-heading-large-font-family: @sand-font-family;
@sand-heading-large-font-weight: @sand-spottable-font-weight;
@sand-heading-medium-font-family: @sand-heading-large-font-family;
@sand-heading-medium-font-weight: @sand-heading-large-font-weight;
@sand-heading-small-font-family: @sand-heading-large-font-family;
@sand-heading-small-font-weight: @sand-heading-large-font-weight;
@sand-heading-tiny-font-family: @sand-heading-large-font-family;
@sand-heading-tiny-font-weight: @sand-heading-large-font-weight;
@sand-heading-letter-spacing: 0;
@sand-non-latin-heading-font-family: @sand-non-latin-font-family-bold;
@sand-tallglyph-heading-line-height: @sand-tallglyph-heading-title-line-height;
@sand-tallglyph-heading-subtitle-line-height: @sand-tallglyph-heading-title-line-height;
@sand-tallglyph-heading-title-line-height: 1.5em;

// Icon
@sand-icon-font-family: "Sandstone Icons";
@sand-icon-other-font-family: "LG Icons";

// ImageItem
@sand-imageitem-font-weight: @sand-spottable-font-weight;

// Input
@sand-input-invalid-tooltip-font-weight: @sand-inputfield-invalid-tooltip-font-weight;

// InputField
@sand-inputfield-font-weight: @sand-spottable-font-weight;
@sand-inputfield-placeholder-font-weight: normal;
@sand-inputfield-placeholder-focus-font-weight: @sand-inputfield-font-weight;
@sand-inputfield-invalid-tooltip-font-weight: @sand-inputfield-font-weight;

// InputNumber
@sand-input-number-font-family: @sand-body-font-family;

// Item
@sand-item-font-weight: @sand-spottable-font-weight;
@sand-item-line-height: @sand-common-line-height;
@sand-item-line-height-large: @sand-item-line-height;
@sand-item-label-line-height: @sand-item-line-height;
@sand-item-small-font-weight: @sand-item-font-weight;
@sand-item-small-line-height: @sand-common-line-height;
@sand-item-small-line-height-large: @sand-item-small-line-height;
@sand-item-small-label-line-height: @sand-item-small-line-height;
@sand-tallglyph-item-line-height: @sand-tallglyph-line-height;
@sand-tallglyph-item-line-height-large: @sand-tallglyph-item-line-height;
@sand-tallglyph-item-label-line-height: @sand-tallglyph-item-line-height;
@sand-tallglyph-item-small-line-height: @sand-tallglyph-line-height;
@sand-tallglyph-item-small-line-height-large: @sand-tallglyph-item-small-line-height;
@sand-tallglyph-item-small-label-line-height: @sand-tallglyph-item-small-line-height;

// Picker
@sand-picker-line-height: 1.5em;
@sand-tallglyph-picker-line-height: @sand-tallglyph-body-line-height;
@sand-picker-joined-font-weight: @sand-spottable-font-weight;


// ---------------------------------------
// Component Rules
// ---------------------------------------

// ActionGuide
// ---------------------------------------
@sand-actionguide-max-width: 1500px;
@sand-actionguide-label-height: 60px;
@sand-actionguide-icon-margin: -24px 0 -18px 0;

// Alert
// ---------------------------------------
@sand-alert-buttons-margin-top: 180px;
@sand-alert-max-buttons-margin-top: 300px;
@sand-alert-fullscreen-button-spacing: 60px;
@sand-alert-fullscreen-image-spacing: 30px;
@sand-alert-fullscreen-max-width: 2028px;
@sand-alert-overlay-button-spacing: 30px;
@sand-alert-overlay-buttons-margin: 0 0 0 126px; // If this changes, update `overflow` computed value from Alert.js
@sand-alert-overlay-noimage-text-gap: 30px;
@sand-alert-overlay-image-text-gap: @sand-alert-overlay-noimage-text-gap + 18px;
@sand-alert-overlay-text-button-gap: (198px - .extract(@sand-alert-overlay-buttons-margin, left)[] - .extract(@sand-button-margin, right)[]);
@sand-alert-overlay-content-width: 1200px; // If this changes, update `overflow` computed value from Alert.js
@sand-alert-overlay-image-margin: 0;
@sand-alert-overlay-margin-bottom: 360px;
@sand-alert-overlay-padding-top-bottom: 60px;
@sand-alert-overlay-padding-left: 60px;
@sand-alert-overlay-padding-right: (90px - .extract(@sand-button-margin, right)[]);
@sand-portrait-alert-overlay-noimage-content-width: 1020px;
@sand-portrait-alert-overlay-content-width: 822px;
@sand-portrait-alert-overlay-buttons-margin: 0 0 0 78px;
@sand-portrait-alert-overlay-text-button-gap: (150px - .extract(@sand-portrait-alert-overlay-buttons-margin, left)[] - .extract(@sand-button-margin, right)[]);

// AlertImage
// ---------------------------------------
@sand-alert-image-thumbnail-width: 450px;
@sand-alert-image-thumbnail-height: 252px;
@sand-alert-image-icon-size: 240px;
@sand-alert-image-icon-border-radius: 12px;

// BodyText
// ---------------------------------------
@sand-bodytext-margin: 0 @sand-component-spacing @sand-body-font-size @sand-component-spacing;
@sand-bodytext-padding: 0;

// Button
// ---------------------------------------
@sand-button-border-width: 6px;
@sand-button-bg-opacity: 1;
@sand-button-transparent-bg-opacity: 0;
@sand-button-transparent-selected-bg-opacity: 1;
@sand-button-margin: 0 @sand-component-spacing;
@sand-button-focusexpand-margin: 6px .extract(@sand-button-margin, right)[]; // 6px provides enough space for the expanded focus state
@sand-button-h-padding: 60px;
@sand-button-with-icon-h-padding: @sand-spotlight-outset;
@sand-button-height-large: 192px;
@sand-button-height: 144px;
@sand-button-icon-h-margin: 30px;
@sand-button-icon-margin-end: @sand-button-icon-h-margin;
@sand-button-icon-margin-start: 0;
@sand-button-icon-padding: 0 ((@sand-button-height - @sand-icon-large-size) / 2);
@sand-button-icon-position-after-margin-end: @sand-button-icon-margin-start;
@sand-button-icon-position-after-margin-start: @sand-button-icon-margin-end;
@sand-button-icon-position-after-small-margin-end: 0;
@sand-button-icon-position-after-small-margin-start: @sand-button-icon-small-margin-end;
@sand-button-icon-small-h-margin: @sand-button-icon-h-margin;
@sand-button-icon-small-margin-end: @sand-button-icon-small-h-margin;
@sand-button-icon-small-margin-start: 0;
@sand-button-icon-small-padding: 0 ((@sand-button-small-height - @sand-icon-small-size) / 2);
@sand-button-max-width: 900px;
@sand-button-min-width: 540px; // If this changes, update `overflow` computed value from Alert.js
@sand-button-focusexpand-focus-bg-transform: scale(1.05);
@sand-button-focusexpand-pressed-bg-transform: scale(1.02);
@sand-button-focus-duration: @sand-spotlight-focus-animation-duration;
@sand-button-small-margin: @sand-button-margin;
@sand-button-small-focusexpand-margin: @sand-button-focusexpand-margin;
@sand-button-small-h-padding: 48px;
@sand-button-small-height-large: 144px;
@sand-button-small-height: 108px;
@sand-button-small-max-width: @sand-button-max-width;
@sand-button-small-min-width: 300px;
@sand-button-small-focusexpand-focus-bg-transform: scale(1.1);
@sand-button-small-focusexpand-pressed-bg-transform: scale(1.04);
@sand-button-colordot-bottom: 18px;
@sand-button-colordot-border-radius: 6px;
@sand-button-colordot-width: 60px;
@sand-button-colordot-height: 12px;
@sand-button-colordot-h-margin: 24px;
@sand-button-colordot-padding-start: (@sand-button-h-padding / 2);
@sand-button-small-colordot-bottom: 12px;
@sand-button-small-colordot-width: 48px;
@sand-button-small-colordot-padding-start: 30px;
@sand-button-icon-only-colordot-width: 66px;
@sand-button-icon-only-colordot-height: 9px;
@sand-button-collapse-duration: 300ms;
@sand-button-collapsable-icon-margin: 0 24px;

// Checkbox
// ---------------------------------------
@sand-checkbox-border-radius: @sand-common-circular-corners;
@sand-checkbox-border-width: 4px;
@sand-checkbox-container-position: ((@sand-icon-tiny-size - 120px) / 2);  // Container's total dimensions should be `120px` defined in the GUI spec
@sand-checkbox-container-border-radius: @sand-item-border-radius;

// ContextualMenu
// ---------------------------------------
@sand-contextualmenu-container-padding: 36px 0;
@sand-contextualmenu-max-items: 5;
@sand-contextualmenu-innercontainer-max-height: @sand-contextualmenu-max-items * @sand-item-small-height;
@sand-contextualmenu-max-height: (@sand-contextualmenu-innercontainer-max-height + .extract(@sand-contextualmenu-container-padding, top)[] + .extract(@sand-contextualmenu-container-padding, bottom)[]);
@sand-contextualmenu-large-width: 960px;
@sand-contextualmenu-small-width: 612px;

// ContextualPopup
// ---------------------------------------
@sand-contextualpopup-padding: 36px 0;
@sand-contextualpopup-arrow-height: 60px;
@sand-contextualpopup-arrow-width: 60px;
@sand-contextualpopup-offset-overlap: 36px;	// used as inverse of small to cause overlap
@sand-contextualpopup-offset-small: 18px;

// Dropdown
// ---------------------------------------
@sand-dropdown-margin: 0 @sand-spotlight-outset; // this extra margin used to align dropdown container with the outer element
@sand-dropdown-min-width: 300px;
@sand-dropdown-tiny-width: 480px;
@sand-dropdown-small-width: @sand-button-min-width;
@sand-dropdown-medium-width: 690px;
@sand-dropdown-large-width: 780px;
@sand-dropdown-x-large-width: 1050px;
@sand-dropdown-huge-width: 1380px;
@sand-dropdown-list-tiny-width: (@sand-dropdown-tiny-width - @sand-button-border-width);
@sand-dropdown-list-small-width: (@sand-dropdown-small-width - @sand-button-border-width);
@sand-dropdown-list-medium-width: (@sand-dropdown-medium-width - @sand-button-border-width);
@sand-dropdown-list-large-width: (@sand-dropdown-large-width - @sand-button-border-width);
@sand-dropdown-list-x-large-width: (@sand-dropdown-x-large-width - @sand-button-border-width);
@sand-dropdown-list-huge-width: (@sand-dropdown-huge-width - @sand-button-border-width);
@sand-dropdown-max-items: 5;
@sand-dropdown-list-min-width: @sand-dropdown-min-width;
@sand-dropdown-list-max-height: (@sand-dropdown-max-items * @sand-item-small-height + @sand-item-shadow-height);
@sand-dropdown-list-max-height-large: (@sand-dropdown-max-items * @sand-item-small-height-large + @sand-item-shadow-height);
@sand-dropdown-title-font-style: italic;
@sand-non-italic-dropdown-title-font-style: normal;

// FixedPopupPanels
// ---------------------------------------
@sand-fixedpopuppanels-width: 1140px;
@sand-fixedpopuppanels-half-width: 1716px;
@sand-fixedpopuppanels-margin: .extract(@sand-popup-position-left-margin, top)[] .extract(@sand-popup-position-left-margin, right)[];
@sand-fixedpopuppanels-border-radius: @sand-popup-border-radius;
@sand-fixedpopuppanels-panel-padding: 0;
@sand-fixedpopuppanels-panel-body-padding: @sand-panel-body-padding-top (108px - (@sand-component-spacing + @sand-spotlight-outset)) (78px - @sand-component-spacing-bottom);

// FlexiblePopupPanels
// ---------------------------------------
@sand-flexiblepopuppanels-min-width: 1140px;
@sand-flexiblepopuppanels-margin: 108px 0;
@sand-flexiblepopuppanels-padding: 0 (@sand-component-spacing + @sand-button-small-height) (36px + (18px * 1.75));  // Math in an attempt to use the shadow values to calculate the proper margin size so no shadow clipping occurs.
@sand-flexiblepopuppanels-panel-border-radius: @sand-popup-border-radius;
@sand-flexiblepopuppanels-panel-margin: 0 12px;
@sand-flexiblepopuppanels-panel-padding: 60px (60px - @sand-component-spacing);
@sand-flexiblepopuppanels-header-padding: @sand-button-height + (@sand-component-spacing * 2);
@sand-flexiblepopuppanels-navbutton-margin: 12px;
@sand-flexiblepopuppanels-small-width: 600px;
@sand-flexiblepopuppanels-large-width: 1320px;

// FormCheckboxItem
// ---------------------------------------
@sand-formcheckboxitem-checkbox-margin-end: abs(.extract(@sand-checkbox-container-position, right)[]); // checkbox container is a negative value, but we're only interested in positive margin values for this. It's also currently just one value, but could be more in the future, so we'll extract the "right" value.

// Header
// ---------------------------------------
@sand-header-slotabove-margin: 0 -@sand-component-spacing 30px -@sand-component-spacing; // Negative margins accomodate the component-spacing
@sand-header-slotbelow-margin: 18px -@sand-component-spacing 0 -@sand-component-spacing; // Negative margins accomodate the component-spacing
@sand-header-subtitle-height: (@sand-heading-subtitle-font-size * @sand-heading-subtitle-line-height);
// STOP! READ THE FOLLOWING BEFORE EDITING.
//
// Panel imposes no padding so Header is fully responsible for its own positioning. The code below
// reads values out of the guide definition library and uses them as the basis for calculations when
// determining the correct padding (positioning) for Header. The GUI guide differs in its
// line-height vs the framework's line-height due to the framework accounting for tall-glyphs during
// localization. The visual result of the below calculations is expected to be a match with the
// guide. Inspecting the Header's padding will result in intentional different values than the
// values in the guide.
@sand-header-standard-margin: 0;
@sand-header-standard-padding:
	(
		.extract(#guide.header[standard-padding], top)[]
		- #guide.get-edge-size-difference(
			#guide.header[standard-title-line-height],
			@sand-heading-title-font-size,
			@sand-heading-title-line-height
		)[@result]
	)
	.extract(#guide.header[standard-padding], right)[]
	.extract(#guide.header[standard-padding], bottom)[]
	.extract(#guide.header[standard-padding], left)[];
@sand-header-standard-title-padding: 0;
@sand-header-standard-subtitle-margin:
	(
		.extract(#guide.header[standard-titles-gap], top)[]
		- #guide.get-edge-size-difference(
			#guide.header[standard-title-line-height],
			@sand-heading-title-font-size,
			@sand-heading-title-line-height
		)[@result]
		- #guide.get-edge-size-difference(
			#guide.header[standard-subtitle-line-height],
			@sand-heading-subtitle-font-size,
			@sand-heading-subtitle-line-height
		)[@result]
	)
	0 0 0;
@sand-header-compact-margin: 0;
@sand-header-compact-padding:
	(
		.extract(#guide.header[compact-padding], top)[]
		- #guide.get-edge-size-difference(
			#guide.header[compact-title-line-height],
			@sand-header-compact-title-font-size,
			@sand-heading-title-line-height
		)[@result]
	)
	.extract(#guide.header[compact-padding], right)[]
	(
		.extract(#guide.header[compact-padding], bottom)[]
		- #guide.get-edge-size-difference(
			#guide.header[compact-title-line-height],
			@sand-header-compact-title-font-size,
			@sand-heading-title-line-height
		)[@result]
	)
	.extract(#guide.header[compact-padding], left)[];
@sand-header-compact-title-padding: 0;
@sand-header-compact-subtitle-padding: 0;
@sand-header-mini-margin:
	6px
	@sand-component-spacing
	.extract(#guide.header[mini-padding], bottom)[]
	@sand-component-spacing; // 6px top to account for a focused button, so it doesn't clip.
@sand-header-mini-margin: #guide.header[mini-margin];
@sand-header-mini-padding:
	(
		.extract(#guide.header[mini-padding], top)[]
		- #guide.get-edge-size-difference(
			#guide.header[mini-title-line-height],
			@sand-header-mini-title-font-size,
			@sand-heading-title-line-height
		)[@result]
	)
	.extract(#guide.header[mini-padding], right)[]
	(
		.extract(#guide.header[mini-padding], bottom)[]
		- #guide.get-edge-size-difference(
			#guide.header[mini-title-line-height],
			@sand-header-mini-title-font-size,
			@sand-heading-title-line-height
		)[@result]
	)
	.extract(#guide.header[mini-padding], left)[];
@sand-header-wizard-margin: 0;
@sand-header-wizard-padding:
	(
		.extract(#guide.header[wizard-padding], top)[]
		- #guide.get-edge-size-difference(
			#guide.header[wizard-title-line-height],
			@sand-header-wizard-title-font-size,
			@sand-heading-title-line-height
		)[@result]
	)
	.extract(#guide.header[wizard-padding], right)[]
	.extract(#guide.header[wizard-padding], bottom)[]
	.extract(#guide.header[wizard-padding], left)[]; // 66px comes from the GUI guide, as the distance from the bottom of the 2-line subtitle to the top of the content area. We must subtract the padding-top of panel.body to get the total spacing to match the guide.
@sand-header-wizard-nosubtitle-padding-bottom: 42px;
@sand-header-wizard-title-padding: 0;
@sand-header-wizard-subtitle-padding: 0;
@sand-header-wizard-subtitle-lines: 2;
@sand-header-back-container-width: (@sand-button-small-height + @sand-button-icon-small-h-margin);

// Heading
// ---------------------------------------
@sand-heading-border-width: 1px;
@sand-heading-margin: 0 @sand-component-spacing (1.5 * @sand-spotlight-outset) @sand-component-spacing;
@sand-heading-padding: 0 0 18px 0;
@sand-heading-spacing-title: 0;
@sand-heading-spacing-subtitle: 0;
@sand-heading-spacing-large: 78px;
@sand-heading-spacing-medium: 42px;
@sand-heading-spacing-small: 18px;

// HolePunchScrim
// ---------------------------------------

// Icon
// ---------------------------------------
@sand-icon-large-size: 108px;
@sand-icon-medium-size: 90px;
@sand-icon-small-size: 78px;
@sand-icon-tiny-size: 60px;
@sand-icon-margin: 24px;
@sand-icon-large-size-large: (@sand-icon-large-size * 1.2);
@sand-icon-small-size-large: (@sand-icon-small-size * 1.2);

// IconItem
// ---------------------------------------
@sand-iconitem-border-radius: 48px;
@sand-iconitem-border-style: solid;
@sand-iconitem-border-width: 4px;
@sand-iconitem-focus-transform: scale(1.2);
@sand-iconitem-font-weight: 600;
@sand-iconitem-icon-margin: @sand-icon-margin @sand-icon-margin 12px;
@sand-iconitem-label-line-height: 48px;
@sand-iconitem-label-padding: 0 12px;
@sand-iconitem-title-line-height: 42px;
@sand-iconitem-title-margin: 18px 0 0 0;

// ImageItem
// ---------------------------------------
@sand-imageitem-margin: @sand-item-margin;
@sand-imageitem-border-radius: 12px;
@sand-imageitem-image-border-width: 6px;
@sand-imageitem-caption-line-height: 72px;
@sand-imageitem-label-line-height: 54px;
@sand-imageitem-label-margin-top: 6px;
@sand-imageitem-placeholder-caption-height: 102px;
@sand-imageitem-placeholder-label-height: 66px;
@sand-imageitem-horizontal-padding: 30px;
@sand-imageitem-horizontal-image-width: 180px;
@sand-imageitem-horizontal-image-height: @sand-imageitem-horizontal-image-width;
@sand-imageitem-horizontal-image-margin: 0 48px 0 0;
@sand-imageitem-horizontal-image-margin-rtl: 0 0 0 48px;
@sand-imageitem-horizontal-selection-icon-size: 90px;
@sand-imageitem-vertical-padding: 24px 24px 30px;
@sand-imageitem-vertical-full-image-padding: 84px; // 48px(for expanding) + 36px(for showing shadow)
@sand-imageitem-vertical-captions-margin-top: 30px;
@sand-imageitem-vertical-label-height: 60px;
@sand-imageitem-vertical-focus-image-transform: scale(1.2);
@sand-imageitem-vertical-image-icon-margin: 0 24px 0 0;
@sand-imageitem-vertical-image-icon-size: 132px;
@sand-imageitem-vertical-selection-icon-size: 120px;

// Input
// ---------------------------------------
@sand-input-popup-component-v-spacing: 42px;
@sand-input-numbercell-border-radius: 12px;
@sand-input-fullscreen-padding: (210px - .extract(@sand-popup-padding, top)[]) (264px - .extract(@sand-popup-padding, right)[]) (246px - .extract(@sand-popup-padding, bottom)[]) (264px - .extract(@sand-popup-padding, left)[]);
@sand-input-fullscreen-numbercell-width: 246px;
@sand-input-fullscreen-numbercell-height: 300px;
@sand-input-fullscreen-numbercell-margin: 0 18px;
@sand-input-fullscreen-numberfield-width: 1164px;
@sand-input-fullscreen-numberfield-height: 168px;
@sand-input-fullscreen-numberfield-margin: auto;
@sand-input-fullscreen-numberfield-padding: 0 0.5em;
@sand-input-fullscreen-numberfield-letter-spacing: 48px;
@sand-input-fullscreen-textfield-width: 1440px;
@sand-input-fullscreen-keypad-margin: 270px auto 0 auto;
@sand-input-fullscreen-keypad-key-margin: 0;
@sand-input-fullscreen-buttonarea-margin: 0;
@sand-input-fullscreen-inputarea-margin: 222px 0 0 0;
@sand-input-fullscreen-invalid-tooltip-width: 3240px;
@sand-input-fullscreen-back-button-top: 132px;
@sand-input-fullscreen-back-button-start: 96px;
@sand-portrait-input-fullscreen-keypad-width: 702px;
@sand-portrait-input-fullscreen-keypad-width-large: 846px;
@sand-portrait-input-fullscreen-keypad-margin: 600px auto 0 auto;
@sand-portrait-input-fullscreen-keypad-key-margin: 45px;
@sand-portrait-input-fullscreen-text-inputarea-margin: 672px 0 0 0;
@sand-portrait-input-fullscreen-number-inputarea-margin: 96px 0 0 0;
@sand-input-overlay-padding: (90px - .extract(@sand-popup-padding, top)[]) (90px - .extract(@sand-popup-padding, right)[]) (90px - .extract(@sand-popup-padding, bottom)[]) (90px - .extract(@sand-popup-padding, left)[]);
@sand-input-overlay-inputarea-margin: 96px 0 0 0;
@sand-input-overlay-numbercell-width: 174px;
@sand-input-overlay-numbercell-height: 210px;
@sand-input-overlay-numbercell-margin: 0 12px;
@sand-input-overlay-numberfield-width: 738px;
@sand-input-overlay-numberfield-height: 132px;
@sand-input-overlay-numberfield-margin: @sand-input-fullscreen-numberfield-margin;
@sand-input-overlay-numberfield-padding: @sand-input-fullscreen-numberfield-padding;
@sand-input-overlay-numberfield-letter-spacing: 36px;
@sand-input-overlay-keypad-margin: 132px auto 0 auto;
@sand-input-overlay-keypad-width: ((@sand-component-spacing + @sand-button-height + @sand-component-spacing) * 3);
@sand-input-overlay-keypad-width-large: ((@sand-component-spacing + (@sand-button-height-large) + @sand-component-spacing) * 3);
@sand-input-overlay-buttonarea-margin: 84px 0 0 0;
@sand-input-overlay-submitbutton-margin: 84px auto 0 auto;
@sand-input-overlay-invalid-tooltip-width: 738px;
@sand-input-overlay-textfield-width: 1164px;
@sand-input-overlay-back-button-top: 9px;
@sand-input-overlay-back-button-start: -42px;
@sand-input-overlay-title-margin: 0 144px (@sand-heading-spacing-small - @sand-heading-border-width) 144px;
@sand-input-invalid-tooltip-margin-top: @sand-inputfield-invalid-tooltip-margin-top;

// InputField
// ---------------------------------------
@sand-inputfield-margin: 0 @sand-component-spacing;
@sand-inputfield-padding: 0 @sand-inputfield-icon-spacing;
@sand-inputfield-text-indent: 0.2em;
@sand-inputfield-bg-opacity: 0.2;
@sand-inputfield-border-radius: @sand-inputfield-border-width;
@sand-inputfield-border-width: 12px;
@sand-inputfield-icon-spacing: 30px;
@sand-inputfield-invalid-tooltip-margin-top: 30px;
@sand-inputfield-height: 168px;
@sand-inputfield-small-height: 132px;
@sand-inputfield-highlight-height: 100%;
@sand-inputfield-highlight-max-width: 756px;
@sand-inputfield-highlight-small-max-width: 714px;

// Item
// ---------------------------------------
@sand-item-height: 156px;
@sand-item-height-large: @sand-item-height;
@sand-item-shadow-height: @sand-spotlight-focus-shadow-height;
@sand-item-withlabel-height: 240px;
@sand-item-vertical-padding: 6px;
@sand-item-inline-max-width: 480px;
@sand-item-border-radius: 12px;
@sand-item-slotafter-spacing: 54px;
@sand-item-slotbefore-spacing: 54px;
@sand-item-margin: 0 @sand-component-spacing @sand-component-spacing-bottom @sand-component-spacing;
@sand-item-small-height: 126px;
@sand-item-small-height-large: @sand-item-small-height;
@sand-item-small-withlabel-height: 210px;

// Keyguide
// ---------------------------------------
@sand-keyguide-colordot-height: 12px;
@sand-keyguide-colordot-margin: 0 ((@sand-icon-small-size - @sand-keyguide-colordot-width) / 2); // Keep this centered by adapting its margins
@sand-keyguide-colordot-width: 60px;
@sand-keyguide-colordot-border-radius: 6px;
@sand-keyguide-icon-margin-right: 48px;
@sand-keyguide-padding: 24px 0;
@sand-keyguide-position-bottom: 120px;
@sand-keyguide-position-right: 150px;
@sand-keyguide-width: 750px;
@sand-keyguide-item-height: 120px;

// MediaOverlay
// ---------------------------------------
@sand-mediaoverlay-border-radius: 12px;
@sand-mediaoverlay-caption-margin-top: 30px;
@sand-mediaoverlay-caption-margin-bottom: @sand-mediaoverlay-caption-margin-top - @sand-mediaoverlay-padding;
@sand-mediaoverlay-font-weight: 500;
@sand-mediaoverlay-line-height: 1.3em;
@sand-mediaoverlay-padding: 24px;
@sand-mediaoverlay-progressbar-margin: 0 6px 6px 6px;
@sand-mediaoverlay-textlayout-margin: 24px 60px;
@sand-mediaoverlay-width: 642px;

// MediaPlayer
// ---------------------------------------
@sand-mediaplayer-button-client-padding: 0 18px;
@sand-mediaplayer-button-border-radius: 96px;
@sand-mediaplayer-button-height: 180px;
@sand-mediaplayer-controls-actionguide-padding-top: 78px;
@sand-mediaplayer-controls-actionguide-time: 0.2s;		// Length of the animation
@sand-mediaplayer-controls-button-margin-start: 90px;
@sand-mediaplayer-controls-morebuttons-margin-start: 228px;
@sand-mediaplayer-controls-moreComponents-margin-top: 42px;
@sand-mediaplayer-controls-moreComponents-time: 0.3s;		// Length of the animation
@sand-mediaplayer-slider-height: 12px;
@sand-mediaplayer-slider-knob-resting-state-scale: @sand-slider-knob-resting-state-scale;
@sand-mediaplayer-slider-knob-size: 48px;
@sand-mediaplayer-slider-tap-area: 162px;

// PageViews
// ---------------------------------------
@sand-pageviews-navigation-button-area-width: 216px;
@sand-pageviews-steps-area-min-height: 132px;
@sand-pageviews-dot-steps-area-min-height: @sand-pageviews-steps-area-min-height;
@sand-pageviews-full-steps-area-min-height: @sand-pageviews-steps-area-min-height;
@sand-pageviews-full-steps-position-bottom: 0;
@sand-pageviews-number-navigation-button-area-width: 108px;
@sand-pageviews-number-steps-area-min-height: 252px;
@sand-pageviews-number-steps-number-width: 126px;
@sand-pageviews-number-steps-separator-width: 60px;

// Panels
// ---------------------------------------
@sand-panel-padding: 0;
@sand-panel-body-padding-top: .extract(#guide.panel[body-padding], top)[]; // Used in this file only, for consistency
@sand-panel-body-padding: @sand-panel-body-padding-top (.extract(#guide.panel[body-padding], right)[] - @sand-component-spacing);

// Picker
// ----------------------------------------
@sand-picker-title-margin-left: .extract(@sand-heading-margin, left)[] + .extract(@sand-button-margin, left)[] + .extract(@sand-button-icon-small-padding, left)[];
@sand-picker-title-max-width: 480px;
@sand-picker-margin: 0 @sand-component-spacing;
@sand-picker-item-padding: 0 @sand-spotlight-outset;
@sand-picker-joined-vertical-border-radius: 24px;
@sand-picker-focus-duration: @sand-spotlight-focus-animation-duration;
@sand-picker-value-height: (@sand-picker-font-size * @sand-picker-line-height); // Determine the height of the item given the font size and relative (em) line height.
@sand-picker-joined-value-height: (@sand-picker-joined-font-size * @sand-picker-line-height); // Determine the height of the item given the font size and relative (em) line height.
@sand-picker-vertical-height: 362px;
@sand-picker-joined-horizontal-border-radius: 960px;
@sand-picker-joined-horizontal-height: 210px;
@sand-picker-joined-horizontal-padding: 0 @sand-icon-small-size;
@sand-picker-joined-horizontal-value-line-height: (@sand-picker-joined-horizontal-height - 30px);
@sand-picker-small-value-width: (@sand-icon-large-size + (@sand-spotlight-outset * 3));
@sand-picker-medium-value-width: 360px;
@sand-picker-large-value-width: 696px;
@sand-picker-indicator-width: 24px;
@sand-picker-indicator-height: 24px;
@sand-picker-indicator-border-radius: @sand-picker-indicator-width;
@sand-picker-indicator-inactive-scale: 0.75;
@sand-picker-indicator-active-scale: 1;
@sand-picker-indicator-margin: 21px 12px 0 12px;
// Math to calculate the difference in GUI guide spec for the item and the DOM size for the item.
// Divide by 2 to get the difference of just one edge from the corrosponding edge,
// since the two are center aligned vertically.
@sand-picker-joined-horizontal-vedge-gap: ((@sand-picker-joined-horizontal-height - @sand-picker-joined-horizontal-value-line-height) / 2);
// Math to find the margin-bottom of the item given the height of the item and the
// desired distance from the top.
@sand-picker-joined-horizontal-value-offset: ((
	(48px - @sand-picker-joined-horizontal-vedge-gap) - // 48px - 15px = 33px
	((@sand-picker-joined-value-height - 78px) / 2) // (78px - 99px / 2) = 10.5px
) * 2);

// @sand-picker-indicator-bottom: -(@sand-picker-joined-horizontal-height - 30px - @sand-picker-joined-horizontal-value-line-height);  // Yes, this looks awkward, but it allows us to define how far from the bottom edge of the picker the dots should be, rather than needing to manually account for the hieight or vertical-centering of the text. Just set the number to a new value to update.

// Popup
// ---------------------------------------
@sand-popup-padding: 48px 72px;
@sand-popup-border-radius: 24px;
// Remove the margin on the leading edge so we're not wasting some of our transition frames on animating empty space, but also account for the shadow.
@sand-popup-position-top-margin: 150px 120px 78px 120px; // 78px is the amount of space the shadow renders onto, so it's not clipped.
@sand-popup-position-right-margin: 120px 60px 120px @sand-component-spacing;
@sand-popup-position-bottom-margin: 0 120px 150px 120px;
@sand-popup-position-left-margin: 120px @sand-component-spacing 120px 60px;

// PopupTabLayout
// ---------------------------------------
@sand-popuptablayout-margin: 120px 60px;
@sand-popuptablayout-tabs-padding: @sand-component-spacing 0 (@sand-component-spacing - @sand-tablayout-tab-vertical-margin-bottom) 0;
@sand-popuptablayout-tabs-content-spacing: 36px;
@sand-popuptablayout-tabs-content-border-radius: @sand-popup-border-radius;
@sand-popuptablayout-content-margin: 0;
@sand-popuptablayout-panel-body-padding: @sand-panel-body-padding-top (108px - @sand-component-spacing - @sand-spotlight-outset) (78px - @sand-component-spacing-bottom);

// ProgressBar
// ---------------------------------------
@sand-progressbar-bar-thickness: 12px;
@sand-progressbar-bar-border-radius: (@sand-progressbar-bar-thickness / 2);
@sand-progressbar-margin: @sand-component-spacing;
@sand-progressbar-vertical-min-height: 240px;
@sand-progressbar-radial-size: 72px;
@sand-progressbar-radial-thickness: 9px;
@sand-progressbar-anchor-width: 6px;
@sand-progressbar-anchor-height: 48px;
@sand-progressbar-tooltip-offset: 30px;
@sand-progressbar-tooltip-above-offset: (@sand-progressbar-tooltip-offset + @sand-progressbar-bar-thickness);
@sand-progressbar-tooltip-below-offset: @sand-progressbar-tooltip-above-offset;
@sand-progressbar-tooltip-before-offset: @sand-progressbar-tooltip-below-offset;
@sand-progressbar-tooltip-after-offset: @sand-progressbar-tooltip-above-offset;
@sand-progressbar-tooltip-radial-offset: @sand-progressbar-tooltip-above-offset;

// ProgressButton
// ---------------------------------------
@sand-progressbutton-icon-font-size: (@sand-icon-tiny-size / 2);

// QuickGuidePanels
// ---------------------------------------
@sand-quickguidepanels-close-button-margin-top: (
	.extract(#guide.header[standard-padding], top)[]
	- #guide.get-edge-size-difference(
		#guide.header[standard-title-line-height],
		@sand-heading-title-font-size,
		@sand-heading-title-line-height
	)[@result]
) + 10px;
@sand-quickguidepanels-close-button-margin-end: 150px;
@sand-quickguidepanels-navigation-button-margin: 0 12px;
@sand-quickguidepanels-container-margin-top: 828px;
@sand-quickguidepanels-steps-margin-top: 90px;
@sand-quickguidepanels-steps-min-height: 48px;

// RadioItem
// ---------------------------------------
@sand-radioitem-indicator-border-width: 4px; // ### Exceptional Case ###
	// 4px, 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 39.9996px, which can be treated by 38px or 40px, depending on the case.
@sand-radioitem-indicator-border-radius: @sand-common-circular-corners;

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

// Scrollbar
// ---------------------------------------
@sand-scrollbar-padding: 30px;
@sand-scrollbar-size: 36px;
@sand-scrollbar-focusable-size: 60px;
@sand-scrollbar-track-margin: 12px;
@sand-scrollbar-track-focusable-margin: 24px;
@sand-scrollbar-track-width: 12px;
@sand-scrollbar-track-border-radius: 12px;
@sand-scrollbar-thumb-border-radius: 12px;
@sand-scrollbar-thumb-focus-width: 30px;
@sand-scrollbar-thumb-focus-left: -9px;
@sand-scrollbar-thumb-focus-border-radius: 12px;
@sand-scrollbar-thumb-focus-box-shadow: 0 36px 36px;
@sand-scrollbar-thumb-focus-direction-indicator-width: 18px;
@sand-scrollbar-thumb-focus-direction-indicator-height: 12px;
@sand-scrollbar-thumb-focus-direction-indicator-top: 6px;
@sand-scrollbar-thumb-focus-direction-indicator-left: 6px;

// Scroller
// ---------------------------------------
@sand-scroll-fade-out-size: 48px;
@sand-scroll-fade-out-offset: 24px;
@sand-scroll-vertical-fade-out-padding: @sand-scroll-fade-out-size 0;
@sand-scroll-horizontal-fade-out-padding: 0 @sand-scroll-fade-out-size;
@sand-scroll-hover-area-size: 120px;
@sand-scroll-focusablebody-padding: 72px 48px 72px 90px;
@sand-scroll-focusablebody-padding-rtl: 72px 90px 72px 48px;
@sand-scroll-focusablebody-focus-border-radius: 12px;

// Slider
// ---------------------------------------
@sand-slider-bar-height: @sand-progressbar-bar-thickness;
@sand-slider-knob-width: 48px;
@sand-slider-knob-width-large: @sand-slider-knob-width;
@sand-slider-knob-height: @sand-slider-knob-width;
@sand-slider-knob-height-large: @sand-slider-knob-height;
@sand-slider-tooltip-offset: (@sand-slider-knob-height / 2);
@sand-slider-knob-resting-state-scale: 0.75;
@sand-slider-tooltip-above-offset: (@sand-progressbar-bar-thickness / 2);
@sand-slider-tooltip-below-offset: (@sand-progressbar-bar-thickness / -2);
@sand-slider-tooltip-before-offset: (@sand-progressbar-bar-thickness / 2);
@sand-slider-tooltip-after-offset: (@sand-progressbar-bar-thickness / -2);

// Spinner
// ---------------------------------------
@sand-spinner-size: 96px;
@sand-spinner-small-size: 48px;
@sand-spinner-small-size-large: 84px;
@sand-spinner-time: 1.25s;		// Length of the spinner animation
@sand-spinner-line-width: 6px;
@sand-spinner-small-line-width: 6px;
@sand-spinner-line-margin: 24px;
@sand-spinner-small-line-margin: 12px;
@sand-spinner-font-weight: bold;

// Steps
// ---------------------------------------
@sand-steps-step-number-font-weight: 600;
@sand-steps-margin: 0;
@sand-steps-step-margin: 0 @sand-component-spacing;
@sand-steps-step-past-opacity: 1;
@sand-steps-step-current-opacity: 1;
@sand-steps-step-future-opacity: 0.5;
@sand-steps-step-highlight-current-only-future-opacity: 1;
@sand-steps-pageindicator-size: 18px;
@sand-steps-pageindicator-margin: 0 15px;
@sand-steps-pageindicator-border-radius: 999px;
@sand-steps-pageindicator-current-size: 30px;
@sand-steps-pageindicator-current-margin: 0 9px;

// Switch
// ---------------------------------------
@sand-switch-border-radius: 960px;
@sand-switch-height: 60px;
@sand-switch-width: 114px;
@sand-switch-icon-height: @sand-switch-height;
@sand-switch-icon-line-height: @sand-switch-height;
@sand-switch-height-large: @sand-icon-small-size-large;
@sand-switch-width-large: 162px;
@sand-switch-icon-height-large: @sand-icon-small-size-large;
@sand-switch-icon-line-height-large: @sand-switch-icon-height-large;
@sand-switch-spottable-margin: 18px (@sand-component-spacing + 30px);
@sand-switch-spottable-border-radius: @sand-item-border-radius;
@sand-switch-spottable-position-top-bottom: -18px; // These correlate with the numbers from 'margin" above
@sand-switch-spottable-position-left-right: -30px; // These correlate with the numbers from 'margin" above

// TabLayout
// ---------------------------------------
@sand-tablayout-collapse-duration: 250ms;
@sand-tablayout-vertical-content-margin-top: 0;
@sand-tablayout-horizontal-content-margin-top: 96px;
@sand-tablayout-horizontal-tabs-margin: 0 @sand-component-spacing;
@sand-tablayout-tab-vertical-button-height: 156px;
@sand-tablayout-tab-vertical-margin-bottom: 24px;
@sand-tablayout-tab-horizontal-button-height: 132px;
@sand-tablayout-tab-horizontal-margin: 0;
@sand-tablayout-tab-horizontal-padding: 0;
@sand-tablayout-tab-horizontal-border-width: ~"calc(" 6px ~"/ 3)"; // foolishness to get a correctly scalable 2px at 4k
@sand-tablayout-tab-horizontal-selected-border-width: 6px;

// Tooltip
// ---------------------------------------
@sand-tooltip-font-weight: 600;
@sand-tooltip-transparent-font-weight: normal;
@sand-tooltip-offset: 24px;
@sand-tooltip-transparent-label-offset: 0px;
@sand-tooltip-arrow-offset: 0;
@sand-tooltip-point-width: 25px; // actual value is 24px. +1px to ensure no gaps
@sand-tooltip-point-height: 25px; // actual value is 24px. +1px to ensure no gaps
@sand-tooltip-border-radius: 12px;
@sand-tooltip-label-height: 1.5em;
@sand-tooltip-padding: (15px - ((81px - 63px) / 2)) 48px; // Including the math for the difference in measured height of the node (81px) vs the GUI spec (63px) (we mismatch due to i18n line-height guidelines). The GUI Guide also says 15px padding, so we include that in the math for clarity.
@sand-tooltip-margin-offset: 18px; // GUI for the length of the arrow
@sand-tooltip-marquee-width: 600px;

// Video
// ---------------------------------------
@sand-video-back-button-left:                      150px;
@sand-video-back-button-top:                       114px;
@sand-video-slider-tooltip-arrow-border-left-right: 18px;
@sand-video-slider-tooltip-arrow-border-top:       24px;
@sand-video-slider-tooltip-position-bottom:        42px;
@sand-video-slider-tooltip-shift-position-bottom:  @sand-video-slider-tooltip-position-bottom + @sand-video-slider-tooltip-arrow-border-top;
@sand-video-slider-tooltip-margin-bottom:          6px;
@sand-video-slider-tooltip-font-size:              48px;
@sand-video-slider-tooltip-font-weight:            normal;
@sand-video-slider-tooltip-line-height:            72px;
@sand-video-slider-tooltip-gutter-width:           42px;
@sand-video-slider-tooltip-thumbnail-border-width: 6px;
@sand-video-slider-tooltip-thumbnail-width:  426px;
@sand-video-slider-tooltip-thumbnail-height: 240px;
@sand-video-slider-tooltip-deactivated-thumbnail-opacity: 0.5;
@sand-video-feedback-icon-font-size:               1.25em;
@sand-video-feedback-mini-font-weight:             normal;
@sand-video-feedback-mini-font-style:              normal;
@sand-video-feedback-mini-position-top:            60px;
@sand-video-feedback-mini-position-left:           60px;
@sand-video-feedback-mini-padding-side:            66px;
@sand-video-feedback-mini-font-size:               66px;
@sand-video-feedback-mini-line-height:             120px;
@sand-video-feedback-message-font-weight:          600;
@sand-video-player-badge-text-size:                48px;
@sand-video-player-info-margin:                    0 66px 84px;
@sand-video-player-padding-bottom:                 60px;
@sand-video-player-padding-side:                   84px;
@sand-video-player-title-size:                     78px;

// WizardPanels
// ---------------------------------------
@sand-wizardpanels-content-margin: 0 0 150px 0;
@sand-wizardpanels-footer-margin: 0 0 (102px - @sand-app-keepout) 0;
@sand-wizardpanels-button-icon-text-gap: 54px;