//@use 'sass:map';

//
// Variables
// ==================================================


// Color system
// --------------------------------------------------
$whitesmoke   : #f5f5f5;
$gainsboro    : #eee;
$grey-lighter : #ddd;
$grey-light   : #ccc;
$grey         : #bbb;
$grey-dark    : #999;
$grey-dim     : #666;
$black-light  : #555;
$black-dim    : #333;
$black-deep   : #222;
$red          : #ff2a2a;
$blue-bright  : #87daff;
$blue         : #0684bd;
$blue-deep    : #262a30;
$orange       : #fc6423;


// Transition
// --------------------------------------------------
$transition-ease     : .2s ease-in-out;
$transition-ease-in  : .2s ease-in;
$transition-ease-out : .2s ease-out;


// Scaffolding
// Settings for some of the most global styles.
// --------------------------------------------------
// Global text color on <body>
$text-color                   : $black-light;
$text-color-dark              : $grey-light;

// Global link color.
$link-color                   : $black-light;
$link-color-dark              : $grey-light;
$link-hover-color             : $black-deep;
$link-hover-color-dark        : $gainsboro;
$link-decoration-color        : $grey-dark;

$blockquote-color             : $grey-dim;
$blockquote-color-dark        : $grey;

// Global border color.
$border-color                 : $grey-light;

// Background color for <body>
$body-bg-color                : white;
$body-bg-color-dark           : #282828;
$content-bg-color             : white;
$content-bg-color-dark        : $black-dim;

// Selection
$selection-bg                 : $blue-deep;
$selection-color              : $gainsboro;

// Dark mode color
$card-bg-color                : $whitesmoke;
$card-bg-color-dark           : $black-light;

$menu-item-bg-color           : $whitesmoke;
$menu-item-bg-color-dark      : $black-light;

// TODO why there need convert
//$theme-color                  : convert($theme_color_light);
//$theme-color-dark             : convert($theme_color_dark);

$theme-color                  : $theme_color_light;
$theme-color-dark             : $theme_color_dark;

// Typography
// Font, line-height, and elements colors.
// --------------------------------------------------
@function get-font-family($config) {
  //TODO find the way daymatic variable
  $custom-family: $config;
  //$custom-family : hexo-config('font.' + $config + '.family');
  @return if(type-of($custom-family) == string, unquote($custom-family), null);
}

// Font families.
$font-family-chinese      : 'PingFang SC', 'Microsoft YaHei';

$font-family-base         : $font-family-chinese, sans-serif;
@if get-font-family('global') {
  $font-family-base       : join(get-font-family('global'), $font-family-base);
}

$font-family-logo         : $font-family-base;
@if get-font-family('title') {
  $font-family-logo       : join(get-font-family('title'), $font-family-logo);
}

$font-family-headings     : $font-family-base;
@if get-font-family('headings') {
  $font-family-headings   : join(get-font-family('headings'), $font-family-headings);
}

$font-family-posts        : $font-family-base;
@if get-font-family('posts') {
  $font-family-posts      : join(get-font-family('posts'), $font-family-posts);
}

$font-family-monospace    : consolas, Menlo, monospace, $font-family-chinese;
@if get-font-family('codes') {
  $font-family-monospace  : join(get-font-family('codes'), $font-family-monospace);
}


// Font size
$font-size-base           : if($font_enable and (type-of($font_global_size) == number), $font_global_size * 1em, 1em);
$font-size-smallest       : .75em;
$font-size-smaller        : .8125em;
$font-size-small          : .875em;
$font-size-medium         : 1em;
$font-size-large          : 1.125em;
$font-size-larger         : 1.25em;
$font-size-largest        : 1.5em;


// Headings font size
$font-size-headings-step  : .125em;
$font-size-headings-base  : if($font_enable and (type-of($font_headings_size) == number), $font_headings_size * 1em, 1.625em);


// Global line height
$line-height-base         : 2;
$line-height-code-block   : 1.6; // Can't be less than 1.3;


// Z-index master list
// --------------------------------------------------
// Fix issue https://github.com/next-theme/theme-next-docs/issues/54
$zindex-0       : 5;
$zindex-1       : 10;
$zindex-2       : 20;
$zindex-3       : 30;
$zindex-4       : 40;
$zindex-5       : 50;


// Table
// --------------------------------------------------
$table-border-color             : $grey-lighter;
$table-font-size                : $font-size-small;
$table-cell-border-bottom-color : $grey-lighter;
$table-row-odd-bg-color         : #f9f9f9;
$table-row-odd-bg-color-dark    : #282828;
$table-row-hover-bg-color       : $whitesmoke;
$table-row-hover-bg-color-dark  : #363636;


