// We reimport variables and then export it here so that it doesn't get consumed
// in variables and update type files every time we make something accessible via JS

// This is the webpack-aliased-and-overriden-from-TerriaMap one, otherwise
// resolves back to our base one provided in terriajs
@use "../common/_variables";

:export {
  // TODO: find a better solution for this - some of these we need to provide as
  // numbers only so we can do math on them and add the unit afterwards 😵
  // screen sizes for media queries
  // mobile: variables.$mobile;
  // sm: variables.$sm;
  // md: variables.$md;
  // lg: variables.$lg;
  mobile: 767;
  sm: 768;
  md: 992;
  lg: 1300;

  // Compass styles
  // compassWidth: variables.$compass-width;
  // We have to deviate from our "divide by 5" here, due to 55 being an odd number
  // and thus meaning some things will scale to contain half pixels
  // bumped up to 56 to hit an even number
  compassWidth: 56;
  ringWidth: 10;

  spacing: 5;

  frontComponentZIndex: variables.$front-component-z-index;
  notificationWindowZIndex: variables.$notification-window-z-index;

  // ..radius? (no standardised radius at the moment, pull in as needed from variables
  radius40Button: 20;
  radiusLarge: variables.$radius-large;
  radiusSmall: variables.$radius-small;
  radiusLarge: variables.$radius-large;
  radiusSmall: variables.$radius-small;
  radiusXL: variables.$radius-xlarge;

  // padding
  padding: variables.$padding;
  paddingSmall: variables.$padding-small;
  paddingMini: variables.$padding-mini;
  paddingTiny: variables.$padding-tiny;

  overlay: variables.$overlay;
  overlayInvert: variables.$overlay-invert;

  // Colours
  colorPrimary: variables.$color-primary;
  colorSecondary: variables.$color-secondary;
  textLight: variables.$text-light; // essentially #fff until we sort out the colour palette from vic
  textLightTranslucent: rgba(variables.$text-light, 0.3);
  textLightDimmed: variables.$text-light-dimmed;
  textDark: variables.$text-dark;
  textDarker: variables.$text-darker;
  textBlack: variables.$text-black;
  textWarning: variables.$text-warning;
  textSuccess: variables.$text-success;
  infoColor: variables.$info-color;
  turquoiseBlue: variables.$turquoise-blue;
  darkAlpha: variables.$dark-alpha;
  transparentDark: variables.$transparent-dark;
  blur: variables.$blur;
  dark: variables.$dark;
  darkWithOverlay: variables.$dark-with-overlay;
  darkMid: variables.$dark-mid;
  darkLighter: variables.$dark-lighter;
  grey: variables.$grey;
  greyLighter: variables.$grey-lighter;
  greyLighter2: variables.$grey-lighter2;
  greyLightest: variables.$grey-lightest;
  charcoalGrey: variables.$charcoal-grey;

  // Fonts
  fontPop: variables.$font-pop;
  fontBase: variables.$font-base;
  fontMono: variables.$font-mono;
  fontFeatureInfo: variables.$font-feature-info;
  font: variables.$font;

  modalBg: variables.$modal-bg;
  modalText: variables.$modal-text;
  modalHighlight: variables.$modal-highlight;

  scrollbarColor: variables.$scrollbar-color;
  scrollbarTrackColor: variables.$scrollbar-track-color;

  // TODO: fix, these are stopgaps & should get merged in with something else(?)
  mapButtonColor: variables.$map-button-color;
  mapButtonTop: 18;
  mapNavigationTop: 80;

  trainerHeight: 64;
  workbenchMargin: 21;
  workbenchWidth: 350;
  workflowPanelWidth: 350;
  panelRadius: variables.$panel-radius;

  toolPrimaryColor: variables.$tool-primary-color;

  // Branding
  logoHeight: variables.$logo-height;
  logoPaddingVertical: 15px;
  logoPaddingHorizontal: 15px;

  logoSmallHeight: variables.$input-height;
  logoSmallPaddingHorizontal: 0;
  logoSmallPaddingVertical: 5px;

  inputHeight: variables.$input-height;
  inputHeightLarge: variables.$input-height-large;
}