@use "sass:map";

// This file is where you set specific colors, fonts per the branding
//  or breakpoints per website grid

$brand: 'default' !default;

// Set active brand to be one of the keys in the $brand-map variable below
$brand: 'ultherapy';

// these will probably be the same for all sites.
$brand-bar-height-inactive: 25px;
$brand-bar-height-active: 85px;

$inactive-color: #000 !default;
$active-color: #fff !default;
$toggle-color: #fff !default;

$font-base: 'Open Sans Condensed', sans-serif;
$font-weight: 700;

$brand-map: (
  'asclera': (
    'inactive-color': #491754,
    'active-color': #fff,
    'toggle-color': #fff,
    'default-active-color': $active-color
  ),
  'belotero': (
    'inactive-color': #d43968,
    'active-color': #fff,
    'toggle-color': #fff,
    'default-active-color': $active-color
  ),
  'cellfina': (
    'inactive-color': #003963,
    'active-color': #fff,
    'toggle-color': #fff,
    'default-active-color': $active-color
  ),
  'describepatch': (
    'inactive-color': #64ccc9,
    'active-color': #ccd1d9,
    'toggle-color': #2e008b,
    'default-active-color': $active-color
  ),
  'merzaesthetics': (
    'inactive-color': #000,
    'active-color': #fff,
    'toggle-color': #fff,
    'default-active-color': $active-color
  ),
  'neocutis': (
    'inactive-color': #192b3d,
    'active-color': #40c2cc,
    'toggle-color': #fff,
    'default-active-color': $active-color
  ),
  'radiesse': (
    'inactive-color': #00aec7,
    'active-color': #fff,
    'toggle-color': #fff,
    'default-active-color': $active-color
  ),
  'ultherapy': (
    'inactive-color': #f1b434,
    'active-color': #fff,
    'toggle-color': #fff,
    'default-active-color': $active-color
  ),
  'xeominaesthetic': (
    'inactive-color': #c6007e,
    'active-color': rgba(255, 255, 255, 0.75),
    'toggle-color': #fff,
    'default-active-color': $active-color
  )
);

@each $key, $map in $brand-map {
  @if $brand == $key {
    $inactive-color: map.get($map, 'inactive-color');
    $active-color: map.get($map, 'active-color');
    $toggle-color: map.get($map, 'toggle-color');
    $default-active-color: map.get($map, 'default-active-color');
  }
}

// Sites might have different z-indexes;
$z-index: 10000;

// $min-width-md: should be same as min-width when desktop menu is visible
$min-width-md: 992px;

// Affects image sizes when they become large.  Adjust as necessary, if images are being cut off r/l
$min-width-lg: 1200px;

// Should be same as max-width of desktop menu container, or approx 20-40px less than $min-width-lg
$max-width-lg: 1170px;

// Scale images up or down by a pixel or two.  @see image-max-height() mixin
$image-scale: 0;

// Is image 'dark' or 'light'?  Default: 'light'
$image-brightness: 'light';