/* Responsive Breakpoints */
/* The first breakpoint simply indicates minimum support level. It should not be used with media queries. */
/* Mobile-first means the default layout applies to mobile and there should be no mimimums even though */
/* most mobile devices would be higher in screen width than the smallest viewport width. */

/* The variables are to be considered constants. They can be read, but should not be modified. */
$screen-size-XS: 320px;
$screen-size-SM: 512px;
$screen-size-MD: 768px;
$screen-size-LG: 1024px;
$screen-size-XL: 1280px;
$screen-size-XL2: 1440px;
$screen-size-XL3: 1680px;
$screen-size-XL4: 1920px;
$page-grid-max-width: 1584px;
$page-grid-number-cols-small: 8;
$page-grid-number-cols-large: 16;
$page-grid-outside-margins-small: 16px;
$page-grid-outside-margins-large: 32px;
$page-grid-outside-margins-max: 48px;
$page-grid-column-gaps-small: var(--spacing-100);
$page-grid-column-gaps-large: var(--spacing-200);
$page-grid-row-gaps-small: var(--spacing-100);
$page-grid-row-gaps-large: var(--spacing-200);
/* Deprecated when using variables with _ or - with @use, they are not accessable */
$_screen-size-XS: 320px;
$_screen-size-SM: 512px;
$_screen-size-MD: 768px;
$_screen-size-LG: 1024px;
$_screen-size-XL: 1280px;
$_screen-size-XL2: 1440px;
$_screen-size-XL3: 1680px;
$_screen-size-XL4: 1920px;
$_page-grid-max-width: 1584px;
$_page-grid-number-cols-small: 8;
$_page-grid-number-cols-large: 16;
$_page-grid-outside-margins-small: 16px;
$_page-grid-outside-margins-large: 32px;
$_page-grid-outside-margins-max: 48px;
$_page-grid-column-gaps-small: var(--spacing-100);
$_page-grid-column-gaps-large: var(--spacing-200);
$_page-grid-row-gaps-small: var(--spacing-100);
$_page-grid-row-gaps-large: var(--spacing-200);
$marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/";
$marketsans-fontname: "Market Sans";
$marketsans-filename-regular: "MarketSans-Regular-WebS";
$marketsans-filename-bold: "MarketSans-Bold-WebS";
$font-family-default: $marketsans-fontname, Arial, sans-serif;
/* TODO: remove these in next major version */
$font-weight-regular: 500;
$font-weight-bold: 700;
$font-size-12: 0.75rem;
$font-size-14: 0.875rem;
$font-size-16: 1rem;
$font-size-18: 1.125rem; /* secret size */
$font-size-20: 1.25rem;
$font-size-24: 1.5rem;
$font-size-30: 1.875rem;
$font-size-36: 2.25rem;
$font-size-46: 2.875rem;
$font-size-64: 4rem;
$spacing-100: 8px;
$spacing-25: $spacing-100 * 0.25;
$spacing-50: $spacing-100 * 0.5;
$spacing-75: $spacing-100 * 0.75;
$spacing-125: $spacing-100 * 1.25;
$spacing-150: $spacing-100 * 1.5;
$spacing-200: $spacing-100 * 2;
$spacing-250: $spacing-100 * 2.5;
$spacing-300: $spacing-100 * 3;
$spacing-400: $spacing-100 * 4;
$spacing-450: $spacing-100 * 4.5;
$spacing-600: $spacing-100 * 6;
$spacing-700: $spacing-100 * 7;
$spacing-800: $spacing-100 * 8;
$font-size-giant-3: $font-size-46;
$font-size-giant-2: $font-size-36;
$font-size-giant-1: $font-size-30;
$font-size-large-2: $font-size-24;
$font-size-large-1: $font-size-20;
$font-size-medium: $font-size-16;
$font-size-regular: $font-size-14;
$font-size-small: $font-size-12;