@import "colors";
$default-border: 1px solid rgba(0, 0, 0, 0.12);
$font-color: rgba(0, 0, 0, 0.8) !default;

//==== UTILITIES ===//

// positions

$positions: (fixed, absolute, relative, sticky, initial, inherit);
// flex
$justify-positions: (
  start: flex-start,
  end: flex-end,
  center: center,
  around: space-around,
  between: space-between,
  evenly: space-evenly,
);
$align-positions: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch,
  baseline: baseline,
);

$flex-directions:(
  "col":column,
  "row":row,
  "row-reverse": row-reverse,
  "col-reverse": column-reverse,
);
// displays
$displays-value: (
  inline,
  block,
  contents,
  flex,
  grid,
  inline-block,
  inline-flex,
  inline-grid,
  inline-table,
  list-item,
  run-in,
  table,
  table-caption,
  table-column-group,
  table-header-group,
  table-footer-group,
  table-row-group,
  table-cell,
  table-column,
  table-row,
  none,
  initial,
  inherit
);

//overflow values
$overflow-values: (visible, hidden, clip, scroll, auto);

//==== END OF UTILITIES ===//

//grid
$grid-columns: 12;
$pre-font-size: 0.875rem;
//theme colors
$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "dark": #212121,
    "light": #e0e0e0,
    "danger": #b00020,
    "success": #5cb85c,
    "primary": #1e88e5,
    "transparent": rgba(0, 0, 0, 0),
    "white": #fff,
  ),
  $theme-colors
);
// fonts-families
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
  sans-serif !default;
$font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
  "Courier New", monospace !default;
//font sizes use in letter
$font-sizes: (
  "normal": 1rem,
  "small": 0.875rem,
  "caption": 0.75rem,
);
//font weights use un clasees
$font-weights: (
  "thin": 100,
  "extralight": 200,
  "light": 300,
  "normal": 400,
  "medium": 500,
  "semibold": 600,
  "bold": 700,
  "black": 800,
  "extra-black": 900,
);

$heading-font-sizes: (
  "h1": 2em,
  "h2": 1.5em,
  "h3": 1.17em,
  "h4": 1.12rem,
  "h5": 0.83em,
  "h6": 0.75em,
);

$text-font-sizes: (
  "xs": 0.75rem,
  "sm": 0.875rem,
  "normal": 1rem,
  "lg": 1.125rem,
  "xl": 1.25rem,
  "2xl": 1.5rem,
  "3xl": 1.875rem,
  "4xl": 2.25rem,
  "5xl": 3rem,
  "6xl": 3.75rem,
  "7xl": 4.5rem,
  "8xl": 6rem,
  "9xl": 8rem,
);

$viewport-from: 1 !default;
$viewport-steps: 5;
$viewport-to: 100 !default;

$font-size: 16px;
$line-height: 1.5;

$default-border-color: rgba(0, 0, 0, 0.12);
$default-border-radius: 0.5rem !default;

$lop-size: 24 !default; //defines the amount of interations margin and padding does: example $lop-size: 20 will create  class  .m-{1-20} and .p-{1-20}
$xxl-breakpoint: 1400px !default;
$xl-breakpoint: 1280px !default;
$lg-breakpoint: 1024px !default;
$md-breakpoint: 768px !default;
$sm-breakpoint: 576px !default;

$breakpoints: (
  "sm": $sm-breakpoint,
  "md": $md-breakpoint,
  "lg": $lg-breakpoint,
  "xl": $xl-breakpoint,
  "xxl": $xxl-breakpoint,
);

$fractions: (12, 6, 4, 3, 2);

$locations: (
  "t": top,
  "l": left,
  "b": bottom,
  "r": right,
);
$corners: (
  "t": top,
  "b": bottom,
);
$sides: (
  "l": left,
  "r": right,
);
//body
$body-background-color: rgba(0, 0, 0, 0) !default;
//links
$link-color: #1976d2 !default;
$border-radius: 5px !default;
//navbar
$nav-bar-height: 56px;
$nav-bar-default-bg-color: #fff !default;
$nav-bar-border-color: #e0e0e0 !default;
$nav-bar-border-width: 1px !default;
$nav-brand-font-size: 1.5rem !default;
$nav-brand-font-weigh: 700 !default;
$nav-brand-padding: 0.5rem 1rem !default;
$nav-breacrumbs-link-color: rgb(33, 150, 243);
$nav-breacrumbs-link-active-color: rgba(0, 0, 0, 0.53);
$navbar-link-padding: 1rem !default;
$navbar-link-font-weight: 500 !default;
$navbar-link-color: rgba(0, 0, 0, 53);

