// Custom Prefix
$variable-prefix: 'kleon-';

//MY THEME COLORS
$primary:        #924AEF;
$secondary:      #E328AF;
$success:        #38E25D;
$info:           #5ECFFF;
$warning:        #FF9325;
$danger:         #FF4A55;
$blue:           #1220a3;
$green:          #38E25D;
$red:            #FF4A55;
$yellow:         #FFE161;
$orange:         #FFAB2D;
$cyan:           #5ECFFF;
$accent-01:      #DFEDF2;


//WHITE AND GRAY COLORS
$white:          #15132B;
$light:          #0D0B21;
$light-100:      #0D0B21;
$light-200:      #1D1B33;
$light-300:      #23213b;
$light-400:      #2f2c50;
$muted:          #2B2940;
$gray:           #FFFFFF;
$gray-100:       #FFFFFF;
$gray-200:       #C2C2C2;
$gray-300:       #C7C7C7;
$gray-400:       #8F8F8F;
$dark:           #FFFFFF; 
$black:          #FFFFFF;


// scss-docs-start colors-map
$colors: (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "blue":       $blue,
    "green":      $green,
    "red":        $red,
    "yellow":     $yellow,
    "orange":     $orange,
    "cyan":       $cyan,

    "white":      $white,
    "light":      $light,
    "light-100":  $light-100,
    "light-200":  $light-200,
    "light-300":  $light-300,
    "muted":      $muted,
    "gray":       $gray,
    "gray-100":   $gray-100,
    "gray-200":   $gray-200,
    "gray-300":   $gray-300,
    "gray-400":   $gray-400,
    "dark":       $dark,
    "black":      $black,
) !default;
// scss-docs-end colors-map


// scss-docs-start theme-color-variables

// scss-docs-end theme-color-variables

// scss-docs-start theme-colors-map
$theme-colors: (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "blue":       $blue,
    "green":      $green,
    "red":        $red,
    "yellow":     $yellow,
    "orange":     $orange,
    "cyan":       $cyan,

    "white":      $white,
    "light":      $light,
    "light-100":  $light-100,
    "light-200":  $light-200,
    "light-300":  $light-300,
    "muted":      $muted,
    "gray":       $gray,
    "gray-100":   $gray-100,
    "gray-200":   $gray-200,
    "gray-300":   $gray-300,
    "gray-400":   $gray-400,
    "dark":       $dark,
    "black":      $black,
) !default;
// scss-docs-end theme-colors-map


//*-----------------------------------------------
//|   Gutter
//-----------------------------------------------*/
$grid-gutter-width:  32px !default;


// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark: $gray-100 !default;

// Min contrast ratio
$min-contrast-ratio: 2 !default;

// Components
//

// scss-docs-start border-variables
$border-width:                1px !default;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
) !default;

$border-style:                solid !default;
$border-color:                $gray-400 !default;
$border-color-translucent:    rgba($black, .175) !default;

// scss-docs-start border-radius-variables
$border-radius-sm:            $_8px !default; // 8px
$border-radius:               $_14px !default; // 14px
$border-radius-lg:            $_25px !default; // 25px
// scss-docs-end border-radius-variables


//*-----------------------------------------------
//|   Spacing
//----------------------------------------------

$spacer: 20px !default; // 20px
$spacers: () !default;

$spacers: map-merge(
    (
        0: 0,
        1: $spacer * 0.25,  // 5px
        2: $spacer * 0.5,   // 10px
        3: $spacer * 0.75,  // 15px
        4: $spacer,         // 20px
        5: $spacer * 1.5,   // 30px
        6: $spacer * 2.5,   // 50px
        7: $spacer * 3,     // 60px
        8: $spacer * 4,     // 80px
        9: $spacer * 5,     // 100px
        10: $spacer * 6,    // 120px
        11: $spacer * 7.5   // 150px
    ),
    $spacers
);

//*-----------------------------------------------
//|   Link
//-----------------------------------------------*/
$link-decoration: none !default;
$link-hover-decoration: underline !default;



//*-----------------------------------------------
//|   Fonts Families
//-----------------------------------------------*/
$font-family-sans-serif: 'Open Sans', sans-serif;
$font-family-heading: 'Cairo', sans-serif;
$font-family-base: $font-family-sans-serif !default;


//*-----------------------------------------------
//|   Fonts
//-----------------------------------------------*/
$font-size-base: 1rem !default;
$font-sizes: () !default;

