:root {
  --container-mobile-padding-x: 1.25rem;
  --container-desktop-padding-x: 1.5rem;

  --menu-header-height: var(--size-64);
  --map-header-height: var(--size-56);
  --dropdown-max-height: var(--size-445);
  --navigation-bar-height: var(--size-58);
  --modal-header-height: var(--size-50);
  --product-sidebar-padding: var(--spacing-24);
  --booking-wizard-sidebar-left-margin: var(--spacing-30);
  --scrollspy-menu-height: var(--size-60);
  --desktop-header-height: var(--size-75);
  --header-item-margin: var(--spacing-16);
  --header-item-margin-xl: var(--spacing-34);
  --header-mobile-padding: var(--spacing-8) var(--spacing-0);

  --border-radius-base: var(--border-radius-10);

  /** TEMPORARY SOLUTION, WE STILL NEED THIS VARIABLES DUE TO BOOTSTRAP CLASSES **/
  --bs-border-radius: 4px;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: var(--color-neutral-400);
  --bs-body-font-family: var(--typography-font-family);
  --bs-font-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';

  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;

  /** END TEMPORARY SOLUTION */
  --button-radius: var(--border-radius-base);
  --button-rounded-radius: var(--border-radius-base);
  --button-variant-outlined-border-width: var(--size-1);
  --button-variant-outlined-border-color: var(--color-blue-800);
  --button-variant-outlined-text-color: var(--color-blue-800);
  --button-variant-secondary-bg-color: var(--color-blue-800);

  --input-height: var(--size-45);
  --input-gap: var(--spacing-16);

  --button-arrow-width-xs: var(--size-24);
  --button-arrow-height-xs: var(--size-24);
  --button-arrow-width-sm: var(--size-30);
  --button-arrow-height-sm: var(--size-30);
  --button-arrow-width-md: var(--size-34);
  --button-arrow-height-md: var(--size-50);
  --button-arrow-width-lg: var(--size-34);
  --button-arrow-height-lg: var(--size-50);
  --button-arrow-border-width: var(--size-0);

  --form-radio-border-width: var(--size-1);
  --form-radio-border-color: var(--color-gray-600);
  --form-radio-selected-bg-color: var(--color-primary);
  --form-radio-selected-border-color: var(--color-gray-600);
  --form-radio-box-border-width: var(--size-0);
  --form-radio-box-border-radius: var(--border-radius-base);
  --form-radio-box-box-shadow: var(--mixin-box-white-box-shadow);
  --form-text-field-border-radius: var(--border-radius-base);
  --form-checkbox-bg-color: var(--color-primary);
  --form-checkbox-border-color: var(--color-primary);

  --filters-height-sm: var(--size-90);
  --filters-height-md: var(--size-90);
  --filters-border-color: var(--color-blue-800);
  --filters-border-width: var(--size-10);
  --filters-border-radius: var(--border-radius-16);
  --filters-border-radius-mobile: var(--border-radius-16);
  --filters-input-border-radius: var(--border-radius-base);
  --filters-input-border-width: var(--size-1);
  --filters-input-separator-color: var(--color-gray-600);
  --filters-input-separator-color-mobile: var(--color-gray-600);
  --filters-input-separator-offset: var(--spacing-16);
  --filters-cta-padding: var(--spacing-9) var(--spacing-9) var(--spacing-9) var(--spacing-0);
  --filters-cta-border-radius: var(--border-radius-base);

  --offer-item-min-height: var(--size-190);
  --offer-item-margin-bottom: var(--spacing-20);
  --offer-item-price-separator-bg-color: var(--color-gray-400);

  --favourite-button-radius: var(--border-radius-25-pct);
  --pagination-input-border-radius: var(--border-radius-base);

  --product-sidebar-width: var(--size-300);

  --datepicker-cell-border-radius: var(--border-radius-base);
  --datepicker-cell-selected-bg-color: var(--color-primary);
  --datepicker-cell-selected-border-color: var(--color-primary);
  --datepicker-cell-selected-text-color: var(--color-inverse);
  --datepicker-arrow-border-radius: var(--border-radius-4);
  --datepicker-arrow-border-width: var(--size-0);
  --datepicker-arrow-box-shadow: var(--mixin-box-white-box-shadow);
  --datepicker-arrow-width: var(--size-29);
  --datepicker-arrow-height: var(--size-34);
  --datepicker-arrow-background-color: var(--color-inverse);

  --product-configurator-variant-select-font-size-lg: var(--font-size-14);
  --product-configurator-variant-select-border-color: transparent;
  --product-configurator-variant-select-border-radius: var(--border-radius-base);
  --product-configurator-variant-select-box-shadow: var(--mixin-box-white-box-shadow);
  --product-configurator-variant-select-margin: var(--spacing-10) var(--spacing-0);
  --product-configurator-variant-select-padding: var(--spacing-10) var(--spacing-15);
  --product-configurator-variant-date-cell-text-color: var(--color-default);
  --product-configurator-variant-date-cell-selected-text-color: var(--color-inverse);

  --booking-wizard-sidebar-width: var(--size-340);
  --booking-wizard-sidebar-price-toggle-font-size: var(--font-size-22);
  --booking-wizard-sidebar-price-toggle-font-color: var(--color-blue-900);
  --booking-payment-method-border-radius: var(--border-radius-base);
  --booking-participants-form-width-lg: var(--size-70-pct);
  --booking-gender-select-width: var(--size-140);

  --webkit-scroll-width: var(--size-5);
  --webkit-scroll-radius: var(--border-radius-4);

  --toggle-icon-font-weight: bold;

  --product-configurator-variant-date-length-of-stay-option-border-radius: var(
    --border-radius-base
  );

  --booking-product-item-font-size: var(--font-size-13);

  --rating-star-color: var(--color-mango-600);
  --price-color: var(--color-blue-800);
  --header-offer-title-color: var(--color-blue-800);

  --color-xx: var(--color-gray-700);
  --box-shadow: -3px 3px 14px 0 rgba(var(--color-black-500-rgb), 0.1);
  --box-shadow-1: 0 0 0 var(--size-1) var(--color-neutral-600);
  --box-shadow-2: 0 0 0 var(--size-1000) var(--color-inverse) inset;
  --box-shadow-3: 0 0 4px var(--color-neutral-300);

  --color-fullscreen-gallery: var(--color-default);
}