@use 'components/ui/header';

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');
@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/bootstrap/scss/mixins';
@import 'bootstrap/scss/utilities';

$utilities: (
  'font-family': (
    property: font-family,
    class: font,
    values: (
      monospace: var(--#{$variable-prefix}font-monospace),
      source: Source Sans Pro,
    ),
  ),
  'width': (
    property: width,
    class: w,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      90: 90%,
      100: 100%,
      auto: auto,
      max-content: max-content,
      144: 144px,
      110: 110px,
    ),
  ),
);

$space: 0.125rem;

$spacers: map-merge(
  $spacers,
  (
    half: $space,
    6: 3.5rem,
    20: 20px,
    40: 40px,
  )
);

$font-family-base: 'Titillium Web', system-ui;

$font-weight-bold: 600;

$font-sizes: (
  75: 0.75rem,
  4: 1.125rem,
);

$line-height-lg: 1.75;
$border-radius-lg: 16px;
$box-shadow-sm: 0 0 24px rgba(0, 11, 79, 0.04);

$body-color: #152536;

$table-striped-bg: $gray-100;

$secondary: #68717a;

$light: #dedddd;

$enable-negative-margins: true;

.header-icon__placeholder {
  background-color: #a3a3a3;
}

.header-icon__image,
.header-icon__placeholder {
  width: 24px;
  height: 24px;
}

.header-icon__practitioner-avatar {
  width: 24px;
  height: 24px;
}

.dataTable__value-label {
  width: auto;

  @include media-breakpoint-up(sm) {
    width: 130px;
    min-width: 130px;
  }
}

.fhir-ui__Body__data-cell {
  padding-left: 24px !important;
}

.fhir-ui__ValueUnitQty {
  font-size: 28px;
}

.fhir-ui__ValueUnit {
  font-size: 18px;
}

.fhir-ui__Badge {
  width: fit-content;
  margin: 0 4px;
  @include media-breakpoint-down(sm) {
    margin: 4px 0;
  }
}

.fhir-ui__Title {
  font-size: 1.125rem;
  @include media-breakpoint-down(sm) {
    font-size: 1rem !important;
  }
}

.header__title-row {
  padding-right: 32px;
}

.chevron:hover {
  background-color: $gray-200;
  border-radius: 4px;
}

@include media-breakpoint-up(sm) {
  .w-90.title-width-sm {
    width: 100% !important;
  }

  .w-110.graph-width-sm {
    width: 144px !important;
  }

  .badges-max-width-sm {
    max-height: 24px;
  }

  .graph-width-sm {
    width: 200px !important;
  }
}
// adding custom colors to the theme

$theme-colors: map-merge(
  $theme-colors,
  (
    'teal-100': $teal-100,
    'teal-600': $teal-600,
    'yellow-100': $yellow-100,
    'yellow-600': $yellow-600,
    'red-100': $red-100,
    'red-600': $red-600,
    'gray-200': $gray-200,
    'blue-900': $blue-900,
    'orange-100': $orange-100,
    'orange-600': $orange-600,
    'gray-100': $gray-100,
    'gray-500': $gray-500,
    'gray-600': $gray-600,
    'pink-500': $pink-500,
    'indigo-100': $indigo-100,
    'indigo-600': $indigo-600,
    'cyan-100': $cyan-100,
    'cyan-600': $cyan-600,
    'blue-100': $blue-100,
    'blue-600': $blue-600,
    'blue-500': $blue-500,
    'white': $white,
    'secondary': $secondary,
  )
);

// additional sass map merges to enable bg-xxx in 5.1.1
$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value');
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop(
  $utilities-colors,
  rgba-css-var,
  '$key',
  'text'
);
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, '$key', 'bg');

@import '~bootstrap/scss/bootstrap.scss';