$font-sizes: (
    '-1': 0.875rem,
    0: 1rem,
    1: 1.375rem,
    2: 1.777rem,
    3: 2.369rem,
    4: 3.157rem,
    5: 4.199rem,
    6: 5.584rem,
    7: 7.427rem,
    8: 9.878rem,
);

$font-size-lg: map_get($font-sizes, 0) !default;
$font-size-sm:  map_get($font-sizes, '-1') !default;


$font-weight-thin: 100 !default;
$font-weight-lighter: 200 !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: 800 !default;
$font-weight-black: 900 !default;

$line-height-base: 1.45 !default;
// $input-btn-line-height: 1.5 !default;

$h1-font-size: $_48px;
$h2-font-size: $_34px;
$h3-font-size:  $_30px;
$h4-font-size: $_24px;
$h5-font-size: $_18px;
$h6-font-size: $_16px;

// scss-docs-end display-headings

$lead-font-size: $font-size-lg !default;
$lead-font-weight: $font-weight-normal !default;

$text-muted: $gray-100 !default;

$blockquote-font-size: $font-size-lg !default;

// Navbar customize
$navbar-font-size: $font-size-base * 0.8 !default;

$display-font-sizes: (
    1: 5rem,
    2: 4.5rem,
    3: 4rem,
    4: 3rem,
    5: 2.25rem,
    6: 2rem
) !default;

$display-font-weight: $font-weight-medium !default;

// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

// scss-docs-start input-btn-variables
$input-btn-padding-y:         0.75rem !default;
$input-btn-padding-x:         2.3rem !default;
$input-btn-font-family:       null !default;
$input-btn-font-size:         $font-size-base !default;
$input-btn-line-height:       $line-height-base !default;

$input-btn-padding-y-sm:      0.375rem !default;
$input-btn-padding-x-sm:      1.375rem !default;

$input-btn-padding-y-lg:      1.25rem !default;
$input-btn-padding-x-lg:      3rem !default;
// scss-docs-end input-btn-variables



//*-----------------------------------------------
//|   Card
//-----------------------------------------------*/
// scss-docs-start card-variables
$card-spacer-y:                     $spacer !default;
$card-spacer-x:                     $spacer !default;
$card-title-spacer-y:               $spacer * .5 !default;
$card-border-width:                 $border-width !default;
$card-border-color:                 $light-200 !default;
$card-border-radius:                $border-radius-lg !default;
$card-box-shadow:                   null !default;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y:                $card-spacer-y * .5 !default;
$card-cap-padding-x:                $card-spacer-x !default;
$card-cap-bg:                       rgba($black, .03) !default;
$card-cap-color:                    null !default;
$card-height:                       null !default;
$card-color:                        null !default;
$card-bg:                           $white !default;
$card-img-overlay-padding:          $spacer !default;
$card-group-margin:                 $grid-gutter-width * .5 !default;
// scss-docs-end card-variables


//*-----------------------------------------------
//|   Accordion
//-----------------------------------------------*/

//ACCORDION BASIC
$accordion-padding-y:                     24px !default;
$accordion-padding-x:                     24px !default;
$accordion-border-color:                  $light-200 !default;

$accordion-button-padding-y:               17px;
$accordion-button-padding-x:               17px;

$accordion-button-color:                  $dark;
$accordion-button-active-color:           $blue;

$accordion-button-active-bg:              $white;

$accordion-button-focus-border-color:     $red !default;
$accordion-button-focus-box-shadow:       $light !default;

$accordion-icon-width:                    14px !default;
$accordion-icon-color:                    $dark !default;
$accordion-icon-active-color:             $blue !default;

// Breadcrumb
$breadcrumb-item-padding-x:         20px !default;
$breadcrumb-color:                  $dark !default;
$breadcrumb-active-color:           $primary !default;
$breadcrumb-hover-color:            $primary !default;

$breadcrumb-light-divider-color:    $gray !default;
$breadcrumb-light-color:            $white !default;
$breadcrumb-light-active-color:     $warning !default;
$breadcrumb-light-hover-color:      $warning !default;
// $breadcrumb-divider:                quote(">") !default;

// Badges

// scss-docs-start badge-variables
$badge-font-size:                   0.75em !default;
$badge-font-weight:                 $font-weight-normal !default;
$badge-color:                       $white !default;
$badge-padding-y:                   .75rem !default;
$badge-padding-x:                    2rem !default;
$badge-border-radius:               $border-radius !default;

