// General
$default-margin: 10px;
$default-line-height: 1;
$banner-height: 60px;
$header-line-height: 1.5em;
$spacing: 0.5rem;
$max-z-index: 2147483647;

// Opacity
$transparency-1: 0.9;
$transparency-2: 0.7;
$transparency-3: 0.5;
$transparency-4: 0.3;
$transparency-5: 0.1;
$transparencies: $transparency-1 $transparency-2 $transparency-3 $transparency-4 $transparency-5;

// Breakpoints
$breakpoint-desktop-small: 992px;
$breakpoint-desktop-large: 1600px;

// Border
$border-radius: 2px;
$small-border-radius: 8px;
$big-border-radius: 4px;
$default-border-size: 1px;
$default-border: $default-border-size solid var(--default-border-color);

// Typography
$small-font-size: 12px;
$default-font-size: 14px;
$title-font-size: 16px;
$navigation-section-font-size: 16px;
$medium-title-font-size: 18px;
$big-font-size: 24px;
$big-title-font-size: 32px;
$default-line-height: 16px;
$big-line-height: 21px;
$code-font-size: 14px;
$base-font-family: var(--main-font);
$code-font-family: var(--code-font);
$standard-line-height: 1.35em;
$help-text-font-size: 14px;
$help-text-line-height: 17px;
$text-max-width: $breakpoint-desktop-small;

// Lists
$list-padding: 20px;

// Button
$button-font-size: 16px;
$button-line-height: 24px;
$button-font-weight: var(--main-font-bold);
$button-padding-x: 16px;
$button-padding-y: 8px;
$button-border-width: 1px;
$button-border-radius: 8px;
$button-height: 40px;
$button-margin-width: 10px;
$button-small-font-size: 16px;
$button-small-line-height: 24px;
$button-small-padding-x: 16px;
$button-small-padding-y: 12px;
$button-small-height: 32px;
$button-large-height: 50px;
$button-confirm-icon-width: 15px;
$button-confirm-margin-bottom: 20px;
$button-color-transition: all 0.05s ease-in;

// Checkboxes and radios
$checkbox-size: 18px;
$checkbox-label-margin: 18px;
$checkbox-label-margin-top: 10px;
$checkbox-default-border: solid 2px var(--navy-blue-80);

