/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */

@use 'vars';
@use 'helpers';
@use 'inter-ui/variable' with (
  $inter-font-display: block,
  $inter-font-path: 'inter-ui/variable'
);

@include variable.all;

body.xh-app {
  background-color: var(--xh-bg);
  border-color: var(--xh-border-color);
  color: var(--xh-text-color);
  font-family: var(--xh-font-family);
  font-feature-settings: var(--xh-font-feature-settings);
  // Important for default Inter font to ensure numbers are constant-width and line up properly.
  font-variant-numeric: tabular-nums;
  font-size: var(--xh-font-size-px);
  box-sizing: border-box;

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  // Important for using the body as the `popupParent` for our ag-grids
  height: 100vh;
  margin: 0;
  overflow: hidden;

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: var(--xh-scrollbar-bg);
    width: var(--xh-scrollbar-size-px);
    height: var(--xh-scrollbar-size-px);
  }

  ::-webkit-scrollbar-corner {
    background-color: var(--xh-scrollbar-bg);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--xh-scrollbar-thumb);
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    color: var(--xh-text-color-headings);
    margin: var(--xh-pad-px) 0;
  }

  .xh-title-tip {
    cursor: pointer;
  }

  // Avoid default select / magnify behaviors on touch-screens
  &.xh-mobile,
  &.xh-tablet {
    text-size-adjust: none !important;
    -webkit-touch-callout: none !important;

    & *:not(input):not(textarea) {
      user-select: none !important;
    }
  }

  // Colors
  .xh-black { color: var(--xh-black); }
  .xh-blue { color: var(--xh-blue); }
  .xh-blue-dark { color: var(--xh-blue-dark); }
  .xh-blue-gray { color: var(--xh-blue-gray); }
  .xh-blue-gray-dark { color: var(--xh-blue-gray-dark); }
  .xh-blue-gray-light { color: var(--xh-blue-gray-light); }
  .xh-blue-light { color: var(--xh-blue-light); }
  .xh-blue-muted { color: var(--xh-blue-muted); }
  .xh-gray { color: var(--xh-gray); }
  .xh-gray-dark { color: var(--xh-gray-dark); }
  .xh-gray-light { color: var(--xh-gray-light); }
  .xh-green { color: var(--xh-green); }
  .xh-green-muted { color: var(--xh-green-muted); }
  .xh-orange { color: var(--xh-orange); }
  .xh-orange-muted { color: var(--xh-orange-muted); }
  .xh-red { color: var(--xh-red); }
  .xh-red-muted { color: var(--xh-red-muted); }
  .xh-text-color { color: var(--xh-text-color); }
  .xh-text-color-accent { color: var(--xh-text-color-accent); }
  .xh-text-color-muted { color: var(--xh-text-color-muted); }
  .xh-transparent { color: transparent; }
  .xh-white { color: var(--xh-white); }
  .xh-yellow { color: var(--xh-yellow); }
  .xh-yellow-light { color: var(--xh-yellow-light); }

  // Colors - intents
  .xh-intent-primary { color: var(--xh-intent-primary); }
  .xh-intent-danger { color: var(--xh-intent-danger); }
  .xh-intent-success { color: var(--xh-intent-success); }
  .xh-intent-warning { color: var(--xh-intent-warning); }
  .xh-bg-intent-primary {
    background-color: var(--xh-intent-primary);
    color: white;
  }
  .xh-bg-intent-danger {
    background-color: var(--xh-intent-danger);
    color: white;
  }
  .xh-bg-intent-success {
    background-color: var(--xh-intent-success);
    color: white;
  }
  .xh-bg-intent-warning {
    background-color: var(--xh-intent-warning);
    color: white;
  }

  // Colors - pos/neg (red/green) vals
  .xh-pos-val { color: var(--xh-pos-val-color); }
  .xh-neg-val { color: var(--xh-neg-val-color); }
  .xh-neutral-val { color: var(--xh-neutral-val-color); }

  // File Icons
  .xh-file-icon-excel { color: #0e7b41; }
  .xh-file-icon-mail { color: #1077d4; }
  .xh-file-icon-pdf { color: #b31c21; }
  .xh-file-icon-powerpoint { color: #c43e1b; }
  .xh-file-icon-word { color: #1b5ab9; }

  // Misc conveniences.
  .xh-align-center {
    text-align: center;
    justify-content: center;
  }

  .xh-align-left {
    text-align: left;
    justify-content: flex-start;
  }

  .xh-align-right {
    text-align: right;
    justify-content: flex-end;
  }

  .xh-bg {background-color: var(--xh-bg)}
  .xh-bg-alt {background-color: var(--xh-bg-alt)}
  .xh-bg-highlight {background-color: var(--xh-bg-highlight)}

  .xh-border { border: var(--xh-border-solid); }
  .xh-border-bottom { border-bottom: var(--xh-border-solid) !important; }
  .xh-border-dotted { border: var(--xh-border-dotted); }
  .xh-border-left { border-left: var(--xh-border-solid) !important; }
  .xh-border-right { border-right: var(--xh-border-solid) !important; }
  .xh-border-solid { border: var(--xh-border-solid); }
  .xh-border-top { border-top: var(--xh-border-solid) !important; }

  .xh-bold { font-weight: 600; } // note this is technically demi-bold - 700 often too heavy
  .xh-font-family-headings { font-family: var(--xh-font-family-headings); }
  .xh-font-family-mono { font-family: var(--xh-font-family-mono); }
  .xh-font-size-large { font-size: var(--xh-font-size-large-em); }
  .xh-font-size-small { font-size: var(--xh-font-size-small-em); }

  .xh-margin { margin: var(--xh-pad-px); }
  .xh-margin-double { margin: var(--xh-pad-double-px); }
  .xh-margin-half { margin: var(--xh-pad-half-px); }
  .xh-margin-top { margin-top: var(--xh-pad-px); }
  .xh-margin-right { margin-right: var(--xh-pad-px); }
  .xh-margin-bottom { margin-bottom: var(--xh-pad-px); }
  .xh-margin-left { margin-left: var(--xh-pad-px); }
  .xh-margin-lr { margin: 0 var(--xh-pad-px); }
  .xh-margin-tb { margin: var(--xh-pad-px) 0; }
  .xh-margin-none { margin: 0 !important; }

  .xh-pad { padding: var(--xh-pad-px); }
  .xh-pad-double { padding: var(--xh-pad-double-px); }
  .xh-pad-half { padding: var(--xh-pad-half-px); }
  .xh-pad-top { padding-top: var(--xh-pad-px); }
  .xh-pad-right { padding-right: var(--xh-pad-px); }
  .xh-pad-bottom { padding-bottom: var(--xh-pad-px); }
  .xh-pad-left { padding-left: var(--xh-pad-px); }
  .xh-pad-lr { padding: 0 var(--xh-pad-px); }
  .xh-pad-tb { padding: var(--xh-pad-px) 0; }
  .xh-pad-none { padding: 0 !important; }
}

// Lightly patterned background with light and dark theme variants.
.xh-tiled-bg {
  background-image: helpers.inline-svg('<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21"><rect x="0" y="0" width="20" height="20" style="fill: #F5F5F5;" /></svg>');

  .xh-dark & {
    background-image: helpers.inline-svg('<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21"><rect x="0" y="0" width="20" height="20" style="fill: #212121;" /></svg>');
  }
}

.xh-popup {
  // Minimal title style for a header div within a popover - used for e.g column and dimension choosers.
  &__title {
    background-color: var(--xh-popup-title-bg);
    color: var(--xh-popup-title-text-color);
    font-family: var(--xh-popup-title-font-family);
    font-size: var(--xh-font-size-small-px);
    padding: var(--xh-pad-half-px);
    text-align: center;
    text-transform: uppercase;
  }
}