// Transition
$transition-base:                   all .5s ease-in-out !default;
$transition-fade:                   opacity .15s linear !default;
// scss-docs-start collapse-transition
$transition-collapse:               height .15s ease !default;
$transition-collapse-width:         width .25s ease !default;
// scss-docs-end collapse-transition


// List Group
$list-group-item-padding-y:         $spacer * .65 !default;
$list-group-item-padding-x:         $spacer !default;

$list-group-active-bg:              $danger !default;
$list-group-disabled-color:         $gray-100 !default;


// Avatar 
// scss-docs-start avatar-variables
$avatar-font-family:             $font-family-heading !default;
$avatar-font-size:               $input-btn-font-size !default;
$avatar-line-height:             $line-height-base !default;

$avatar-font-size-sm:            $font-size-sm !default;

$avatar-font-size-lg:            $font-size-lg !default;

$avatar-color:                   inherit !default;
$avatar-bg:                      transparent !default;
$avatar-border-width:            0px !default;
$avatar-border-color:            inherit !default;
$avatar-hover-border-color:      inherit !default;

$avatar-font-weight:             $font-weight-normal !default;
$avatar-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;

// Allows for customizing button radius independently from global border radius
$avatar-border-radius:           $border-radius !default;
$avatar-border-radius-sm:        $border-radius-sm !default;
$avatar-border-radius-lg:        $border-radius-lg !default;

$avatar-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$avatar-hover-bg-shade-amount:       15% !default;
$avatar-hover-bg-tint-amount:        15% !default;
$avatar-hover-border-shade-amount:   20% !default;
$avatar-hover-border-tint-amount:    10% !default;
// scss-docs-end avatar-variables

// Video button
$btn-video-size:                    4rem;
$btn-video-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;


// Progress bars

// scss-docs-start progress-variables
$progress-height:                   $_16px !default;
$progress-bg:                       $light-100 !default;
$progress-border-radius:            0.25rem !default;
// scss-docs-end progress-variables

// Forms
// scss-docs-start form-label-variables
$form-label-margin-bottom:              .5rem !default;
$form-label-font-size:                  $_14px !default;

// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.

// scss-docs-start table-variables
$table-cell-padding-y:        $_12px !default;
$table-cell-padding-x:        $_12px !default;
$table-cell-padding-y-sm:     $_8px !default;
$table-cell-padding-x-sm:     $_8px !default;
$table-border-color:          $gray-200;


// Modals

// scss-docs-start modal-variables
$modal-inner-padding:               $spacer !default;

$modal-footer-margin-between:       .5rem !default;

$modal-dialog-margin:               .5rem !default;
$modal-dialog-margin-y-sm-up:       1.75rem !default;

$modal-title-line-height:           $line-height-base !default;

$modal-content-color:               null !default;
$modal-content-bg:                  $white !default;

$modal-backdrop-bg:                 $dark !default;
$modal-backdrop-opacity:            .5 !default;

$modal-header-border-color:         $muted;
$modal-header-padding-y:            1rem !default;
$modal-header-padding-x:            1.25rem !default;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default;

$modal-footer-bg:                   null !default;
$modal-footer-border-color:         $modal-header-border-color !default;

$modal-sm:                          300px !default;
$modal-md:                          500px !default;
$modal-lg:                          800px !default;
$modal-xl:                          1140px !default;

$modal-fade-transform:              translate(0, -50px) !default;
$modal-show-transform:              none !default;
$modal-transition:                  transform .3s ease-out !default;
$modal-scale-transform:             scale(1.02) !default;


// Dropdowns
//
// Dropdown menu container and contents.

// scss-docs-start dropdown-variables
$dropdown-min-width:                10rem !default;
$dropdown-padding-x:                0 !default;
$dropdown-padding-y:                0 !default;
$dropdown-spacer:                   .125rem !default;
$dropdown-font-size:                0.8125rem !default;
$dropdown-color:                    $dark !default;
$dropdown-bg:                       $white !default;
$dropdown-border-color:             $light !default;
$dropdown-border-radius:            $border-radius !default;
$dropdown-border-width:             $border-width !default;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-margin-y:         $spacer * 0 !default;
$dropdown-divider-bg:               $light !default;
$dropdown-box-shadow:               $_0px $_0px $_15px rgba($dark, 0.5) !default;

$dropdown-link-color:               $dark !default;
$dropdown-link-hover-color:         $primary !default;
$dropdown-link-hover-bg:            $light !default;

