$travlr-ui: 'travlr-ui';
$travlr-prefix: 't-';
$element-prefix: 'el-';
$travlr-library-path: '../../../../Library/UiKit/';

// 1. Colour Pallete

// 1.1 Theme Colours
$color-primary:                     #2DCCD3 !default;
$color-primary-light:               #57DBE1 !default;
$color-primary-dark:                #1EB8BF !default;

$color-secondary:                   #6BA4B8 !default;
$color-secondary-light:             #81B9CD !default;
$color-secondary-dark:              #5D96AA !default;

$color-tertiary:                    #006272 !default;
$color-tertiary-light:              #047486 !default;
$color-tertiary-dark:               #015360 !default;

// 1.2 Grayscale
$color-white:                       #FFFFFF !default;
$color-grey-lightest:               #F4F4F4 !default;
$color-grey-lighter:                #DDDDDD !default;
$color-grey-light:                  #CCCCCC !default;
$color-grey-med:                    #B6B9BB !default;
$color-grey-dark:                   #8E9497 !default;
$color-grey-darker:                 #666C6F !default;
$color-grey-darkest:                #374044 !default;
$color-black:                       #000000 !default;

// 1.3 Alerts
$color-danger:                      #F45252 !default;
$color-warning:                     #F9C80E !default;
$color-success:                     #78CC4E !default;


// 2. Typography

// 2.1 Typeface
$typeface-primary:                  "Montserrat", sans-serif !default;
$typeface-sans-serif:               BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
$typeface-monospace:                monospace !default;
$typeface-code:                     $typeface-monospace !default;
$typeface-travlr-icon:              "TRAVLR" !default;

// 2.2 Hierarchy
$weight-bold:                       700 !default;
$weight-semibold:                   600 !default;
$weight-regular:                    400 !default;

$size-text-1:                       32px !default;
$size-text-2:                       28px !default;
$size-text-3:                       24px !default;
$size-text-4:                       20px !default;
$size-text-5:                       16px !default;
$size-text-6:                       14px !default;
$size-text-body:                    14px !default;
$size-text-caption:                 12px !default;
$size-text-small:                   10px !default;
$size-text-label-text:              20px !default;
$size-text-label-text-small:        16px !default;

$line-height-text-1:                36px !default;
$line-height-text-2:                32px !default;
$line-height-text-3:                28px !default;
$line-height-text-4:                24px !default;
$line-height-text-5:                20px !default;
$line-height-text-6:                18px !default;
$line-height-text-body:             20px !default;
$line-height-text-supplementary:    18px !default;
$line-height-text-callout:          18px !default;
$line-height-text-callout-small:    15px !default;
$line-height-text-label-text:       24px !default;
$line-height-text-label-text-small: 20px !default;
$line-height-text-caption:          16px !default;

// 3. Container
$container-width:                   1136px !default;
$container-gap:                     8px !default;
$container-gap-mobile:              8px !default;

// 4. Responsiveness
/** For Extra Small Screen / Phone **/
$screen-xs:                         480px !default;
$screen-xs-min:                     $screen-xs !default;
$screen-phone:                      $screen-xs-min !default;

/** For Small Screen / Tablet **/
$screen-sm:                         768px !default;
$screen-sm-min:                     $screen-sm !default;
$screen-tablet:                     $screen-sm-min !default;
$screen-tablet-landscape:           1024px !default;

/** For Medium Screen / Desktop **/
$screen-md:                         992px !default;
$screen-md-min:                     $screen-md !default;
$screen-desktop:                    $screen-md-min !default;

/** For Large Screen / Wide Desktop **/
$screen-lg:                         1200px !default;
$screen-lg-min:                     $screen-lg !default;
$screen-wd-desktop:                 $screen-lg-min !default;

/** For Extra Large Screen / Fullhd Desktop **/
$screen-xl:                         1344px !default;
$screen-xl-min:                     $screen-xl !default;
$screen-xl-desktop:                 $screen-xl-min !default;

/** For Screen Max **/
$screen-xs-max:                     ($screen-sm-min - 1) !default;
$screen-sm-max:                     ($screen-md-min - 1) !default;
$screen-md-max:                     ($screen-lg-min - 1) !default;
$screen-lg-max:                     ($screen-xl-min - 1) !default;


$phone: $screen-phone;
$tablet: $screen-tablet;
$desktop: $screen-desktop;
$widescreen: $screen-wd-desktop;
$widescreen-enabled: true !default;
$fullhd: $screen-xl-desktop !default;
$fullhd-enabled: true !default;

