@use './colors.scss' as *;
@use 'sass:color';
@use 'sass:map';
@use 'sass:math';

$baseFontSize: 14;

@function relativePx($number) {
  @return calc($number/$baseFontSize) * 1em;
}

@function absolutePx($number) {
  @return calc($number/$baseFontSize) * 1rem;
}

$grays: (
  'gray-0': #ffffff,
  'gray-5': #f2f2f2,
  'gray-10': #e9e9e9,
  'gray-15': #dfdfdf,
  'gray-20': #cccccc,
  'gray-30': #b9b9b9,
  'gray-40': #a6a6a6,
  'gray-50': #939393,
  'gray-60': #808080,
  'gray-70': #6c6c6c,
  'gray-80': #595959,
  'gray-85': #464646,
  'gray-90': #3d3d3d,
  'gray-95': #333333,
  'gray-100': #1a1a1a,
);
$white: map.get($grays, 'gray-0');
$black: map.get($grays, 'gray-95');

//
//font family
//
$fontName: 'Pretendard Variable';
$fontSize: calc($baseFontSize * 1px);
$fontSmoothing: antialiased;
$baseFontColor: $black;
$dModeBaseFontColor: $white;
//
//font weight
//
$light: 300;
$regular: 400;
$bold: 600;
$bolder: 900;

//
//line height
//
$lineHeight: calc(18 / $baseFontSize);

//
//letter spacing
//
$widerSpacing: 1px;
$wideSpacing: 0.5px;
$baseSpacing: normal;
$narrowSpacing: -0.5px;
$narrowerSpacing: -1px;

//
//border color
//
$borderColor: #d6d6d6;
$borderDarkColor: color.adjust($borderColor, $lightness: -27.4%);

//
//base background color
//
$background: #ffffff;
$dModeBackground: #333333;

//#definitions

//
// colors
//

// $primary: #d9550d;
// $primary: #6d9d72;
$primary: #5178af;
$secondary: #35363a;

$success: #528e64;
$info: #5178af;
// $info: #909090;
$danger: #d50000;
$attention: #ec6e00;
$importance: #fdc036;

$lightSuccess: #cbe1d2;
$lightInfo: #d4e9ed;
$lightDanger: #fbe0da;
$lightAttention: #ffe9d6;
$lightImportance: #fff3d7;

$primaryText: $white;
$secondaryText: $white;

$infoText: $white;
$dangerText: $white;
$attentionText: $white;
$importanceText: $white;

$surface: #f2f2f2;
$surfaceHover: #f4f4f4;

$gray: #909090;
$lightGray: color.adjust($gray, $lightness: 16.1%);
$darkGray: color.adjust($black, $lightness: 20.4%);

$darkPrimary: color.adjust(
  color.adjust($primary, $saturation: 0%),
  $lightness: -10.6%
);
$darkSecondary: color.adjust($secondary, $lightness: -35.7%);
$darkerPrimary: color.adjust(
  color.adjust($primary, $saturation: 0%),
  $lightness: -20.8%
);
$darkerSecondary: color.adjust($secondary, $lightness: -58.1%);

$lightPrimary: color.adjust($primary, $lightness: 35%);
$lightSecondary: color.adjust($secondary, $lightness: 35%);

$surface1: #f8f8f8;
$surface2: #eff4fc;
$surface3: #dae8f8;

$redColor: #d75757;
$orangeColor: #ee9033;
$yellowColor: #f8b825;
$lightgreenColor: #b3bc40;
$greenColor: #61a475;
$lightblueColor: #8cc5ce;
$blueColor: #70a3ca;
$deepblueColor: #5178af;
$deeppurpleColor: #9180b4;
$purpleColor: #af77c0;
$brownColor: #a86a82;
$grayColor: #8b8b8b;

$brandColors: (
  'primary': (
    $primary,
    $darkPrimary,
    $primaryText,
  ),
  'secondary': (
    $secondary,
    $darkSecondary,
    $secondaryText,
  ),
);

$stateColors: (
  'success': (
    $success,
    color.adjust($greenColor, $lightness: -10%),
    $white,
    $lightSuccess,
  ),
  'info': (
    $info,
    color.adjust($info, $lightness: -10%),
    $infoText,
    $lightInfo,
  ),
  'error': (
    $danger,
    color.adjust($danger, $lightness: -10%),
    $dangerText,
    $lightDanger,
  ),
  'danger': (
    $danger,
    color.adjust($danger, $lightness: -10%),
    $dangerText,
    $lightDanger,
  ),
  'attention': (
    $attention,
    color.adjust($attention, $lightness: -10%),
    $attentionText,
    $lightAttention,
  ),
  'importance': (
    $importance,
    color.adjust($importance, $lightness: -10%),
    $importanceText,
    $lightImportance,
  ),
);

@function grayHsl($per) {
  @return hsl(0, 0, $per);
}

$colors: (
  'red': $redColor,
  'orange': $orangeColor,
  'yellow': $yellowColor,
  'lightgreen': $lightgreenColor,
  'green': $greenColor,
  'lightblue': $lightblueColor,
  'blue': $blueColor,
  'deepblue': $deepblueColor,
  'deeppurple': $deeppurpleColor,
  'purple': $purpleColor,
  'brown': $brownColor,
  'gray': $grayColor,
);