// Code & Code Blocks
// --------------------------------------------------
$code-font-family               : $font-family-monospace;

$highlight-background        : $highlight_light_background;
$highlight-foreground        : $highlight_light_foreground;
$highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%);
$highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%);

$highlight-background-dark        : $highlight_dark_background;
$highlight-foreground-dark        : $highlight_dark_foreground;
$highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
$highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%);


// Buttons
// --------------------------------------------------
$btn-default-radius                    : 0;
$btn-default-bg                        : $black-deep;
$btn-default-bg-dark                   : $black-deep;
$btn-default-color                     : white;
$btn-default-color-dark                : $text-color-dark;
$btn-default-border-color              : $black-deep;
$btn-default-border-color-dark         : $black-light;
$btn-default-hover-bg                  : white;
$btn-default-hover-bg-dark             : $grey-dim;
$btn-default-hover-color               : $black-deep;
$btn-default-hover-color-dark          : $text-color-dark;
$btn-default-hover-border-color        : $black-deep;
$btn-default-hover-border-color-dark   : $grey-dim;


// Pagination
// --------------------------------------------------
$pagination-border              : $gainsboro;

$pagination-link-bg             : transparent;
$pagination-link-color          : $link-color;
$pagination-link-border         : $gainsboro;

$pagination-link-hover-bg       : transparent;
$pagination-link-hover-color    : $link-color;
$pagination-link-hover-border   : var(--link-hover-color);

$pagination-active-bg           : $grey-light;
$pagination-active-color        : var(--content-bg-color);
$pagination-active-border       : $grey-light;


// Layout sizes
// --------------------------------------------------
$content-desktop                : 700px;
$content-desktop-large          : 800px;
$content-desktop-largest        : 900px;

$content-desktop-padding        : 40px;
$content-tablet-padding         : 10px;
$content-mobile-padding         : 8px;


// Headband
// --------------------------------------------------
$headband-height                : 3px;
$headband-bg                    : var(--theme-color);


// Section Header
// Variables for header section elements.
// --------------------------------------------------
$head-bg                        : transparent;

// Site Meta
$brand-color                    : white;
$brand-hover-color              : white;
$brand-color-dark               : $grey-lighter;
$brand-hover-color-dark         : $grey-lighter;

$font-size-title                : if($font_enable and (type-of($font_title_size) == number), $font_title_size * 1em, 1.375em);
$font-size-subtitle             : $font-size-smaller;
$subtitle-color                 : $grey-dark;
$site-subtitle-color            : $grey-dark;


// Posts Collpase
// --------------------------------------------------
$posts-collapse-margin          : 35px;
$posts-collapse-margin-mobile   : 0;


// Tag Cloud
// --------------------------------------------------
$tag-cloud-start      : #aaa;
$tag-cloud-end        : #111;
$tag-cloud-start-dark : #555;
$tag-cloud-end-dark   : #eee;


// Sidebar
// Variables for sidebar section elements.
// --------------------------------------------------

$sidebar-padding                      : if(type-of($sidebar_padding) == number, $sidebar_padding * 1px, 18px);
$sidebar-offset                       : if(type-of($sidebar_offset) == number, $sidebar_offset * 1px, 12px);
$sidebar-nav-color                    : $grey-dim;
$sidebar-nav-hover-color              : $whitesmoke;
$sidebar-highlight                    : $blue-bright;

$site-author-image-width              : 96px;
$site-author-image-border-width       : 2px;
$site-author-image-border-color       : $black-dim;

$site-author-name-margin              : 5px 0 0;
$site-author-name-color               : $whitesmoke;
$site-author-name-weight              : normal;

$site-description-font-size           : $font-size-medium;
$site-description-color               : $grey-dark;
$site-description-margin-top          : 5px;

$site-state-item-count-font-size      : $font-size-larger;
$site-state-item-name-font-size       : $font-size-small;
$site-state-item-name-color           : inherit;


// Components
// --------------------------------------------------
// Tool buttons
$tool-btn-bg               : $black-deep;
$tool-btn-color            : white;
$tool-btn-hover-fore-color : $orange;
$tool-btn-opacity          : .8;
$tool-btn-opacity-hover    : 1;

