
// Breakpoint viewport sizes and media queries.
$breakpoint-tablet                       : 768px;
$breakpoint-desktop                      : 1024px;
$breakpoint-desktop-plus                 : 1366px;


// Colors
$default                                 : #f7f8f9 !default;
$success                                 : #4fd69c !default;
$warning                                 : #ffdd57 !default;
$primary                                 : #1da1f2 !default;
$danger                                  : #f75676 !default;
$purple                                  : #5e72e4 !default;
$sky                                     : #54c7ec !default;
$gray                                    : #6c757d !default;
$dark                                    : #343a40 !default;
$white                                   : #ffffff !default;
$black                                   : #000000 !default;
$e-font-color                            : rgba(0, 0, 0, 0.6) !default;

// Colors gradient
$purple-gradient                         : linear-gradient(40deg, #ff6ec4, $purple);
$blue-gradient                           : linear-gradient(40deg, #45cafc, #303f9f);
$green-gradient                          : linear-gradient(40deg, #00c9ff, #92fe9d);
$inst-gradient                           : radial-gradient(
  circle at 30% 107%,
  #fdf497 0%,
  #fdf497 5%,
  #fd5949 45%,
  #d6249f 60%,
  #285aeb 90%
);

// Do not remove from this place
$colors: (
  "success"                              : $success,
  "danger"                               : $danger,
  "primary"                              : $primary,
  "purple"                               : $purple,
  "sky"                                  : $sky,
  "gray"                                 : $gray,
  "black"                                : $black,
  "dark"                                 : $dark
);

$colors-gradient: (
  "purple-gradient"                      : $purple-gradient,
  "green-gradient"                       : $green-gradient,
  "blue-gradient"                        : $blue-gradient,
  "inst-gradient"                        : $inst-gradient
);

@import "colors";


// Enable animations
$dropdown-enable-animation               : true !default;
$navigation-enable-animation             : true !default;
// Cap Modal / Sidenav
$cap-enable-animation                    : true !default;


// Body and default styles
$font-family                             : "Nunito", sans-serif !default;
$body-bg                                 : #fff !default;
$body-color                              : lighten(#343a40, 7%) !default;
$body-font-size                          : 0.9375rem !default;
$line-height                             : 1.5 !default;
$font-weight                             : 400 !default;
$border-radius                           : 0.25rem !default;
$component-font-size                     : 1rem !default;
$background-default                      : $default;
$font-color                              : $e-font-color;
$transition                              : box-shadow 0.18s ease-out, background 0.18s ease-out, color 0.18s ease-out;

// Alerts styles
$alert-padding                           : 1rem 2.5rem 1rem 1.25rem !default;
$alert-font-size                         : 0.9rem !default;
$alert-snack-border-radius               : 20px !default;
$alert-footer-padding                    : 10px 0 0 !default;
$alert-icon-size                         : 1.20rem;

// Breadcrumb styles
$breadcrumb-padding                      : 0.5rem 1rem !default;

// Buttons styles
$btn-padding                             : 0.575rem 1.25rem !default;
$btn-padding-small                       : 0.27rem 0.85rem !default;
$btn-padding-plus                        : 0.75rem 2rem !default;
$btn-font-size                           : 0.9rem !default;
$btn-font-size-small                     : 0.85rem !default;
$btn-font-size-plus                      : 1.125rem !default;
$btn-border                              : solid 1px transparent !default;
$btn-letter-spacing                      : 0.4px !default;
$btn-margin                              : 0.3rem !default;
$btn-float-position                      : fixed !default;
$btn-float-spacing                       : 30px !default;
$btn-float-z-index                       : 10000 !default;

// Anime buttons styles
$btn-anime-border                        : solid 1px rgba(0, 0, 0, 0.1) !default;
$btn-anime-border-top-width              : 0.0625rem !default;
$btn-anime-border-bottom-width           : calc(0.15rem + 0.0625rem) !default;
$btn-anime-border-radius                 : $border-radius + 0.25;

// Circle buttons styles
$btn-circle-font-size                    : 1.2rem !default;
$btn-circle-height                       : 56px !default;
$btn-circle-width                        : $btn-circle-height;

// Cards styles
$card-bg                                 : $white;
$card-shadow                             : 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !default;
$card-profile-height                     : 120px !default;
$card-profile-photo-bg                   : #f1f1f1;
$card-profile-photo-margin               : -60px auto 0 !default;
$card-profile-photo-height               : 125px !default;
$card-profile-photo-width                : $card-profile-photo-height;
$card-body-padding                       : 1.25rem !default;
$card-title-font-size                    : 1.5rem !default;
$card-text-font-size                     : 0.9rem !default;

// Cards mansory styless
$card-mansory-column-count-tablet        : 2 !default;
$card-mansory-column-count-desktop       : 3 !default;
$card-mansory-column-count-desktop-plus  : 4 !default;
$card-mansory-column-gap                 : 1.25rem !default;

// Dropdown styles
$dropdown-padding                        : 0.5rem 1.25rem !default;
$dropdown-font-size                      : 0.9rem !default;

// drop-items
$drop-items-min-width                    : 12rem !default;
$drop-items-z-index                      : 10000 !default;
$drop-items-shadow                       : 0 8px 8px rgba(10, 10, 10, 0.1) !default;
$drop-items-padding                      : 10px 7px !default;
$drop-item-hover-color                   : $primary;
$drop-item-bg                            : $white;
$drop-item-padding                       : 10px 15px;

// Control styles
$control-padding                         : 0.375rem 0.75rem !default;
$control-height                          : calc(2.42rem + 2px) !default;
$control-transition                      : border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
$control-border-color                    : #e3e4e5 !default;
$control-border-color-focus              : $primary;
$control-border                          : solid 1px $control-border-color !default;
$control-color                           : $font-color !default;
$control-border-radius                   : $border-radius;
$control-bg                              : $white !default;
$control-font-size                       : 1rem !default;

// Control small
$control-padding-small                   : 0.3rem 0.5rem !default;
$control-height-small                    : calc(1.75rem + 2px) !default;
$control-font-size-small                 : 0.8rem !default;

// Control plus
$control-padding-plus                    : 0.45rem 1rem !default;
$control-height-plus                     : calc(3.15rem + 2px) !default;
$control-font-size-plus                  : 1.2rem !default;
$control-shadow                          : inset 0 1px 1px rgba(10, 10, 10, 0.05) !default;
$control-disabled-bg                     : #f3f3f3 !default;

// Control textarea
$control-textarea-height                 : 120px !default;
$control-textarea-p-top                  : 0.9em !default;

// Form group styles
$form-group-m-bottom                     : 0.85rem !default;
$form-info-font-size                     : 0.8rem !default;
$form-info-color                         : #6c757d !default;
$form-info-m-top                         : 0.3rem !default;

// Form Label styles
$label-margin-bottom                     : 0.5rem !default;
$label-font-weight                       : $font-weight + 300 !default;

// Control helper styles
$control-helper-padding                  : 0 0.9em !default;
$control-helper-color                    : rgba(0, 0, 0, 0.5) !default;
$form-box-padding                        : 2rem !default;
$form-box-padding-desktop                : 3rem !default;
$form-box-border                         : solid 0.5px rgba(0, 0, 0, 0.05) !default;
$form-box-border-radius                  : 0.625rem !default;
$range-height                            : 0.5rem !default;
$range-bg                                : #f3f3f3 !default;
$range-border-radius                     : 100px !default;
$range-thumb-height                      : 17px !default;
$range-thumb-width                       : $range-thumb-height;
$range-shadow                            : 0.15rem 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !default;
$range-border                            : solid 0.5px rgba(0, 0, 0, 0.05) !default;

// Marked styles
$marked-color                            : rgba(0, 0, 0, 0.7) !default;

// List styles
$list-border                             : solid 1px rgba(0,0,0,.125) !default;
$list-item-padding                       : 0.6em 0.90em !default;
$list-item-bg                            : $white !default;
$list-item-border                        : $list-border !default;

// Modal styles
$modal-border                            : solid 1px rgba(0,0,0,0.060) !default;
$modal-padding                           : 1rem !default;
$modal-content-box-shadow                : 0 8px 17px 0 rgba(0,0,0,0.2) !default;
$modal-content-width                     : 92.5% !default;
$modal-content-max-width                 : 600px !default;
$modal-content-max-height                : calc(100vh - 40px) !default;



// Navigation styles * Nav *
$nav-min-height                          : 3.75rem !default;
$nav-padding-desktop                     : 5% !default;
$nav-border-bottom                       : solid 1px lighten(rgba(0, 0, 0, 0.1), 20%) !default;
$menu-item-padding                       : 0.5rem 1.25rem !default;
$menu-item-line-height                   : 22px !default;
$menu-item-bg-hover                      : rgba(255, 255, 255, 0.17) !default;
$menu-padding                            : 7px 0 10px !default;

// Sidenav styles
$sidenav-bg                              : $white !default;
$sidenav-height                          : 100vh !default;
$sidenav-width                           : 13.75rem !default;
$sidenav-box-shadow                      : 0 8px 17px 0 rgba(0,0,0,0.2) !default;

$sidenav-brand-padding                   : 1.25rem 3rem !default;

$sidenav-label-margin-left               : 1.8rem !default;
$sidenav-label-font-size                 : 0.75rem !default;

$sidenav-item-padding                    : 0.5em 1.75em 0.5em 2.1875rem !default;
$sidenav-item-font-size                  : 0.875rem !default;

// Pagination styless
$page-item-font-size                     : 1em !default;
$page-item-padding                       : 0.3em 0.5em !default;
$page-item-margin                        : 0.25rem !default;
$page-item-min-width                     : 2.25em !default;
$page-item-border                        : solid 1px rgba(0,0,0,0.1) !default;
$page-item-bg                            : $white !default;

// Progress styles
$progress-bg                             : #1ebea4 !default;

// Tables styles
$table-th-border                         : solid rgba(0,0,0,0.1) !default;

// Grid
$grid-col-padding                        : 0 0.75rem 0.75rem !default;