// nav
$nav-link-default-color: #212121 !default;
$nav-link-font-size: 1rem !default;
$nav-line-height: 1.5 !default;
$nav-link-padding: 0.5rem 1rem !default;
$nav-link-hover-color: map-get(map-get($colors, "blue"), "600");

$navbar-collpase-position: relative !default;
$navbar-collapse-width: 100vw !default;
$navbar-collpase-transiton: all 0.3s ease-in-out !default;

// nav tabs
$tabs-padding:1rem 0.5rem;
$active-tab-color:#2196f3;
$active-tab-font-weigth: 500;
$active-tab-background-color:#2196f3;
$active-tab-transition:all 0.3s ease-in-out;

//contianer
$container-padding: 1rem !default;

//messages
$message-padding: 1rem !default;
$message-padding-y: 1rem !default;
$message-padding-x: 1rem !default;
$message-margin-bottom: 0.5rem !default;
$message-border-width: 1px !default;
$message-border-radius: 5px !default;
/*----messages success----*/
$message-success-color: #1b5e20 !default;
$message-success-border: #4caf50 !default;
$message-succes-background: #c8e6c9 !default;

$message-danger-color: #b71c1c !default;
$message-danger-border: #f44336 !default;
$message-danger-background: #ffebee !default;

$color-error: #f44336 !default;
$background: #fff !default;

//headins h1
$heading-font-weigth: 600 !default;
$heading-font-base-size: 64px !default;
$base-font-weigth: 400 !default;
$base-font-size: 16px !default;

//borders
$border-default-color: #e0e0e0 !default;

$primary: rgb(51, 133, 255);
$secondary: #eee !default;
$danger: rgb(255, 82, 82);
$success: rgb(60, 223, 114);
$warning: rgb(255, 200, 20);
$info: rgb(17, 227, 255);
$bg-color: #fff !default;