// 5. Icons
$font-montserrat-path:              'uikit/fonts/Montserrat/source/' !default;
$font-icons-path:                   'uikit/fonts/travlr-icons/source/' !default;
$icon-font-path:                    "../fonts" !default;
$icon-background-color:           #eee !default;
$icon-li-margin-right:              0.4em !default;
$list-icons:                        (
  cloud-o: 'e900',
  cloud: 'e901',
  offline: 'e902',
  color-fill: 'e903',
  color: 'e904',
  hourglass: 'e906',
  key: 'e907',
  screen-shrink: 'e905',
  label-o: 'e908',
  label: 'e909',
  layout-right: 'e90a',
  layout-left: 'e90b',
  playback-stop-o: 'e90c',
  playback-stop: 'e90d',
  playback-pause-o: 'e90e',
  playback-pause: 'e90f',
  playback-play-o: 'e910',
  playback-play: 'e911',
  redo: 'e912',
  undo: 'e913',
  sort: 'e914',
  marker-check: 'e915',
  subway: 'e916',
  train: 'e917',
  traffic: 'e918',
  shower: 'e919',
  plug: 'e91a',
  business: 'e91b',
  suitcase: 'e91c',
  briefcase: 'e91d',
  motorcycle: 'e91e',
  bike: 'e91f',
  city: 'e920',
  dish-plate: 'e921',
  weather: 'e922',
  flight-forward: 'e923',
  flight-upward: 'e924',
  airline: 'e925',
  seat: 'e926',
  language: 'e927',
  flash: 'e928',
  sparkle: 'e929',
  family: 'e92a',
  thumb-down: 'e92b',
  thumb-up: 'e92c',
  check-out: 'e92e',
  check-in: 'e92d',
  vimeo: 'e92f',
  medium: 'e930',
  podcast: 'e934',
  telegram: 'e935',
  twitter-x: 'e931',
  tiktok: 'e932',
  account-o: 'ea11',
  24h: 'ea02',
  add-list: 'ea03',
  aircon: 'ea04',
  angle-down-small: 'ea05',
  angle-down: 'ea06',
  activity: 'ea07',
  angle-left: 'ea08',
  angle-right-small: 'ea09',
  angle-left-small: 'ea0a',
  angle-up-small: 'ea0b',
  accessibility: 'ea0c',
  arrow-down-left: 'ea0d',
  angle-up: 'ea0e',
  angle-right: 'ea0f',
  arrow-down: 'ea10',
  account: 'e933',
  arrow-right: 'ea12',
  arrow-up-long: 'ea13',
  arrow-down-right: 'ea14',
  arrow-up: 'ea15',
  arrows-alt: 'ea16',
  arrow-up-right: 'ea17',
  arrows-expand: 'ea18',
  arrow-left: 'ea19',
  arrow-left-long: 'ea1a',
  arrow-right-long: 'ea1b',
  arrow-up-left: 'ea1c',
  arrow-down-long: 'ea1d',
  arrows-compress: 'ea1e',
  arrows: 'ea1f',
  articles: 'ea20',
  arrows-reverse: 'ea21',
  baby: 'ea22',
  bar: 'ea23',
  basket: 'ea24',
  attachment: 'ea25',
  arrows-v: 'ea26',
  bookmark: 'ea27',
  bubble-o: 'ea28',
  beach: 'ea29',
  building: 'ea2a',
  bookmark-o: 'ea2b',
  arrows-h: 'ea2c',
  cadet-down-circle: 'ea2d',
  bubble: 'ea2e',
  cadet-down-square-o: 'ea2f',
  bus: 'ea30',
  cadet-down: 'ea31',
  cadet-down-small: 'ea32',
  cadet-down-circle-o: 'ea33',
  cadet-up-small: 'ea34',
  cadet-up-square-o: 'ea35',
  cadet-up-square: 'ea36',
  cadet-up: 'ea37',
  cafe: 'ea38',
  cadet-up-circle-o: 'ea39',
  calendar-del: 'ea3a',
  calendar-list: 'ea3b',
  calendar-min: 'ea3c',
  calendar-plus: 'ea3d',
  calendar: 'ea3e',
  call-off: 'ea3f',
  call: 'ea40',
  camera-o: 'ea41',
  camera: 'ea42',
  card-amex: 'ea43',
  card-mastercard: 'ea44',
  card-paypal: 'ea45',
  card-visa: 'ea46',
  card: 'ea47',
  cart-o: 'ea48',
  cart: 'ea49',
  chart: 'ea4a',
  check-circle-o: 'ea4b',
  check-circle: 'ea4c',
  check-small: 'ea4d',
  check-square-o: 'ea4e',
  check-square: 'ea4f',
  check: 'ea50',
  calendar-check: 'ea51',
  close-circle-o: 'ea52',
  close-circle: 'ea53',
  close-small: 'ea54',
  close-square-o: 'ea55',
  close-square: 'ea56',
  close: 'ea57',
  checkbox: 'ea58',
  cloud-down: 'ea59',
  cloud-up-o: 'ea5a',
  cloud-up: 'ea5b',
  cloud-down-o: 'ea5c',
  comment-o: 'ea5d',
  cadet-up-circle: 'ea5e',
  community: 'ea5f',
  compress: 'ea60',
  conversation-o: 'ea61',
  conversation: 'ea62',
  copy: 'ea63',
  delete-o: 'ea64',
  delete: 'ea65',
  direction: 'ea66',
  discover: 'ea67',
  dollar: 'ea68',
  download: 'ea69',
  edit-o: 'ea6a',
  edit: 'ea6b',
  ellipsis-h: 'ea6c',
  ellipsis-v: 'ea6d',
  error-o: 'ea6e',
  error: 'ea6f',
  events: 'ea70',
  expand: 'ea71',
  external: 'ea72',
  eye-o-off: 'ea73',
  eye-o: 'ea74',
  eye-off: 'ea75',
  eye: 'ea76',
  facebook-square: 'ea77',
  facebook: 'ea78',
  file: 'ea79',
  filter: 'ea7a',
  fire: 'ea7b',
  flag-o: 'ea7c',
  flag: 'ea7d',
  flight-arrival: 'ea7e',
  flight-departure: 'ea7f',
  flight: 'ea80',
  food: 'ea81',
  forward: 'ea82',
  funnel: 'ea83',
  gift: 'ea84',
  globe: 'ea85',
  google-play: 'ea86',
  google-plus: 'ea87',
  google: 'ea88',
  gps-none: 'ea89',
  gps-off: 'ea8a',
  gps: 'ea8b',
  grid: 'ea8c',
  guarantee: 'ea8d',
  gym: 'ea8e',
  heart-o: 'ea8f',
  heart: 'ea90',
  help-o: 'ea91',
  help: 'ea92',
  home-o: 'ea93',
  home: 'ea94',
  hotel: 'ea95',
  image-library-o: 'ea96',
  image-library: 'ea97',
  image-o: 'ea98',
  image: 'ea99',
  inbox: 'ea9a',
  info-o: 'ea9b',
  info: 'ea9c',
  instagram: 'ea9d',
  laundry: 'ea9e',
  link: 'ea9f',
  linkedin-square: 'eaa0',
  linkedin: 'eaa1',
  list-circle: 'eaa2',
  list-square: 'eaa3',
  list: 'eaa4',
  location: 'eaa5',
  locked-o: 'eaa6',
  locked: 'eaa7',
  login: 'eaa8',
  logout: 'eaa9',
  mail-o: 'eaaa',
  mail-open-o: 'eaab',
  mail-open: 'eaac',
  mail: 'eaad',
  comment: 'eaae',
  map: 'eaaf',
  menu: 'eab0',
  cadet-down-square: 'eab1',
  message: 'eab2',
  code: 'eab3',
  minus-circle-o: 'eab4',
  minus-circle: 'eab5',
  minus-small: 'eab6',
  message-o: 'eab7',
  map-o: 'eab8',
  minus: 'eab9',
  navigation-45: 'eaba',
  minus-square: 'eabb',
  note: 'eabc',
  minus-square-o: 'eabd',
  notification-off-o: 'eabe',
  notification-off: 'eabf',
  notification: 'eac0',
  navigation-90: 'eac1',
  pinpoint: 'eac2',
  pinterest-circle: 'eac3',
  pinterest: 'eac4',
  places: 'eac5',
  plus-circle-o: 'eac6',
  plus-circle: 'eac7',
  plus-small: 'eac8',
  plus-square-o: 'eac9',
  plus-square: 'eaca',
  plus: 'eacb',
  pool: 'eacc',
  price-tag: 'eacd',
  price-tags: 'eace',
  print: 'eacf',
  receipt: 'ead0',
  recycle: 'ead1',
  refresh: 'ead2',
  renew: 'ead3',
  reply-all: 'ead4',
  reply: 'ead5',
  save: 'ead6',
  search: 'ead7',
  radio-selected: 'ead8',
  send: 'ead9',
  setting: 'eada',
  share-o: 'eadb',
  share: 'eadc',
  shield-o: 'eadd',
  shield: 'eade',
  ship: 'eadf',
  shop: 'eae0',
  shopping: 'eae1',
  shortlists: 'eae2',
  sort-down: 'eae3',
  sort-up: 'eae4',
  spa: 'eae5',
  spinner-1: 'eae6',
  spinner-2: 'eae7',
  spinner-3: 'eae8',
  star-o: 'eae9',
  star-rating-empty: 'eaea',
  star-rating-filled: 'eaeb',
  star-rating-half: 'eaec',
  star: 'eaed',
  stop: 'eaee',
  sun: 'eaef',
  sync: 'eaf0',
  taxi: 'eaf1',
  tbb: 'eaf2',
  time-o: 'eaf3',
  time: 'eaf4',
  timer-o: 'eaf5',
  timer: 'eaf6',
  tool: 'eaf7',
  transport: 'eaf8',
  travlr: 'eaf9',
  trend-down: 'eafa',
  trend-flat: 'eafb',
  trend-up: 'eafc',
  trip-add: 'eafd',
  trip: 'eafe',
  trophy: 'eaff',
  tv: 'eb00',
  twitter: 'eb01',
  unlocked-o: 'eb02',
  unlocked: 'eb03',
  radio-unselected: 'eb04',
  upload: 'eb05',
  user-add-o: 'eb06',
  user-add: 'eb07',
  user-group-o: 'eb08',
  user-group: 'eb09',
  user-o: 'eb0a',
  user: 'eb0b',
  voucher: 'eb0c',
  wedding: 'eb0d',
  whatsapp: 'eb0e',
  wifi: 'eb0f',
  youtube: 'eb10',
  zoom-in: 'eb11',
  zoom-out: 'eb12',
  messenger: 'eb13',
  park: 'eb14',
  notification-o: 'eb15'
);