// Back to top
$b2t-opacity                  : .8;
$b2t-opacity-hover            : 1;
$b2t-position-bottom          : -100px;
$b2t-position-bottom-on       : 19px;
$b2t-position-right           : 30px;
$b2t-position-right-mobile    : 16px;
$b2t-font-size                : 12px;
$b2t-color                    : white;
$b2t-bg-color                 : $black-deep;

//  .post-expand .post-eof
//  In Muse scheme, margin above and below the post separator
$post-eof-margin-top          : 80px; //  or 160px for more white space;
$post-eof-margin-bottom       : 60px; //  or 120px for less white space;

$post-card-margin             : 1em 0;


// Note colors
// --------------------------------------------------
// Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
$lbg : if(type-of($note_light_bg_offset) == number, $note_light_bg_offset * 1%, 0);
$note-types : 'default' 'primary' 'info' 'success' 'warning' 'danger';

$note-border-radius : 3px;

$note-border : (
  'default' : #777,
  'primary' : #6f42c1,
  'info'    : #428bca,
  'success' : #5cb85c,
  'warning' : #f0ad4e,
  'danger'  : #d9534f
);

$note-bg : (
  'default' : lighten(adjust-hue(map-get($note-border, 'default'), 0), 94% + $lbg),
  'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 92% + $lbg),
  'info'    : lighten(adjust-hue(map-get($note-border, 'info'), -10), 91% + $lbg),
  'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 90% + $lbg),
  'warning' : lighten(adjust-hue(map-get($note-border, 'warning'), 10), 88% + $lbg),
  'danger'  : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 92% + $lbg)
);

$note-text : (
  'default' : map-get($note-border, 'default'),
  'primary' : map-get($note-border, 'primary'),
  'info'    : map-get($note-border, 'info'),
  'success' : map-get($note-border, 'success'),
  'warning' : map-get($note-border, 'warning'),
  'danger'  : map-get($note-border, 'danger')
);

$note-icon : (
  'default' : '\f0a9',
  'primary' : '\f055',
  'info'    : '\f05a',
  'success' : '\f058',
  'warning' : '\f06a',
  'danger'  : '\f056'
);

$note-modern-border : (
  'default' : #e1e1e1,
  'primary' : #e1c2ff,
  'info'    : #b3e5ef,
  'success' : #d0e6be,
  'warning' : #fae4cd,
  'danger'  : #ebcdd2
);

$note-modern-bg : (
  'default' : lighten(adjust-hue(map-get($note-modern-border, 'default'), 10), 60% + ($lbg * 4)),
  'primary' : lighten(adjust-hue(map-get($note-modern-border, 'primary'), 10), 40% + ($lbg * 4)),
  'info'    : lighten(adjust-hue(map-get($note-modern-border, 'info'), 10), 50% + ($lbg * 4)),
  'success' : lighten(adjust-hue(map-get($note-modern-border, 'success'), 10), 40% + ($lbg * 4)),
  'warning' : lighten(adjust-hue(map-get($note-modern-border, 'warning'), 10), 43% + ($lbg * 4)),
  'danger'  : lighten(adjust-hue(map-get($note-modern-border, 'danger'), 10), 35% + ($lbg * 4))
);

$note-modern-text : (
  'default' : $grey-dim,
  'primary' : #6f42c1,
  'info'    : #31708f,
  'success' : #3c763d,
  'warning' : #8a6d3b,
  'danger'  : #a94442
);

$note-modern-hover : (
  'default' : darken(adjust-hue(map-get($note-modern-text, 'default'), -10), 32%),
  'primary' : darken(adjust-hue(map-get($note-modern-text, 'primary'), -10), 22%),
  'info'    : darken(adjust-hue(map-get($note-modern-text, 'info'), -10), 32%),
  'success' : darken(adjust-hue(map-get($note-modern-text, 'success'), -10), 27%),
  'warning' : darken(adjust-hue(map-get($note-modern-text, 'warning'), -10), 18%),
  'danger'  : darken(adjust-hue(map-get($note-modern-text, 'danger'), -10), 22%)
);


// Tabs border radius
// --------------------------------------------------
$tbr                        : 0;


// Label colors
// --------------------------------------------------
$label : (
  'default' : lighten(adjust-hue(map-get($note-border, 'default'), 0), 89% + $lbg),
  'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 87% + $lbg),
  'info'    : lighten(adjust-hue(map-get($note-border, 'info'), -10), 86% + $lbg),
  'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 85% + $lbg),
  'warning' : lighten(adjust-hue(map-get($note-border, 'warning'), 10), 83% + $lbg),
  'danger'  : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 87% + $lbg)
);