$colors2: (
  'red': #d93b3b,
  'sunset': #d44d32,
  'orange': #d95b2c,
  'amber': #d3873f,
  'yellow': #f5b54d,
  'citron': #cac747,
  'lime': #85ab39,
  'green': #48992f,
  'mint': #3a874f,
  'teal': #449698,
  'cyan': #4d9bcc,
  'blue': #4e7af8,
  'indigo': #5642ed,
  'purple': #8756f3,
  'pink': #bf3da0,
  'rose': #bb3a62,
);

//
//heading
//
$headerFontWeight: $bold;
$h1: absolutePx(32);
$h2: absolutePx(26);
$h3: absolutePx(22);
$h4: absolutePx(18);
$h5: absolutePx(16);
$h6: absolutePx(14);

//Size
$tinySize: relativePx(10);
$smallSize: relativePx(12);
$mediumSize: relativePx(14);
$largeSize: relativePx(18);
$hugeSize: relativePx(26);
$massiveSize: relativePx(32);

// Scroll Bars

$useCustomScrollbars: true;

$thumbWidth: 8;
$thumbBorderWidth: 2;

$customScrollbarWidth: $thumbWidth + ($thumbBorderWidth * 2);
$customScrollbarHeight: $customScrollbarWidth;

$trackBackground: rgba(0, 0, 0, 0);
$trackBorderRadius: 0px;

$thumbBorderRadius: $customScrollbarWidth * 0.5;

$thumbBackground: rgba(0, 0, 0, 0.55);
$thumbTransition: color 0.2s ease;

$thumbBorderColor: $background;

$thumbInactiveBackground: rgba(0, 0, 0, 0.15);
$thumbHoverBackground: rgba(128, 135, 139, 0.8);

/* Inverted */
$trackInvertedBackground: rgba(255, 255, 255, 0.1);
$thumbInvertedBackground: rgba(255, 255, 255, 0.25);
$thumbInvertedInactiveBackground: rgba(255, 255, 255, 0.15);
$thumbInvertedHoverBackground: rgba(255, 255, 255, 0.35);

$baseBorderRadius: relativePx(4);
//$baseBorderRadius: 2em;
$baseInputRadius: relativePx(4);

// button & input
$baseButtonColor: $black;
$baseButtonBg: #efefef;
$hoverButtonBg: #e9e9e9;

$horizontalInputPadding: relativePx(18);
$verticalInputPadding: relativePx(12);
// $horizontalPadding: $horizontalInputPadding + ($horizontalInputPadding * 0.5);
$horizontalPadding: $horizontalInputPadding;
$verticalPadding: $verticalInputPadding;

$buttonPadding: $verticalPadding $horizontalPadding $verticalPadding;

// button-compact
$compactHorizontalPadding: $horizontalPadding * 0.5;
$compactVerticalPadding: $verticalInputPadding * 0.5;

$compactPadding: $compactVerticalPadding $compactHorizontalPadding;

//Button + Equal

$equalBtnWidth: 150px;
$equalBtnPadding: 11px 20px;

$equalLargeBtnWidth: 200px;
$equalLargeBtnPadding: 18px 30px;

//input base
$inputLineHeight: relativePx(18);
$lineHeightOffset: (($inputLineHeight - 1em) * 0.5);

$inputVerticalOffsetPadding: calc(
  $verticalInputPadding - $lineHeightOffset - 1px
);

//$inputPadding: $inputVerticalOffsetPadding+px $horizontalInputPadding+px;
$inputPadding: $inputVerticalOffsetPadding $horizontalInputPadding;

// table
$tableBorderColor: #d7dae2;
$headerBackgroundColor: #e5e9f2;

$cellVerticalPadding: relativePx(8);
$cellHorizontalPadding: relativePx(13);

$cellPadding: $cellVerticalPadding $cellHorizontalPadding;

$tableVerticalMargin: 1em;
$tableHorizontalMargin: 0;
$tableMargin: $tableVerticalMargin $tableHorizontalMargin;
// Grid system

$gridWhole: 12;
$gridGutter: 4;

$gridWholeMobile: 4;
$gridWholeTablet: 8;
$gridWholeLaptop: 12;

$gridPercent: calc(100 / $gridWhole);
$gridHalf: calc($gridWhole * 0.5);
$gridThird: calc($gridWhole / 3);
$gridQuarter: calc($gridWhole / 4);
$gridFifth: calc($gridWhole / 5);
$gridSixth: calc($gridWhole / 6);
$gridEighth: calc($gridWhole / 8);
$gridTenth: calc($gridWhole / 10);

$bp-mobile: 320px;
$bp-tablet: 768px;
$bp-laptop: 1280px;
$bp-desktop: 1440px;

//Dark Mode
//$dModeBaseFontColor: $white;
//$dModeBorderColor: #494F61;
//$dModeBackground: #31363e;
//
//$dModeSurface: #272C34;

//breakpoint
$breakpoints: (
  xs: 320px,
  //mobile-portrait
  sm: 576px,
  //mobile-landscape
  md: 768px,
  //tablet
  lg: 1280px,
  //desktop
  xl: 1440px, //desktop-large
) !default;

$baseLayoutRadius: relativePx(14);

$layoutRadiuses: (
  s: $baseLayoutRadius * 0.5,
  m: $baseLayoutRadius,
  l: $baseLayoutRadius * 1.5,
  xl: $baseLayoutRadius * 2,
);