// Input and textarea
$input-border: 1px solid var(--deprecated-lynch);
$input-height: 34px;
$input-font-size: 14px;
$input-margin: 0 0 15px 0 !default;
$input-padding: 0 !default;
$input-transition: all 0.2s ease !default;
$input-color-transition: color 0.2s ease;
$input-margin-top: 15px;
$input-vertical-padding: 3px;
$input-height: 34px;
$input-max-width: 440px;
$input-message-position: -20px;
$input-clear-position: 10px;
$half-input-between: 1em;
$half-input-width: calc(50% - #{$half-input-between});
$half-input-button-width: 24px;

// Links
$links-color: var(--digital-blue-60);

// Filter Box
$filter-box-height: 34px;
$filter-box-small-height: 32px;
$filter-box-small-font-size: 13px;
$clear-icon-height: 16px;
$screen-size-break-point: $breakpoint-desktop-large;
$filter-box-width-large-screen: 336px;
$filter-box-width-small-screen: 260px;
$filter-box-width-mod-small: 200px;
$icon-offset-large-screen: 20px;
$icon-offset-small-screen: 10px;

// Filter Picker
// Component
$filterpickerbox-padding: 20px;
$filterpickerbox-margin-bottom: 1px;
$filterpickerbox-small-padding: 13px 20px;
$multi-filterpickerbox-add-padding: 10px 20px;
$multi-filter-picker-margin-bottom: 20px;
$multi-filter-picker-border-bottom: 2px solid var(--white);
$multi-filter-picker-add-icon-width: 20px;
$filters-margin-right: 5px;
$filterbox-filters-container-padding: 4px 4px 3px;

// Single filter variables
$filter-padding: 6px 25px;
$string-filter-padding-top: 30px;
$selected-filter-padding-left: 20px;
$selected-filter-height: 50px;
$filter-badge-height: 34px;
$filter-badge-margin-left: 3px;
$filter-badge-font-size: 13px;
$edit-filter-content-line-height: 16px;
$pre-operator-padding: 2px 0 0 2px;
$pre-operator-margin: 0 6px 0 0;
$pre-operator-font-size: 12px;
$pre-operator-line-height: 33px;
$filter-where-padding: 0 4px;
$filter-where-margin-right: 5px;
$filter-where-margin-bottom: 0;
$filter-where-margin-left: 4px;
$filter-where-line-height: 34px;

// filter form
$filter-pop-up-width: 292px;
$filter-pop-up-search-input-height: 30px;
$add-filter-popup-right: 35px;
$edit-filter-popup-right: 3px;
$filter-choices-section-padding-left: 15px;
$filter-choices-section-margin-top: 7px;
$filter-event-type-width: 224px;
$filter-event-type-margin-bottom: 16px;
$filter-not-selected-min-height: 20px;
$filter-not-selected-margin-right: 1px;
$filter-not-selected-line-height: 18px;
$filter-type-font-size: 10px;
$filter-string-filter-label-line-height: 18px;

// Header
$header-height: 72px;
$header-padding: 40px;
$header-height-padding: 20px;
$header-padding-y: 16px;
$panel-header-height: 100px;
$panel-header-action-padding-horizontal: 12px;
$panel-header-action-padding-vertical: 8px;
$big-panel-header-height: 136px;
$description-margin-top: 5px;
$header-hamburger-padding: 15px 24px;

// Popover
$popover-min-width: 320px;
$popover-footer-y-padding: 12px;
$popover-back-margin-top: 15px;
$popover-navigation-section-border-radius: 1px 0 0 1px;
$popover-navigation-section-width: 30px;

// Modal
$base-backdrop-z-index: 1050;
$base-modal-z-index: $base-backdrop-z-index;
$modal-header-height: 100px;
$modal-form-width-small: 440px;
$modal-footer-padding: 24px 40px;
$modal-footer-small-padding: 12px 40px 12px 20px;
$modal-width: 45%;
$modal-height: 50%;
$modal-height-stick: 55%;
$modal-medium-width: 65%;
$modal-medium-height: 70%;
$modal-medium-height-stick: 75%;
$modal-big-width: 85%;
$modal-big-height: 90%;
$modal-big-height-stick: 95%;

// Prompt modal
$modal-prompt-text-padding-y: 24px;
$modal-prompt-horizontal-padding: 30px;
$modal-prompt-max-height: 350px;
$modal-prompt-min-height: 280px;
$modal-prompt-min-width: 500px;
$modal-prompt-max-width: 550px;
$modal-prompt-header-height: 90px;
$modal-prompt-footer-height: calc(
    2 * 24px + #{$button-height} + 2 * #{$button-border-width}
); // Calculate the button height + 2 border top and bottom and the space below the button for the max height
$modal-prompt-footer-height-ie: 84px;
$modal-prompt-body-min-height: calc(
    #{$modal-prompt-min-height} - #{$modal-prompt-header-height} - #{$modal-prompt-footer-height}
);
$modal-prompt-body-min-height-ie: calc(
    #{$modal-prompt-min-height} - #{$modal-prompt-header-height} - #{$modal-prompt-footer-height-ie}
);

// Wizard card
$wizard-card-width: 490px;
$wizard-card-small-width: 365px;
$wizard-card-large-width: 1095px;
$wizard-card-form-padding: 30px;
$wizard-card-footer-padding: 20px 30px;

// Card
$card-minimum-width: 160px;
$card-minimum-height: 70px;

// Navigation
$navigation-menu-header-font-weight: var(--main-font-bolder);
$navigation-menu-item-font-weight: var(--main-font-regular);
$navigation-width: 245px;
$navigation-border-for-scroll-bar: 1px;
$navigation-background-color: var(--white);
$navigation-active-background-color: var(--deprecated-blue-purple-2);
$navigation-active-border-width: 3px;
$navigation-section-icon-size: 16px;
$navigation-section-icon-margin-right: 10px;
$navigation-section-icon-margin-left: 15px;
$navigation-section-arrow-margin: 15px;
$navigation-horizontal-space: $navigation-section-icon-size + $navigation-section-icon-margin-right +
    $navigation-section-icon-margin-left - $navigation-active-border-width;
$navigation-horizontal-space-loading: $navigation-section-icon-size + $navigation-section-icon-margin-right +
    $navigation-section-icon-margin-left;
$navigation-horizontal-space-no-icon: $navigation-section-icon-margin-left + $navigation-section-arrow-margin;
$navigation-right-margin: $navigation-section-arrow-margin;
$navigation-locked-color: var(--grey-60);
$navigation-tag-font-size: 10px;
$navigation-tag-padding: 2px 5px;
$navigation-menu-section-height: 35px;
$navigation-loading-height: 12px;
$navigation-loading-item-border-radius: 10px;
$navigation-loading-background-size: 300% 104px;
$navigation-loading-bullet-width: 12px;
$navigation-toggle-duration: 0.1s;
$sidenavigation-padding-left: 30px;

// Application
$application-container-min-height: 400px;

// Sub Navigation
$sub-navigation-padding-top: 26px;
$sub-navigation-border: $default-border;
$sub-navigation-item-padding: 16px 40px;
$sub-navigation-selected-border-width: $navigation-active-border-width;
$sub-navigation-line-height: 16px;
$sub-navigation-min-width: 200px;

// Tabs
$tab-bottom-border-height: 4px;
$tab-padding: 10px 0 5px;
$tab-margin-right: 24px;
$tab-navigation-min-height: 36px;
$tab-font-size: var(--default-font-size);
$tab-pane-loading-margin-top: 50px;
$sub-tab-font-size: 12px;

// Table
$table-first-column-padding-left: 35px;
$table-border-width: 1px;
$table-cell-left-right-padding: 15px;
$table-header-inner-height: 30px;
$table-header-height: $table-header-inner-height + 2 * $table-border-width;
$table-header-font-size: 13px;
$table-header-line-height: 16px;
$table-header-bottom-padding: (($table-header-inner-height - $table-header-line-height) * 0.5);
$table-header-top-padding: 9px;
$table-header-z-index: 2;
$table-row-inner-height: 36px;
$table-row-height: $table-row-inner-height + $table-border-width;
$table-row-font-size: 14px;
$table-row-line-height: 18px;
$table-row-top-bottom-padding: (($table-row-inner-height - $table-row-line-height) * 0.5);
$table-border: $table-border-width solid var(--grey-40);
$table-border-button: $table-border-width solid transparent;
$table-selected-border-width: 5px;
$table-column-draggable-width: 25px;
$table-column-draggable-padding: 7px 10px;
$table-row-drag-over-color: rgb(var(--deprecated-medium-grey-rgb) / $transparency-3);
$big-table-blankslate-section-padding: 20px 40px 20px 35px;
$big-table-row-height: 36px;
$big-table-icon-margin: 20px;
$big-table-icon-size: 15px;
$big-table-first-row-font-size: 14px;
$big-table-first-row-line-height: 20px;
$big-table-second-row-font-size: 12px;
$big-table-second-row-line-height: 17px;
$table-slim-font-size: 13px;
$table-small-svg-width: 20px;
$table-action-margin-left: 10px;
$table-shadow: 0 2px 8px 1px var(--deprecated-medium-grey);
$table-state-icon-size: 25px;
$table-blankslate-row-width: 20px;
$table-cell-border-bottom-color-loading: 3px;
$table-header-action-button-loading-width: 100px;
$table-header-title-loading-width: 300px;
$table-header-action-bar-button: 300px;
$mod-card-list-vertical-padding: 24px;
$mod-card-list-horizontal-padding: 32px;
$mod-card-row-min-height: 184px;

// Table actions
$table-actions-container-height: 52px;
$table-actions-margin: 30px;
$table-actions-dropdown-padding-x: 10px;
$table-item-filter-padding-x: 10px;

// Table collapsible rows
$table-collapsible-row-height: 45px;
$details-container-padding: 15px;

// Form elements
$form-bottom-padding: 30px;
$form-top-padding: 20px;
$form-elements-margin: 10px;
$form-group-margin: 30px;
$form-control-label-margin: 10px;
$form-control-label-font-size: 13px;
$form-section-header-margin-bottom: 20px;
$form-heading-description-margin-top: 10px;
$child-section-first-input-spacing-top: 5px;
$child-section-spacing-top: 15px;
$child-section-spacing-left: 20px;
$child-section-border-size: 5px;

// Blackslate elements
$blankslate-margin: 15px;
$blankslate-title-margin-bottom: 24px;
$blankslate-description-width: 470px;
$blankslate-paragraph-margin-bottom: 20px;
$blankslate-padding: 30px;
$blankslate-padding-small: 21px;
$blankslate-small-h1-font-size: 20px;
$blankslate-small-h1-margin-top: 0;
$blankslate-small-p-font-size: 14px;
$blankslate-small-p-margin-bottom: 0;

// Progress bar
$progress-bar-border-radius: 12px;
$progress-bar-default-height: 20px;

// Collapsible
$collapsible-height: 50px;
$collapsible-header-font-size: 13px;
$collapsible-header-icon-size: 10px;
$collapsible-title-padding: 10px;
$collapsible-content-font-size: 12px;
$collapsible-box-padding: 10px;
$collapsible-contextual-help-positioning: 2px;

// CollapsibleInfoBox
$collapsible-infobox-icon-size: 20px;
$collapsible-infobox-border-radius: 4px;

// Dropdown
$dropdown-choices-top-bottom-margin: 8px;
$dropdown-arrow-icon-size: 10px;
$dropdown-icon-text-spacing: 10px;
$dropdown-button-font-size: 14px;
$dropdown-choice-font-size: 14px;
$dropdown-option-padding: 8px 16px;
$dropdown-menu-max-height: 245px;
$dropdown-button-min-width: 260px;
$dropdown-toggle-append-width: 40px;
$dropdown-option-append-width: 60px;
$dropdown-toggle-right-padding: $button-padding-x + $dropdown-arrow-icon-size + $dropdown-icon-text-spacing;
$dropdown-toggle-with-append-right-padding: $default-margin + $dropdown-toggle-append-width;

// Dropdown Multiselect
$dropdown-multiselect-padding: 5px 10px 5px 5px;
$dropdown-multiselect-margin: 2px;
$dropdown-multiselect-items-margin: 6px;
$dropdown-multiselect-remove-all-padding: $dropdown-multiselect-items-margin + $default-border-size;
$dropdown-multiselect-option-height: 23px;
$selected-option-close-width: 22px;
$dropdown-multiselect-icon-size: 12px;
$dropdown-multiselect-icon-thickness: 2px;
$dropdown-multiselect-icon-margin: 5px;
$dropdown-multiselect-icon-position: $dropdown-multiselect-icon-size * 0.5 - $dropdown-multiselect-icon-thickness * 0.5;
$multiselect-padding: 2 * $spacing;
$multiselect-dropdown-margin: calc(-#{$multiselect-padding} - 2 * #{$default-border-size});

// Facet
$facet-column-width: 30%;
$facet-column-max-width: 360px;
$facet-column-padding-y: 24px;
$facet-column-padding-right: 32px;
$facet-column-padding-left: 40px;
$facet-spacing: 16px;
$facet-margin-y: 10px;
$facet-header-eraser-right-position: 25px;
$facet-search-results-bottom-position: 60px;
$facet-search-results-top-position: calc(100% - 25px);
$facet-search-results-margin-y: 3px;
$facet-search-results-z-index: 999;
$facet-value-line-height: 17px;
$facet-value-spacing: 5px;
$facet-checkbox-mark-size: 10px;
$facet-checkbox-line-width: 2px;
$facet-more-height: 200px;
$facet-more-button-border: 2px dashed var(--deprecated-medium-grey);
$facet-exclude-padding-right: 24px;
$facet-exclude-button-icon-size: 7px;

// Spaced boxes
$box-spacing: 10px;

// multiline input
$tooltip-width: 150px;
$multiline-input-padding-right: 25px;

// Pagination
$pagination-vertical-margin: 20px;

// Loading
$loading-size: 40px;
$big-loading-size: 70px;
$bounce-size: 10px;
$big-bounce-size: 20px;
$loading-vertical-margin: 100px;
$loading-font-size: 16px;
$loading-prompt-margin-top: 60px;
$loading-prompt-margin-bottom: 50px;
$big-loading-margin-top: 30px;

// Splash
$splash-default-height: 30vh;
$splash-medium-height: 45vh;
$splash-wizard-width: 1025px;
$splash-wizard-padding-top: 145px;
$splash-large-wizard-width: 1400px;
$splash-vertical-padding: 70px;
$splash-box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
$splash-min-height: 45px;
$splash-mobile-min-height: 60px;

// Calendar & Date Picker
$date-picker-width: 562px;
$date-picker-dimension: 36px;
$calendar-width: 280px;
$calendar-cell-dimensions: 40px;
$calendar-border-width: 1px;
$calendar-border: $calendar-border-width solid var(--deprecated-light-grey);
$selected-date-offset: 2px;
$selected-date-height: 28px;
$calendar-limit-border-width: 2px;
$calendar-limit-border-length: 5px;
$calendar-max-height: 336px;
$date-picker-button-hover-bg: rgb(var(--deprecated-dark-grey-rgb) / $transparency-3);
$countdown-cell-height: 28px;

// Home card
$home-card-padding: 1rem; // Based on white space utility p2 (0.5rem * 2)
$home-card-margin: 15px;
$home-card-radius: 4px;
$home-card-y-padding: 0.5em;
$home-card-x-padding: 1em;

// Box
$item-box-horizontal-spacing: 16px;
$item-box-vertical-spacing: 8px;
$item-box-spacing: 5px;
$list-box-max-height: 300px;
$list-box-vertical-spacing: 8px;
$list-box-box-shadow: var(--low-elevation-on-light);

// Slider
$slider-rail-height: 4px;
$slider-rail-margin-top: 2px;
$slider-track-height: 8px;
$slider-dot-margin-left: -2px;
$slider-dot-margin-top: -5px;
$slider-dot-box-shadow: 0 0 1px 0 var(--white);
$slider-dot-height: 18px;
$slider-dot-width: 2px;
$slider-dot-active-height: 8px;
$slider-handle-width: 34px;
$slider-handle-height: 18px;
$slider-handle-margin-top: -6px;
$slider-handle-margin-left: -18px;
$slider-handle-background-size: 34px 18px;
$slider-handle-box-shadow: 0 0 1px 0 var(--deprecated-dark-blue);
$slider-handle-border-radius: 4px;

// SlideY anim
$slide-y-transition-duration: 0.5s;

// Progress bar
$step-progress-bar-height: 8px;
$step-progress-bar-border-width: 4px;
$step-progress-bar-done-color: var(--bright-turquoise-70);
$step-progress-bar-doing-color: var(--bright-turquoise-40);
$step-progress-bar-to-do-color: var(--bright-turquoise-10);

// Corner ribbon
$ribbon-width: 10rem;
$ribbon-height: 2em;
$ribbon-distance-from-corner: 3em;
$ribbon-y-offset: calc((#{$ribbon-height} / -2) + #{$ribbon-distance-from-corner});
$ribbon-x-offset: calc((#{$ribbon-width} / -2) + #{$ribbon-distance-from-corner});
$ribbon-font-size: 0.8em;
$ribbon-letter-spacing: 1px;
$ribbon-rotation-angle: 45deg;

// Flippable
$flippable-perspective: 1000px;
$flippable-z-index: 1;
$flippable-transition-duration: 0.8s;
$flippable-shadow: 0 2px 8px 0 rgb(0 0 0 / 30%);

// Material Card
$material-card-shadow: 0 2px 20px 0 rgb(var(--black-rgb) / 10%);
$material-card-shadow-hover: 0 2px 30px 0 rgb(var(--black-rgb) / 30%);
$material-card-shadow-active: 0 2px 20px 0 rgb(var(--black-rgb) / 30%);
$material-card-colored-border-height: 5px;

// Content placeholder
$content-placeholder-border-radius: 4px;
$content-placeholder-opacity-full: 1;
$content-placeholder-opacity-see-through: 0.6;
$text-content-placeholder-height: $button-height * 0.5;
$text-content-placeholder-word-width: 30px;
$text-content-placeholder-small-width: 100px;
$text-content-placeholder-medium-width: 200px;
$text-content-placeholder-large-width: 300px;

// Search bar
$search-bar-min-width: 200px;
$search-bar-icon-size: 13px;
$search-bar-icon-margin: 10px;
$search-bar-input-margin-left: 10px;
$search-bar-width-without-input: $search-bar-icon-size + $search-bar-icon-margin * 2 + $search-bar-input-margin-left;

// Multi Step Bar
$multi-step-small-height: 2px;
$multi-step-min-height: 10px;
$multi-step-bar-text-padding: 8px 5px;
$multi-step-bar-mod-small-text-padding: 3px 2px;
$multi-step-bar-separation: 5px;
$multi-step-sliding-animation-background-width: 28px;
$multi-step-sliding-animation-background-height: 50px;
$multi-step-animation-color: var(--deprecated-light-grey);
$multi-step-to-do-color: var(--deprecated-light-grey);
$multi-step-doing-color: #3bb862;
$multi-step-done-color: #3bb862;
$multi-step-error-color: var(--critical-70);
$multi-step-warning-color: var(--deprecated-orange);

// Icons
$icon-hover-offset: 2px;
$action-icons-size: 18px;

// Scroll bar
$slim-scroll-bar-width: 8px;

// Diff viewer
$diff-line-height: 20px;
$diff-line-ajustment: 1px;
$diff-line-number-width: 45px;
$diff-line-number-padding: 5px;
$diff-separator-font-size: 10px;
$diff-separator-line-height: 5px;
$diff-separator-padding: 3px;
$diff-separator-margin: 10px;

// Color dots
$color-dot-size: 12px;

// Banners
$banner-padding: 40px;
$full-banner-height: 300px;
$banner-content-height: 165px;
$banner-content-padding: 50px;
$banner-right-width: 300px;
$banner-warning-icon-fix: 2px;
$banner-box-shadow:
    inset 0 5px 10px 0 rgb(var(--black-rgb) / $transparency-5),
    inset 0 -10px 50px 0 rgb(var(--black-rgb) / 20%);

// Status Cards
$status-card-border-width: 4px;
$status-card-padding: 25px;
$status-card-padding-y: 13px;
$status-card-margin: 10px;
$status-card-text-margin: 5px;
$status-card-small-width: 160px;

// Vertical Line
$vertical-line-width: 1px;
$vertical-line-height: 1rem;
$vertical-line-border-left: 1px solid var(--deprecated-dark-medium-grey);

// Drop
$drop-z-index: 10000;

// BorderedLine
$line-color: var(--grey-20);