@use "sass-rem/rem" as sass-rem;
// @import './custom/_custom_palette';

$font-family-base : "robotoregular", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-regular : "robotoregular", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-medium : "robotomedium", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-light : "robotolight", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-bold : "robotobold", "Helvetica Neue", Helvetica, Arial, sans-serif;

$font-size-xxxlg : sass-rem.rem(40px);
$font-size-xxlg : sass-rem.rem(32px);
$font-size-xlg : sass-rem.rem(24px);
$font-size-lg : sass-rem.rem(16px); // $font-size-base * 1.25;
$font-size-base : sass-rem.rem(13px); // Assumes the browser default, typically `16px`
$font-size-sm : sass-rem.rem(12px); //$font-size-base * .785;
$font-size-xsm : sass-rem.rem(11px);

$h1-font-size : sass-rem.rem(32px); // $font-size-base * 1.4;
$h2-font-size : sass-rem.rem(24px); // $font-size-base * 1.3;
$h3-font-size : sass-rem.rem(18px); // $font-size-base * 1.2;
// $h3-alt-size  : sass-rem.rem(17px);
$h4-font-size : sass-rem.rem(15px); // $font-size-base * 1;
$h5-font-size : sass-rem.rem(14px); // $font-size-base;
$h6-font-size : sass-rem.rem(13px); // $font-size-base * .875;

$headings-font-family: var(--font-family-medium);
$headings-color: var(--h1);

$label-margin-bottom: 0.5rem;
$paragraph-margin-bottom: 0.5rem;
$link-color: var(--anchor-color);
$link-decoration: underline;
$link-hover-color: var(--anchor-hover-color);
$link-hover-decoration: underline;

@mixin with-html {
    --font-family-base    : #{$font-family-base};
    --font-family-regular : #{$font-family-regular};
    --font-family-medium  : #{$font-family-medium};
    --font-family-light   : #{$font-family-light};
    --font-family-bold    : #{$font-family-bold};
    --font-family-monospace: robotomonoregular, monospace;

    --font-size-xxxlg: #{$font-size-xxxlg};
    --font-size-xxlg: #{$font-size-xxlg};
    --font-size-xlg: #{$font-size-xlg};
    --font-size-lg: #{$font-size-lg};
    --font-size-base: #{$font-size-base};
    --font-size-sm: #{$font-size-sm};
    --font-size-xsm: #{$font-size-xsm};

    --h1-font-size: #{$h1-font-size};
    --h2-font-size: #{$h2-font-size};
    --h3-font-size: #{$h3-font-size};
    --h4-font-size: #{$h4-font-size};
    --h5-font-size: #{$h5-font-size};
    --h6-font-size: #{$h6-font-size};

    --table-header-height: 48px;
    --table-row-height: 40px;
}

// @import "_theme_variables_light";
// @import "_theme_variables_dark";

// $brand-primary : var(--brand-core, $brand_core);
// $brand-info : var(--brand-l2, $brand_l2);
$brand-success        : var(--green_main);
$brand-success-bright : var(--green_l2);
$brand-warning        : var(--yellow-d1);
$brand-warning-bright : var(--yellow-main);
$brand-danger         : var(--error);

// Brand colors
// -------------------------

// $brand-primary:         var(--brand-core, $brand_core);
// $brand-info:            var(--brand-l2, $brand_l2);

// $gray-darker:            $dark7;     //~#222
// $gray-dark:              $dark11;    //~#333
// $gray:                   $dark17;    //~#555
// $gray-light:             var(--light11);   //~#999
// $gray-lighter:           $light3;    //~#EEE

// achromatic color for better transition to light / dark theme
// $body-bg:                 #808080;
// ************************************************************
$text-color:              var(--dark9);
$navbar-default-bg:       var(--light1);
$navbar-default-link-color: var(--dark10);
// $navbar-margin-bottom:    10px;
$navbar-height:           48px;


$common-border-color:   var(--light5);

$dropdown-border:                         $common-border-color;
// $navbar-default-toggle-border-color:      $common-border-color;
$nav-tabs-border-color:                   $common-border-color;
// $nav-tabs-active-link-hover-border-color: $common-border-color;
// $nav-tabs-justified-link-border-color:    $common-border-color;
// $pagination-border:                       $common-border-color;
// $pagination-hover-border:                 $common-border-color;
// $pagination-disabled-border:              $common-border-color;
// $list-group-border:                       $common-border-color;
// $panel-inner-border:                      $common-border-color;
// $panel-default-border:                    $common-border-color;
// $thumbnail-border:                        $common-border-color;
// $input-border:                            $common-border-color;
// $btn-default-border:                      $common-border-color;
$navbar-default-border:                   $common-border-color;


// $nav-tabs-active-link-hover-bg:#fff;

$table-border-color:          transparent;
$modal-footer-border-color:   transparent;
$modal-header-border-color:   transparent;
$modal-content-border-color:  transparent;
// $panel-default-heading-bg:    transparent;

// Fonts
// $rem-baseline: 16px;


