// Styland Path
$stylandBasePath: "~styland/";

// Default Font Variables
$defaultFontColor:  "black-light";
$defaultFontSize:    md;
$defaultFontWeight:  400;
$defaultFontFamily:  first;
$fallbackFontFamily: Arial;

// Font Family Name Variables
$fontFamilyNamePrimary:   "Roboto";
$fontFamilyNameSecondary: "Roboto";

// Font Family Variables
$ffFirst:  $fallbackFontFamily;
$ffSecond: $fallbackFontFamily;
@if $fontFamilyNamePrimary != null {
    $ffFirst: str-replace($fontFamilyNamePrimary, "+", " "), $fallbackFontFamily;
}
@if $fontFamilyNameSecondary != null {
    $ffSecond: str-replace($fontFamilyNameSecondary, "+", " "), $fallbackFontFamily;
}

// Header Size Variables
$hsXs: 18px;
$hsSm: 24px;
$hsMd: 28px;
$hsLg: 36px;
$hsXl: 48px;

// Font Sizes Variables
$fsXs : 10px;
$fsSm : 12px;
$fsMd : 14px;
$fsLg : 18px;
$fsXl : 24px;

// Font Weight Variables
$fontWeightMin:  300;
$fontWeightMax:  800;
$fontWeightStep: 100;

// Color
$colorFirst:          #0071bc;
$colorSecond:         #f15a24;
$colorThird:          rgba(#0071bc, .5);
$colorDanger:         #d9534f;
$colorSuccess:        #5cb85c;
$colorWarning:        #ffd500;
$colorInfo:           #5bc0de;
$colorBlack:          #111;
$colorBlackLight:     #333;
$colorBlackLighten:   #555;
$colorBlackLightest:  #777;
$colorBlackLightness: #999;
$colorWhiteDarkness:  #d0d0d0;
$colorWhiteDarkest:   #e1e1e1;
$colorWhiteDarken:    #ececec;
$colorWhiteDark:      #f6f6f6;
$colorWhite:          #ffffff;

// Margin Variables
$marginMin:  0;
$marginMax:  80;
$marginStep: 5;

// Padding Variables
$paddingMin:  0;
$paddingMax:  80;
$paddingStep: 5;

// Viewport Variables
$screen-xl-width: 1400px;
$screen-lg-width: 1200px;
$screen-md-width: 960px;
$screen-sm-width: 770px;
$gap-val: 15;
$gap-px: #{$gap-val}px;
$gutter: $gap-val * 2;

// Side Navbar Variables
$snb-width: 260px;
$snb-bgcolor: $colorBlack;
$snb-bgcolor-second: $colorBlackLight;
$snb-text-color-primary: $colorWhiteDark;
$snb-text-color-secondary: $colorWhiteDarkness;
$snb-base-color: $colorWhite;

// Top Navbar Variable
$panel-top-bar-height: 80px;

// Components Using Variables
$useDropdownComponent: true;
$useBlogComponent: false;
$useSideNavbarComponent: true;
$useTopNavbarComponent: true;
$useButtonComponent: true;
$useElementsComponent: true;
$useModalComponent: true;
$useTabComponent: true;

// Your Custom Variable