// 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;