// $font-size-20 : sass-rem.rem(20px);
// $font-size-22 : sass-rem.rem(22px);
// $font-size-30 : sass-rem.rem(30px);
// $font-size-10 : sass-rem.rem(10px);

// $line-height-ssm : sass-rem.rem(13px);

// Font colors
// $font-color-medium : var(--dark9);
// $font-color-regular : $dark9;
// $font-color-light : $light16;
// $font-color-disabled : $light10;
// $font-color-error : $red_l2;

$btn-font-weight:         bold;
$headings-font-weight:    lighter;

$border-radius-base:      2px;
// $border-radius-large:     4px;
// $border-radius-small:     $border-radius-base;

// Variables from Bootstrap 3 ****************************
$line-height-base : 1.5 !default;
$line-height-computed : floor(($font-size-base * $line-height-base)); // ~20px
$jumbotron-color : tranparent;
// ********************************************************

// $input-height-base:       32px;
//$input-bg:                $light1;
$input-color:             var(--dark4);
// $input-border-focus:      var(--brand-core, $brand_core);
// $input-bg-disabled:       transparentize($light5,0.75);
// $cursor-disabled:           default;
$padding-input-horizontal:  10px;


// $padding-base-horizontal:  16px;
$padding-base-vertical:     5px;

// $btn-default-bg:            transparent;
// $button-primary-border:     var(--brand-d1, $brand_d1);
$jumbotron-bg:              transparent;


$grid-gutter-width:       16px;

$modal-sm:                  400px;

$modal-backdrop-bg:         var(--dark15);
$modal-backdrop-opacity:    0.2;
$modal-content-bg:          var(--light1);
// $modal-title-font-weight:   600;
$modal-title-line-height:   sass-rem.rem(24px);
$modal-title-padding:       sass-rem.rem(12px);
$modal-inner-padding:       sass-rem.rem(12px);
$modal-border-radius: 2px;

$form-group-margin-bottom:  sass-rem.rem(12px);

// $state-success-text:             $green3;
// $state-success-bg:               $green2;
// $state-success-border:           $green1;



// $state-danger-text:       $error;
// $label-danger-bg:         $error;
// $label-default-bg:        $light8;


// $state-danger-bg:                $red2;
// $state-danger-border:            $red1;


// $alert-danger-bg:              $red2;
// $alert-danger-border:          $red1;
// $alert-danger-text:            $red3;


//$warning-message-bg:             #ffeeb5;
//$warning-message-border:         #eedc9e;

// $state-warning-text:             #8a6d3b !default;
// $state-warning-bg:               #fcf8e3 !default;
// $state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;

// $state-info-text:              var(--brand-d4);
// $state-info-bg:                var(--brand-l2-l20);
// $state-info-border:            var(--brand-core);

// $table-bg-hover:              $light2;
$table-cell-padding:          5px 16px 6px 16px;

$grid-float-breakpoint:       420px;
$grid-float-breakpoint-max:   $grid-float-breakpoint - 1;
// $dialog-sm-float-breakpoint:  434px;

// $panel-body-padding:    16px;
// $panel-heading-padding: 16px;
// $panel-footer-padding: 16px;

// $navbar-default-link-active-bg: $navbar-default-bg;
// $navbar-padding-horizontal:   0;
// $navbar-padding-vertical:     0;
// $navbar-default-link-active-color: var(--brand-core);

$dropdown-link-active-bg:   transparent;
$dropdown-link-active-color: var(--brand-core);

$collapse-first-width  : 920px;
$collapse-second-width : 768px;
$collapse-webadmin-width: 576px;
$collapse-webadmin-window-width: 440px;

@mixin outline {
    box-shadow : 0 0 0 2px var(--brand-l2-t40) !important;
}

@mixin inset-outline {
    box-shadow : inset 0 0 0 2px var(--brand-l2-t40) !important;
}

/* set the overriding variables */
$grid-breakpoints : (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1440px,
        xxxl: 1600px
);
$container-max-widths : (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
        xxl: 1380px,
        xxxl: 1540px
);

$fluid-container-max-width: 1440px;

$scrollbar-height: 8px;

/* badge component */
$badge-font-size: sass-rem.rem(12px);
$badge-border-radius: sass-rem.rem(2px);
$badge-padding-x : sass-rem.rem(8px);
$badge-padding-y : sass-rem.rem(3px);

// CSS Grid layout
$grid-menu-width: 25%;
$grid-content-width: calc(75% - 1rem);
$grid-wide-menu-width: 16%;
$grid-wide-content-width: calc(84% - 1rem);
$grid-super-wide-menu-width    : 12%;
$grid-super-wide-content-width : calc(88% - 1rem);

$grid-table-width: calc(100% - 350px - 1rem);
$grid-panel-width: 350px;
$grid-narrow-table-width: calc(100% - 350px - 1rem);
$grid-narrow-panel-width: 350px;
$grid-super-wide-table-width: calc(100% - 450px - 1rem);
$grid-super-wide-panel-width: 450px;

$input-color-placeholder : var(--light16) !default;
