// TODO this should be in functions....
@function space($number) {
  @return ($number * 0.4rem);
}

// superTiny => tiny => small => normal => large => huge => largest;

// ⭐️ Style Rule

// project-only
$s3: "https://s3.ap-northeast-2.amazonaws.com/booking.stayjanda.statichosting/static/media/";

// -- z-index
$z-index-0: -1; // container--centerlize
$z-index-1: 10; // tineline Select__meunu
$z-index-2: 20; // searchUl
$z-index-3: 30; // dayPicker
$z-index-4: 40;
$z-index-5: 50;
$z-index-6: 60; // Modal Level 1
$z-index-7: 70;
$z-index-8: 80; // Assig Item
$z-index-9: 90; // sideNav Curton header
$z-index-10: 100; // sideNav  toast

// -- ✏️ TyphoGraphy 타이포 그래피
$typho-h6: 1.3rem !default;
$typho-huge: 1.3rem !default;
$typho-large: 1.1rem !default;
$typho-normal: 1rem !default; // html에서 직접 수정요함
$typho-small: 0.825rem !default;
$typho-tiny: 0.625rem !default;
$typho-superTiny: 0.5625rem !default;

// -- 🌈 Colors 컬러 칼라
$yellow-color: #febd69 !default;
$pink-color: #f56e7d !default;
$html-color: #4d4d4d !default;
$link-color: #337ab7 !default;
$link-color-dark: darken(#337ab7, 15%) !default;
$primary-color: var(--primary-color) !default;
$primary-color-opacity: rgba(rgb(76, 91, 115), .7) !default;
$primary-color-on: #fff !default;
$primary-color-light: var(--primary-color-light) !default;
$primary-color-dark: var(--primary-color-dark) !default; // 흰색 호버 bg 에 오버랩 되었을때 컬러임
$primary-color-light-on: var(--primary-color-on) !default !default;
$primary-color-dark-on: var(--primary-color-on) !default !default;

$point-color: #d5673a !default;
$point-color-on: #fff !default;
$point-color-light: lighten($point-color, 15%) !default;
$point-color-dark: darken($point-color, 15%) !default;
$point-color-light-on: $point-color-on !default;
$point-color-dark-on: $point-color-on !default;

$grey-level-1: #fbfbfb !default; // 흰색 effect-dark 받을때 컬러 오버랩을 원치 않을때 사용
$grey-level0: #eee !default; // 흰색 effect-dark 받을때 컬러 오버랩을 원치 않을때 사용
$grey-level1: #d9d9d9 !default; // 흰색 effect-dark 받을때 컬러 오버랩을 원치 않을때 사용
$grey-level2: #bebebe !default;
$grey-level3: #989898 !default;
$grey-level4: #595959 !default;
$grey-level5: #4d4d4d !default;
$black-color: $html-color !default;
$grey-level1-on: $html-color !default;
$grey-level2-on: $html-color !default;
$grey-level3-on: white !default;
$grey-level4-on: white !default;
$grey-level5-on: white !default;
$grey-opacity1: rgba(0, 0, 0, 0.068) !default;
$grey-opacity2: rgba(0, 0, 0, 0.18) !default;
$grey-opacity3: rgba(0, 0, 0, 0.25) !default;

$background-color: $grey-level0 !default;
$header-bg-color: $grey-level0 !default;

$yellow-color: #ffd821 !default;

$new-color: $yellow-color !default;
$new-color-light: lighten($new-color, 15%) !default;
$new-color-dark: darken($new-color, 15%) !default;
$new-color-on: $html-color !default;

$green-color: #009e6c !default;
$sky-color: #c7daff !default;
$error-color: #ff6760 !default;
$error-color-dark: darken(#ff6760, 5%) !default;
$error-color-on: white !default;
$pupple: #705f93 !default;

$third-color: $pupple;
$third-color-dark: darken($third-color, 5%);

$orange-color: #ff6e16 !default;
$orange-color-on: white !default;
$orange-color-dark: darken(#f58f2c, 15%) !default;
$orange-opacity1: rgba(#ff6e16, 10%) !default;

$blue-color: rgba(0, 0, 255, 1) !default;
$blue-color-dark: darken(rgba(0, 0, 255, 1), 15%) !default;
$blue-opacity1: rgba(0, 0, 255, 0.04) !default;
$blue-opacity2: rgba(0, 0, 255, 0.08) !default;

$positive-color-on: white !default;
$positive-color: $green-color !default;
$positive-opacity1: rgba($positive-color, 0.1) !default;
$positive-opacity2: rgba($positive-color, 0.3) !default;
$positive-color-dark: darken($positive-color, 5%) !default;
$positive-color-on: white !default;

$admin-bg-color: #172b3a !default;
$hover-effect-dark: $grey-opacity1 !default;

$male-color: navy !default !default;
$female-color: maroon !default !default;

$disabled-color: $grey-level2 !default;
$outborder-color: $grey-level2 !default; //화면 가장자리에 붙어있는 border들의 컬러
$placeholder-color: $outborder-color !default;

$curtain-color: rgba(0,
  0,
  0,
  0.78) !default; // 사이드 네비와 모달의 화면 가림색

// 📖 ---- 표준 단위
$doc-section-space: space(10) !default;
$standard-largest2-space: space(8) !default;
$standard-largest-space: space(6) !default;
$standard-huge-space: space(4) !default;
$standard-large-space: space(3) !default;
$standard-space: space(2) !default;
$standard-small-space: space(1.5) !default;
$standard-tiny-space: space(1) !default;
$standard-superTiny-space: space(0.5) !default;
// --- 표준 규격
$standard-margin-bottom: $standard-space !default;
$standard-label-margin: $standard-tiny-space !default;
// ⭐️ InputText, SelectBox 등등 대부분의 원소 구성요서 들의 세로 크기를 의미합니다.
// 크기를 규격화 해서 한 라인으로 세울수 있도록 합니다.
$standard-border-radius: 4px !default;
$br1: $standard-border-radius !default;
$standard-border-radius2: 6px !default;
$br2: $standard-border-radius2 !default;
$br3: 8px !default;
$standard-line-height: space(5.5) !default;
$standard-round-border-radius: $standard-line-height / 2 !default;
$standard-input-outborder-color: $outborder-color !default;
$standard-small-line-height: 1.8rem !default;

// 💔 -- BreackPoints 브레이크 포인트
// 각각은 최대크기
$smobile: "330px" !default; // ssm  <-- 그리드 작동안함
$mobile: "400px" !default; // sm
$phablet: "550px" !default; // md
$tablet: "750px" !default; // wmd
$desktop: "1000px" !default; // lg
$desktophd: "1200px" !default; // wlg
$full: "9999px" !default;
$null: "0px" !default;
// 함수로 만드는방법이 있지만 복잡합니다.
// https://hugogiraudel.com/2014/01/15/sass-string-to-number/
$mobileUp: "401px" !default; // sm
$phabletUp: "551px" !default; // md
$tabletUp: "751px" !default; // wmd
$desktopUp: "1001px" !default; // lg
$desktophdUp: "1201px" !default; // wlg
// -- Grid 그리드
$container-width: 1000px !default;
$container-full-max-width: none !default; // --full 일떄
$container-small-width: 550px !default;
$container-middle-width: 800px !default;
$container-large-width: 1200px !default;
$container-padding: $standard-largest-space !default; // ⭐️
$container-padding--md: $standard-large-space !default;
// ⭐️
// -- Column 컬럼
$total-columns: 12 !default;
$column-width: 100 / $total-columns !default; // calculates individual column width based off of # of columns
$column-margin: 2% !default; // space between column grids
// -- flex 버전의 그리드
$flex-grid__column--fixed-width: 200px !default;
$flex-grid--column-margin: 5% !default;
// -- Section 섹션여백
$docs-padding-top: $standard-largest-space !default; // pageHeader padding top
$docs-padding-bottom: $standard-largest-space !default; // pageBody padding bottom
$docs-padding: $docs-padding-top 0 $docs-padding-bottom 0 !default;
$docs-padding--narrowTop: $standard-largest-space 0 $docs-padding-bottom 0 !default;
$docs-section__padding: $standard-largest-space !default;
// -- labeles 라벨
// Exception  : Check Box, Switch
$label-font-size: $typho-small !default;
$label-font-color: $grey-level4 !default;
// ===========================================================================
// 1. Forms 폼
// ANCHOR Forms ==========================================================================
// -- Text Inputs + Textarea 인풋
$input-outborder-color: $outborder-color;
$input-height: $standard-line-height+0.125rem !default;
$input-big-height: $standard-largest2-space;
$input-background: transparent !default;
$input-border: 1px solid $input-outborder-color !default;
$input-border-bottom: undefined;
$input-error-color: $error-color !default;
$input-success-color: $outborder-color !default;
$input-focus-color: $primary-color-light !default;
$input-font-size: $typho-normal !default;
$input-side-padding: $standard-small-space !default;
$input-padding: 0px $standard-small-space !default;
$input-transition: all 0.3s !default;
$input-disabled-color: $disabled-color !default;
$input-disabled-border: 1px dotted $input-disabled-color !default;
$input-invalid-border: 1px solid $input-error-color !default;
$placeholder-text-color: $placeholder-color !default;
// -- textarea 텍스트어리어
$textarea-margin-top: $standard-large-space !default; // 라벨 덮힘 방지
$textarea-height: $input-height * 2 !default; // 라벨 덮힘 방지
// -- Radio Buttons 라디오
$radio-fill-color: $primary-color !default;
$radio-empty-color: $input-outborder-color !default;
$radio-border: 2px solid $radio-fill-color !default;
$radio-disabled-color: $disabled-color !default;
// -- Select 셀렉트  option is a li 😸
$select-height: $standard-line-height !default;
$select-border: 1px solid $input-outborder-color !default;
$select-option-active-bgcolor: $hover-effect-dark !default;
$select-option-selected-bgcolor: $primary-color !default;
$select-option-hover-bgcolor: $hover-effect-dark !default;
$select-option-padding: 0rem $standard-small-space !default;
$select-option-height: $standard-line-height !default;
$select-padding: $input-padding !default;
$select-radius: $standard-border-radius !default;
$select-disabled-color: $disabled-color !default;
$select-menue-radius: $standard-border-radius !default;
$select-background: white !default;
$select-focus-border-color: $primary-color !default;
$selcet-placeholder-color: $placeholder-color !default;
// -- Multi Select 멀티 셀렉트
$select-multi-remove-hover-color: $html-color !default;
$select-multi-remove-hover-bgcolor: $error-color !default;
$select-multi-remove-bgcolor: $grey-level2 !default;
$select-multi-bgcolor: $grey-level1 !default;
$select-multi-color: $html-color !default;
// -- Switches 스위치
$switch-checked-bgcolor: $primary-color !default;
$switch-checked-lever-bgcolor: $primary-color-light !default;
$switch-unchecked-bgcolor: white !default;
$switch-unchecked-lever-bgcolor: $grey-level1 !default;
$switch-radius: 15px !default;
$switch-label-fontSize: 1rem !default;
$switch-label-color: $html-color !default;
$switch-disabled-solid-color: $disabled-color !default;
// -- CheckBox 체크박스
$checkbox-label-fontSize: 1rem !default;
$checkbox-label-color: $html-color !default;
$checkbox-border-color: $input-outborder-color !default;

$checkbox-disabled-border-color: $disabled-color !default;
$checkbox-checked-color: $primary-color !default;
$checkbox-sign-color: #fff !default;
// 2 DOC__ 다큐먼트
// ANCHOR DOC ==========================================================================
// -- nav 다큐먼트 네비
$nav-color: $primary-color !default;
$nav-link-padding: $standard-small-space 0rem !default;
// 3 Icon 아이콘
// ANCHOR ICon=========================================================================
$icon-space: $standard-small-space !default;
$icon-size-superTiny: 0.8rem !default;
$icon-size-tiny: 1rem !default;
$icon-size-small: 1.4rem !default;
$icon-size-normal: 1.8rem !default;
$icon-size-large: 2.4rem !default;
$icon-size-huge: 3rem !default;
$icon-size-largest: 4rem !default;
$icon-size-largest2: 6rem !default;
$icon-size-default: 1em !default;
// 3 Calender 캘랜더 달력
// ANCHOR DayPicker=========================================================================
// -- Shared styles
$daypicker-block-size: space(6) !default;
$daypicker-border-tick: 0.2rem !default;
$daypicker-disabled-color: $grey-level2 !default;
$daypicker-otuside-bgcolor: #fff !default;
$daypicker-dot-size: 5px !default; // calculator
$daypicker-dot-top: 3px !default; // calculator
$daypicker-caption-margin-bottom: 1rem !default; // it must be a pixcel
$daypicker-caption-height: $standard-line-height !default;
$daypicker-day-transition: 0.2s !default;
$daypicker-border: 1px solid $outborder-color !default;
$daypicker-border-radius: $standard-border-radius !default;
$daypicker-today-color: $green-color !default;
$daypicker-checkOut-bgColor: $orange-color !default;
// -- horizen
$horizen-caption-bgcolor: $grey-level1 !default;
$horizen-month-bordeRight: none;
// -- input
$dayPicker-input-height: $input-height+1rem !default;
// 4 Buttons
// ANCHOR Buttons =========================================================================
// -- Shared styles
$button-border: none !default;
$button-height: $standard-line-height !default;
$button-padding-side: $standard-space !default;
$button-padding: 0 $button-padding-side !default;
$button-radius: $standard-border-radius !default;
$buttons-space: $standard-small-space !default;
$buttons-icon-margin: $icon-space !default;
$button-letter-spacing: 0.5px !default;
$button-color: $html-color !default;
$button-bgColor: #fff !default;
$button-bgColor-hover: $hover-effect-dark !default;
// -- Disabled styles
$button-disabled-background: $grey-level1 !default;
$button-disabled-color: $grey-level4 !default;
// -- Large buttons
$button-large-icon-font-size: $typho-huge !default;
$button-large-height: $standard-largest2-space !default;
$button-large-padding: 0 $standard-huge-space !default;
$button-large-font-size: $typho-huge !default;
// -- Flat buttons
$button-flat-color: $html-color !default;
$button-flat-disabled-color: $button-disabled-color !default;
// -- small buttons
$button-small-padding-side: $standard-small-space !default;
$button-small-padding: 0 $button-small-padding-side !default;
$button-small-font-size: $typho-normal !default;
$buttons-small-icon-margin: $standard-small-space !default;
// -- tiny buttons
$button-tiny-padding-side: $standard-space !default;
$buttons-tiny-icon-margin: $button-tiny-padding-side !default;
$button-tiny-font-size: $typho-small;
$button-height: $standard-line-height !default;
// 5 Modals
// ANCHOR Modals =========================================================================
$modal-background-color: $curtain-color !default;
$modal-padding: space(4) !default;
$modal-end-padding: space(4) !default;
$modal-header-padding: space(4) !default;
$modal-border-radius: $standard-border-radius !default;
$modal-section-padding: $standard-largest-space !default;
// 6 SearchInput
// ANCHOR Search Input =========================================================================
$searchInput-feedBack-color: $grey-level2;
$searchInput-input-border: $input-border !default;
$searchInput-border-color: $grey-level1 !default;
$searchInput-border-radius: $standard-border-radius;
$searchInput-li-border-top: 1px dotted $searchInput-border-color !default;
$searchInput-li-padding: $standard-tiny-space $standard-small-space !default;
$searchInput-li-height: $standard-line-height !default;
$searchInput-message-space: 1rem !default;
// 7 SideNav 사이드 네비
// ANCHOR Side NAV =========================================================================
$sideNav-padding: $standard-large-space !default;
$sideNav-width: 0.4rem * 46 !default;
$sideNav-width-wmd: $sideNav-width * 0.95 !default;
$sideNav-profile-height: 13rem !default;
$sideNav-profile-circle-margin-top: 2rem !default;
$sideNav-list-li-height: 3.25rem !default;
$sideNav-list-li-bgColor: white !default;
$sideNav-curtain-color: $curtain-color !default;
$sideNav-productView-height: 4.25rem !default;
// 8 Header 헤더
// ANCHOR Header NAV =========================================================================
$header-height: 0.25rem * 14 !default;
$header-padding: $standard-large-space !default;
// 9 CircleIcon 둥근 아이콘
// ANCHOR Header NAV =========================================================================
// 10 Slider 슬라이더
// ANCHOR slider Slider ========fe=================================================================
$slider-dots-padding: 15px !default;
$slider-dot-size: 10px !default;
$slider-dot-margin: 12px !default;
$slider-dot-bgColor: $grey-level2 !default;
$slider-dot-active-bgColor: $html-color !default;
$slider-dot-hover-bgColor: $grey-level4 !default;
$slider-arrow-height: 2rem !default;
// 11 Pagination 페이지네이션
// ANCHOR paginiation Paginiation =========================================================================
$pagination-li-radius: 0 !default;
$pagination-li-height: $standard-small-line-height !default;
$pagination-li-width: $standard-small-line-height !default;
$pagination-li-margin: space(.5) !default;
$pagination-li-hover: $grey-level4 !default;
$pagination-active-bg: $grey-level4 !default;
$pagination-li-bg: $grey-level4 !default;
$pagination-li-bg-hover: $grey-level4 !default;
// 12 Toast 토스트
// ANCHOR toast Toast=========================================================================
$toast-height: 3rem !default;
$toast-padding: 1rem !default;
$toast-position-x: 8% !default;
$toast-position-y: 5% !default;
$toast-margin-bottom: $standard-margin-bottom/2 !default;
// 13 Avatar 프로파일 서클
// ANCHOR toast Toast=========================================================================
$avatar-size: 4rem !default;
// border 옵션일 경우 넣어야 동작
$avatar-border: 2px solid $grey-level2 !default;
// 14 Card 카드
// ANCHOR card Card=========================================================================
$card-padding: $standard-large-space !default;
$card-padding--md: $standard-large-space !default;
$card-shadow: 1 !default;
$card-bg: white;
// 15 Tabs 탭
// ANCHOR tabs Tabs=========================================================================
$tabs-height: 3rem !default;
$tabs-margin-bottom: $standard-margin-bottom !default;
$tabs-tab-padding: 0 !default;
$tabs-tab-border-color: $grey-level1 !default;
$tabs-tab-border-radious: $standard-border-radius !default;
$tabs-tab-color: $html-color !default;
$tabs-tab-selected-color: $primary-color !default;
$tab-border-bottom: none !default;
$tabs-border-bottom: 1px solid $tabs-tab-border-color !default;
$tabs-tab-selected-border-bottom: 2px solid $tabs-tab-selected-color !default;
// 16 ToolTipList 툴팁리스트
// ANCHOR tabs Tabs=========================================================================
$tooltipList-border-radius: $standard-border-radius !default;
$tooltipList-background-color: white !default;
// 17 Preloader 프리로더
// ANCHOR preloader loading=========================================================================
$preloader-background-color: $grey-opacity2 !default;
$preloader-fill-color: $primary-color !default;

// 18 Table 테이블
// ANCHOR table Table=========================================================================
$table-padding: $standard-small-space !default;
$table-border-radius: $standard-border-radius !default;
$table-borders-color: $grey-level0 !default;
$table-outborder-color: $outborder-color !default;
$table-header-border-bottom: 2px solid $table-outborder-color !default;
$table-outborder: 1px solid $table-outborder-color !default;
$table-radius: $standard-border-radius;
// 19 imageUploader 이미지업로더
// ANCHOR image Uploader=========================================================================
$IUploader-border-radius: $standard-border-radius !default;
$IUploader-border-color: $grey-level0 !default;
$IUploader-border: 2px dashed $IUploader-border-color !default;
// 20 colorPicker 컬러 칼라 컬러픽커
// ANCHOR color Color=========================================================================
$colorPicker-padding: $standard-tiny-space !default;
$colorPicker-height: $standard-line-height - ($colorPicker-padding * 2) !default;
$colorPicker-width: 3rem !default;
$colorPicker-radius: $standard-border-radius !default;
$colorPicker-outborder-color: $outborder-color !default;
$colorPicker-bg: white !default;
$colorPicker-border: 1px solid $colorPicker-outborder-color !default;
// 21 assigTimeline 배정 타임라인 방배정
// ANCHOR assig Assig=========================================================================
$assigItem-block-color: $html-color !default;
$assigItem-normalStatus-color: #4079ecd1 !default; // #2153dbcc
$assigItem-checkIn-color: rgba(255, 238, 0, 0.7) !default;
$assigItem-selected-border-color: #4e83efd1 !default;
$assigItem-linked-bgColor: rgba(255, 255, 255, 0.5) !default;
$assigItem-progressing-opacity: 0.5 !default;
// 반하얀색임
$AT-assigGroup-roomType-width: 6.25rem !default;
$AT-assigGroup-room-width: 6.25rem !default;
$AT-mobile-assigGroup-roomType-width: 2.25rem !default;

$AT-mobile-assigGroup-room-width: 2.25rem !default;
$assigItem-selected-linked-border-thick: 1px !default;
$assigItem-selected-linked-border: $assigItem-selected-linked-border-thick solid $assigItem-selected-border-color !default;
$assigItem-padding: 0.4rem !default;
// 22 badge 뱃지
// ANCHOR badge Badge=========================================================================
$badge-br: 1rem !default;
$badge-padding: 0.3em 1em !default;
// 23 menu 메뉴
// ANCHOR menu Menu=========================================================================
$menu-dropDown-side-padding: $standard-space !default;
$menu-border-bottom: 1px solid $grey-level1 !default;
// 24 daily Assig
// ANCHOR menu Menu=========================================================================
$dailyAssig-block-height: $standard-line-height !default; // .125rem === "border"
$menu-border-bottom: 1px solid $grey-level1 !default;

// 25 box 박스
// ANCHOR box Box =========================================================================
$box-border: 1px solid $outborder-color !default; // .보더"
$box-padding: $standard-small-space;
// 27 scrollbar
$JDscrollbar-bar-color: $grey-level0;
$JDscrollbar-height: 13px;
$JDscrollbar-width: 10px;
$JDscrollbar-thumb-color: $grey-level2;
$JDscrollbar-thumb-hover-color: $grey-level3;
// 28 holder
$holder-bg: $grey-level2;

// 29 Typho
$typho-line-height: 1.3 !default;

// 30 Splinter
$splinter-color: inherit !default;
$splinter-yzoom: 0.8 !default;

//31 requireMark
$requireMark-color: $point-color;