//Buttons
$button-padding: 0.5rem 1rem !default;
$button-bg-color: rgba(255, 255, 255, 1) !default;
$button-border-color: #e0e0e0 !default;
$button-radius: 0.25rem !default;
$button-focus-outline-style: solid !default;
$button-focus-outline-width: 1px !default;
$button-focus-outline-color: rgba(0, 0, 0, 12) !default;
$button-focus-outline: none !default;
$flat-button-hover-color: rgba(#000, 0.05);
//Forms
$form-field-margin-bottom: 1rem !default;
$form-field-label-size: 1rem !default;
$form-field-label-weigth: 700 !default;
$form-field-label-mb: 0.5rem !default;
$form-field-label-heigth: 1.25 !default;
$form-field-label-color: rgba(0, 0, 0, 0.87) !default;

$form-input-padding: 0.5rem 1rem !default;
$form-input-font-size: 1rem !default;
$form-input-font-color: rgba(0, 0, 0, 0.6) !default;
$form-input-placeholder-color: rgba(0, 0, 0, 0.12) !default;
$form-input-border-width: 1px !default;
$form-input-border-color: $default-border-color !default;
$form-input-border-radius: 0.25rem !default;
$form-input-background-color: #fff !default;
$form-input-active-border-width: $form-input-border-width !default;
$form-input-active-border-color: rgba(0, 0, 0, 0.6) !default;
$form-input-invalid-color: #b71c1c !default;
$form-text-color: rgba(0, 0, 0, 0.6) !default;
$form-text-size: 0.75rem !default;
$form-input-sm-font-size: 0.865rem !default;
$form-input-sm-padding: 0.5rem 0.75 !default;
$form-input-lg-font-size: 1.25rem !default;
$form-input-lg-padding: 0.75 1.25rem !default;
$form-input-xl-font-size: 1.5rem !default;
$form-input-xl-padding: 1rem 1.5rem !default;
/*TABLES*/
$table-bg-color: #fff !default;
$table-heading-font-size: 1rem !default;
$table-heading-font-weight: 700 !default;
$table-cell-padding: 0.5em 0.75em !default;
$table-border-width: 1px !default;
$table-border-style: solid !default;
$table-border-color: rgba(0, 0, 0, 0.12) !default;
$table-striped-bg-color: #f5f5f5 !default;
$table-hover-bg-color: #e0e0e0 !default;
$font-size: 16px !default;
$nav-bar-padding: 0.5rem 1rem !default;

/*LIST*/
$list-border: 1px solid rgba(0, 0, 0, 0.12);
$list-border-radius: 5px !default;
$list-item-padding: 0.5rem 1rem !default;
$list-item-hover-color: #eee !default;
$list-margin-bottom: 1rem !default;
$list-item-separated-padding: 0.5rem 1rem;
$list-item-separated-border: $default-border;
$list-item-serparates-radius: $border-radius;
/*cards*/
$card-padding: 1rem !default;
$card-border-width: 1px !default;
$card-border-style: solid !default;
$card-border-color: rgba(0, 0, 0, 0.12);
$card-border-radius: 5px !default;

$card-title-font-size: 20px !default;
$card-title-font-weight: 600 !default;
$card-title-font-color: rgba(0, 0, 0, 0.8);
$card-title-line-height: 1.2 !default;

$card-subtitle-font-size: 16px !default;
$card-subtitle-font-weight: 400 !default;
$card-subtitle-opacity: 0.53;
$card-subtitle-line-height: 1.25 !default;

$card-avatar-width: 40px !default;
$card-avatar-height: 40px !default;
$card-avatar-margin-right: 1rem !default;

// spinner
$spinner-width: 2.5rem !default;
$spinner-height: 2.5rem !default;
$spinner-boder-width: 2px !default;
$spinner-boder-style: solid !default;
$spinner-border-color: rgba(0, 0, 0, 0.12) !default;
$spinner-line-width: 2px !default;
$spinner-line-color: rgba(0, 0, 0, 0.8) !default;
$spinner-line-style: solid !default;
$spinner-animation-time: 1s !default;
$spinner-animation-ease: linear !default;
$spinner-animation: spin !default;

//sidebar
$sidebar-width: 300px !default;
$sidebar-height: calc(100vh - #{$nav-bar-height} + 1px) !default;
$sidebar-position: relative !default;
$sidebar-border-color: $border-default-color !default;
$sidebar-border-width: 1px !default;
$sidebar-border-style: solid !default;
$sidebar-background-color: rgba(0, 0, 0, 0);
$sidebar-z-index: 30;
$sidebar-transition-property: all !default;
$sidebar-transition-duration: 0.3s !default;
$sidebar-transition-ease: ease-in-out !default;
$sidebar-expand-btn-width: 57px !default;
$sidebar-expand-btn-transform: rotate(180deg);
$sidebar-overflow: visible !default;
// Expandible
$expandible-transtion: height !default;
$expandible-transtion-time: 100ms !default;
$expandible-transtion-ease: ease-in-out !default;
// opacity
$opacity-range: 20;

// modals
$modal-background-background-color: rgba(0, 0, 0, 0.37) !default;
$modal-background-z-index: 12 !default;
$modal-content-max-height: 75vh !default;
$modal-content-background-color: #fff !default;
$modal-content-boder-radius: 0.25rem !default;
$modal-title-font-size: 1.5rem;
$modal-title-font-weight: 600;
$modal-sizes: () !default;
$modal-padding: 1rem !default;
$modal-border: $default-border;
$modal-sizes: map-merge(
  (
    default: 600px,
    xxl: 1400px,
    xl: 1280px,
    lg: 720px,
    sm: 350px,
  ),
  $modal-sizes
);

// shadows
$box-shadow-sizes: () !default;
$box-shadow-color:rgba(0, 0, 0, 0.12) !default;
$box-shadow-sizes: map-merge(
  (
    "sm": 0 0 0.25rem $box-shadow-color,
    "md": 0 0 0.75rem $box-shadow-color,
    "lg": 0 0 1.25rem $box-shadow-color,
    "xl": 0 0 1.5rem $box-shadow-color,
    "xxl": 0 0 2rem $box-shadow-color,
  ),
  $box-shadow-sizes
);

// notification

$notification-padding: 1rem !default;
$notification-width: 300px !default;
$notification-boder: 1px solid #e0e0e0 !default;
$notification-shadow: 0 0 3px rgba(0, 0, 0, 0.12) !default;
$notification-boder-radius: 0.25rem !default;
$notification-title-font-weight: bold !default;
$notification-title-font-size: 1.25rem !default;

$fixed-positions: (top, bottom, left, right);

// Sizing
$sizes: (
  (from:0.5,to:18,"size":0.25),
  (from:20,to: 4,"size":1rem)
  (from:0.5,to:18,"size":2rem)
);