// Miscellaneous
$primary-border:                    1px solid $color-grey-lighter !default;
$primary-border-color:              $color-grey-light !default;
$primary-panel-padding:             16px !default;
$primary-box-padding:               24px !default;
$primary-box-padding-small:         16px !default;

$primary-box-shadow:                0 1px 2px 0 rgba(0, 0, 0, 0.2) !default;
$secondary-box-shadow:              0 2px 8px 0 rgba(0, 0, 0, 0.1);

$header-height:                     64px !default;

$hero-main-height:                  440px !default;

$easing:                            ease !default;
$primary-transition:                all .5s $easing;

$radius:                            4px !default;
$radius-small:                      2px !default;
$radius-large:                      6px !default;

$button-padding:                    0 14px !default;
$button-padding-small:              0 8px !default;
$button-padding-large:              0 20px !default;
$button-font-size:                  16px !default;
$button-font-size-small:            14px !default;
$button-font-size-large:            18px !default;

$avatar-width:                      80px !default;
$avatar-height:                     80px !default;
$avatar-width-extra-small:          24px !default;
$avatar-height-extra-small:         24px !default;
$avatar-width-small:                48px !default;
$avatar-height-small:               48px !default;
$avatar-width-large:                100px !default;
$avatar-height-large:               100px !default;

$thumb-width-small:                 120px !default;
$thumb-height-small:                75px !default;
$thumb-width-medium:                200px !default;
$thumb-height-medium:               125px !default;
$thumb-width-large:                 320x !default;
$thumb-height-large:                200px !default;

$section-extra-small:               24px 0 !default;
$section-small:                     32px 0 !default;
$section-medium:                    40px 0 !default;
$section-large:                     48px 0 !default;
$section-extra-large:               64px 0 !default;

$input-border-color:                $color-grey-light;
$input-border-hover:                #999999 !default;
$input-border-focus:                $color-primary;

$icon-small:                        16px !default;
$icon-medium:                       20px !default;
$icon-large:                        28px !default;

$modal-padding:                     24px !default;

$notification-position-top:         88px !default;
$notification-position-right:       24px !default;
$notification-position-left:        24px !default;
$notification-position-bottom:      24px !default;