@use 'sass:color';
@use 'sass:map';
@use './function' as *;

/* Global */
$global-base-font-size: 100% !default;
$global-base-font: 'Inter', sans-serif !default;
$global-font-weight: normal !default;
$global-font-bold-weight: 600 !default;
$global-border-radius: rem(4) !default;

/* Breakpoints */
$breakpoints: (
    small: 0,
    medium: 640px,
    large: 1024px,
    xlarge: 1200px,
    xxlarge: 1440px,
) !default;

/* Grid settings */
$global-width: rem(1200) !default;

$grid-gutter: (
    small: rem(20),
    medium: rem(20),
    large: rem(20),
) !default;

$grid-column-count: 12 !default;
$grid-layout: traditional !default; /* css-grid || traditional */

/* Colors */
$colors: (
    primary: #3b82f6,
    secondary: #8b5cf6,
    tertiary: #0ea5e9,
    info: #f87315,
    success: #10b47f,
    danger: #ef4444,
    link: #739bf8,
    dark: #222733,
    black: #030712,
    white: #ffffff,
    light: #f5f8fb,
) !default;

/* Animation */
$animation-easing: cubic-bezier(1, 0, 0, 1) !default;
$animation-duration: 0.25s !default;

/* button */
$button-radius: $global-border-radius !default;
$button-hover-shadow: 0 rem(1) rem(1) rgba(0, 0, 0, 0.1) !default;
$button-hover-shadow-dark: 0 rem(1) rem(1) rgba(0, 0, 0, 0.2) !default;
$button-active-shadow: inset 0 0 rem(3) rgba(0, 0, 0, 0.1) !default;
$button-active-dark-shadow: inset 0 0 rem(3) rgba(0, 0, 0, 0.2) !default;

/* nav */
$nav-border-radius: $global-border-radius !default;
$nav-spacing: rem(13) !default;

/* form */
$form-input-radius: $global-border-radius !default;
$form-radio-group-gap: rem(10);
$form-radio-group-item-padding: rem(20);
$form-radio-group-width: rem(300);

/* table */
$table-spacing: rem(10) !default;

/* img */
$img-radius: $global-border-radius !default;

/* message */
$message-radius: $global-border-radius !default;
$message-icon-size: rem(12) !default;

/* badge */
$badge-radius: $global-border-radius !default;

/* breadcrumb */
$breadcrumb-spacing: rem(10) !default;
$breadcrumb-size: 80% !default;

/* card */
$card-radius: $global-border-radius !default;
$card-shadow: 0 0 0 rem(1) rgba(0, 0, 0, 0.04) !default;

/* dropdown */
$dropdown-icons-size: rem(5) !default;
$dropdown-icons-size-small: rem(4) !default;
$dropdown-icons-size-large: rem(7) !default;
$dropdown-width: rem(220) !default;
$dropdown-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.08) !default;

/* modal */
$modal-content-radius: $global-border-radius !default;
$modal-content-spacing: rem(20) !default;
$modal-content-shadow: 0 rem(5) rem(5) 0 rgba(0, 0, 0, 0.1) !default;
$modal-layout: css-grid !default; /* css-grid || traditional || flex */

/* box */
$box-spacing: rem(20) !default;
$box-spacing-small: rem(15) !default;
$box-spacing-large: rem(40) !default;
$box-border-radius: $global-border-radius !default;

/* progress */
$progress-background-shadow: 0 rem(2) rem(5) rgba(0, 0, 0, 0.05) inset !default;
$progress-bar-radius: $global-border-radius !default;

/* collage */
$collage-item-default-width: rem(200) !default;
$collage-item-default-height: rem(200) !default;
$collage-item-default-gap: rem(10) !default;
$collage-item-small-gap: rem(1) !default;
$collage-item-large-gap: rem(20) !default;

/* avatar */
$avatar-default-size: rem(40) !default;
$avatar-small-size: rem(30) !default;

/* toast */
$toast-notification-width: rem(400) !default;

/* icon */
$icon-size: rem(16) !default;
$icon-small-size: rem(14) !default;
$icon-large-size: rem(32) !default;

/* theme dark */
$theme-dark-color: #050814 !default;

/* extended modules */

// layout
$layout-sidebar-width: rem(230) !default;
$layout-sidebar-width-compact: rem(46) !default;
$layout-header-logo-width: rem(80) !default;
$layout-header-padding: rem(10) rem(15) !default;
$layout-border-width: rem(1) !default;
$layout-header-search-width: rem(300) !default;

// sidebar-nav
$sidebar-nav-padding: rem(15) !default;
$sidebar-nav-list-label-font-weight: 400 !default;
$sidebar-nav-item-caret-size: rem(5) !default;

// tooltip
$tooltip-padding: rem(5) rem(10) !default;
$tooltip-padding-large: rem(15) !default;
$tooltip-transition-duration: 150ms !default;
$tooltip-transition-delay: 250ms !default;

// popover
$popover-border-radius: $global-border-radius !default;
$popover-width: rem(275) !default;
$popover-offset: rem(10) !default;

// switch
$switch-size: rem(36) !default;
$switch-size-large: rem(44) !default;

// range
$range-size: rem(6) !default;

// action menu
$action-menu-list-gap: rem(2) !default;

// pagination
$pagination-item-font-size: rem(14) !default;

// block-box
$block-box-size: rem(250) !default;

// spacer
$spacer: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 150, 200, 250 !default;

// block form
$block-form-group-padding: $box-spacing-large !default;

// block enable
$block-enable-box-spacing: rem(10) !default;

// indicator
$indicator-icon-size: rem(14) !default;

// block end
$block-stat-item-gap: rem(20) !default;

// quick menu
$quick-menu-spacing: rem(8) !default;
$quick-menu-font-size: rem(14) !default;
$quick-menu-spacing-small: rem(5) !default;
$quick-menu-font-size-small: rem(12) !default;
$quick-menu-spacing-x-small: rem(4) !default;
$quick-menu-font-size-x-small: rem(10) !default;

// combo box
$combo-box-icon-size: rem(5) !default;
$combo-box-icon-size-small: rem(4) !default;
$combo-box-icon-size-large: rem(7) !default;
$combo-box-width: rem(220) !default;
$combo-box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.08) !default;
$combo-box-show-animation-duration: 50ms !default;
$combo-box-item-y-padding: rem(7) !default;
$combo-box-item-x-padding: rem(15) !default;

// block inline
$block-inline-gap: rem(10) !default;

// datepicker
$form-datepicker-margin-top: rem(5) !default;
$form-datepicker-row-gap: rem(5) !default;
$form-datepicker-tile-height: rem(22) !default;