$dropdown-link-active-color:        $dropdown-link-hover-color !default;
$dropdown-link-active-bg:           $dropdown-link-hover-bg !default;

$dropdown-link-disabled-color:      $gray-100 !default;

$dropdown-item-padding-y:           $spacer * .5 !default;
$dropdown-item-padding-x:           $spacer !default;

$dropdown-header-color:             $dark !default;
$dropdown-header-padding-x:         $dropdown-item-padding-x !default;
$dropdown-header-padding-y:         $dropdown-item-padding-y !default;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
// fusv-enable
// scss-docs-end dropdown-variables

// scss-docs-start dropdown-dark-variables
$dropdown-dark-color:               $gray-300 !default;
$dropdown-dark-bg:                  $dark !default;
$dropdown-dark-border-color:        $gray-300 !default;
$dropdown-dark-divider-bg:          rgba($dropdown-dark-color, 0.15) !default;
$dropdown-dark-link-color:          $white !default;
$dropdown-dark-link-hover-color:    $dropdown-dark-link-color !default;
$dropdown-dark-link-hover-bg:       rgba($dropdown-dark-color, 0.15) !default;

$dropdown-dark-link-active-color:   $dropdown-dark-link-color !default;
$dropdown-dark-link-active-bg:      $dropdown-dark-link-hover-bg !default;

$dropdown-dark-link-disabled-color: rgba($dropdown-dark-color, 0.5) !default;
$dropdown-dark-header-color:        $white !default;
// scss-docs-end dropdown-dark-variables


// Pagination

// scss-docs-start pagination-variables
$pagination-padding-y:              .375rem !default;
$pagination-padding-x:              .75rem !default;
$pagination-padding-y-sm:           .25rem !default;
$pagination-padding-x-sm:           .5rem !default;
$pagination-padding-y-lg:           .75rem !default;
$pagination-padding-x-lg:           1.5rem !default;

$pagination-font-size:              $_18px !default;

$pagination-color:                  $dark !default;
$pagination-bg:                     transparent !default;
$pagination-border-radius:          $border-radius !default;
$pagination-border-width:           $border-width !default;
$pagination-border-color:           transparent !default;

$pagination-hover-color:            $white !default;
$pagination-hover-bg:               $primary !default;
$pagination-hover-border-color:     transparent !default;

$pagination-active-color:           $pagination-hover-color !default;
$pagination-active-bg:              $pagination-hover-bg !default;
$pagination-active-border-color:    $pagination-hover-border-color !default;

$pagination-focus-color:            $pagination-hover-color !default;
$pagination-focus-bg:               rgba($pagination-hover-bg, 0.3) !default;
$pagination-focus-box-shadow:       0 0 .25rem rgba($pagination-hover-bg, .25) !default;
$pagination-focus-outline:          0 !default;

$pagination-disabled-color:         rgba($pagination-hover-bg, 0.5) !default;
$pagination-disabled-bg:            rgba($pagination-hover-bg, 0.1) !default;
$pagination-disabled-border-color:  rgba($pagination-hover-bg, 0.1) !default;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$pagination-border-radius-sm:       $border-radius-sm !default;
$pagination-border-radius-lg:       $border-radius-lg !default;
// scss-docs-end pagination-variables


// Spinners 

// scss-docs-start spinner-variables
$spinner-width:           2rem !default;
$spinner-height:          $spinner-width !default;
$spinner-vertical-align:  -.125em !default;
$spinner-border-width:    .125em !default;
$spinner-border-width-sm: .125em !default;
$spinner-animation-speed: 1.5s !default;


// Mixin
@mixin bordered($width, $type, $color) {
    border: $width $type $color;
}
@mixin bordered-top($width, $type, $color) {
    border-top: $width $type $color;
}
@mixin bordered-right($width, $type, $color) {
    border-right: $width $type $color;
}
@mixin bordered-bottom($width, $type, $color) {
    border-bottom: $width $type $color;
}
@mixin bordered-left($width, $type, $color) {
    border-left: $width $type $color;
}

@mixin border-radius($top-left:null, $top-right:null, $bottom-right:null, $bottom-left:null){
    -webkit-border-radius: $top-left $top-right $bottom-right $bottom-left;
       -moz-border-radius: $top-left $top-right $bottom-right $bottom-left;
        -ms-border-radius: $top-left $top-right $bottom-right $bottom-left;
            border-radius: $top-left $top-right $bottom-right $bottom-left;  
}