$global-style: true;

// Color Palette
$brand-1: #ff5000;
$brand-2: #ff9000;
$brand-3: #fff9eb;
$black: #000;
$white: #fff;
$gray-1: #111;
$gray-2: #666;
$gray-3: #999;
$gray-4: #ccc;
$gray-5: #ddd;
$gray-6: #eee;
$gray-7: #f5f5f5;
$gray-8: #f8f8f8;

$blue: #39f;
$gray-dark: #333;
$green: #62d957;
$orange: #f70;
$red: #ff3634;
$yellow: #ffc233;
$yellow-light: #fff9db;

// Box Shadow
$shadow-1: 0 3px 4px 0 rgba(0, 0, 0, 0.04);
$shadow-2: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
$shadow-3: 0 6px 10px 0 rgba(0, 0, 0, 0.08);

// Gutter
$gutter: 12px;

// Body
$body-bg: $white;
$body-color: var(--gray-1);

// Links
$link-color: var(--blue);
$link-decoration: none;
// $link-hover-color: darken($link-color, 15%);
$link-hover-decoration: underline;

// Typography
$font-family-sans-serif:
  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
  Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
  'Segoe UI Symbol', 'Noto Color Emoji';
$font-family-base: $font-family-sans-serif;

$font-size-root: 16px;
$font-size-base: 1rem;

$font-size-xxs: 1rem * calc(10px / $font-size-root);
$font-size-xs: 1rem * calc(12px / $font-size-root);
$font-size-sm: 1rem * calc(14px / $font-size-root);
$font-size-md: 1rem * calc(16px / $font-size-root);
$font-size-lg: 1rem * calc(18px / $font-size-root);

// $font-weight-lighter: lighter;
// $font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 500;
// $font-weight-bolder: bolder;

$font-weight-base: $font-weight-normal;

$line-height-base: 1.5;
$line-height-lg: 1.75;
$line-height-sm: 1.25;

// Border
$border-width: 1px;
// $border-color: $gray-4;
$border-radius-sm: 0.25rem; // 4px
$border-radius-md: 0.75rem; // 12px
$border-radius-lg: 1.25rem; // 20px

// Avatar
$avatar-size: 36px;
$avatar-size-sm: 24px;
$avatar-size-lg: 40px;

$avatar-square-border-radius: 4px;

// Backdrop
$backdrop-bg: rgba(0, 0, 0, 0.7);

// Button
$btn-padding: 5px 12px;
$btn-border-radius: 999px;
$btn-bg: var(--white);
$btn-font-family: inherit;
$btn-font-size: $font-size-sm;
$btn-font-weight: $font-weight-normal;
$btn-line-height: $line-height-base;

$btn-hover-bg: rgba(0, 0, 0, 0.04);
$btn-active-bg: rgba(0, 0, 0, 0.08);

$btn-padding-sm: 4px 12px;
// $btn-border-radius-sm: 15px;
$btn-font-size-sm: $font-size-sm;

$btn-padding-lg: 7px 12px;
// $btn-border-radius-lg: 50px;
$btn-font-size-lg: $font-size-md;

$btn-block-spacing-y: 9px;

$btn-border-width: $border-width;
$btn-border-color: var(--gray-5);

$btn-transition: 0.15s ease-in-out;

$btn-primary-border-color: transparent;
$btn-primary-color: var(--white);
$btn-primary-bg: linear-gradient(90deg, var(--brand-2) 0%, var(--brand-1) 98%);
$btn-primary-hover-bg: $btn-primary-bg right/200%;
$btn-primary-active-bg: $btn-primary-bg right/400%;

// Composer
$composer-padding: 9px var(--gutter);

$composer-input-max-height: 132px;
$composer-input-min-height: 36px;
$composer-input-padding: 8px 12px;
$composer-input-border: 0;
$composer-input-bg: var(--white);
$composer-input-border-radius: 12px;
$composer-input-caret-color: var(--brand-2);
$composer-input-transition: border-color 0.15s ease-in-out;

// Input
$input-width: 100%;
$input-min-height: 24px;
$input-margin: 0;
$input-padding: 5px $gutter;
$input-border: 1px solid var(--gray-6);
$input-border-radius: 12px;
$input-bg: var(--white);
$input-font-family: inherit;
$input-font-size: $font-size-sm;
$input-line-height: 1.5;
$input-color: var(--gray-1);
$input-resize: none;

// List
$list-bg: var(--white);
$list-border-width: $border-width;
$list-border-color: var(--gray-7);
$list-border-radius: 2px;

$list-item-padding: 10px var(--gutter);
$list-item-color: var(--gray-1);
$list-item-font-size: 15px;
$list-item-line-height: 1.6;
$list-item-icon-color: var(--gray-3);

$list-item-hover-bg: $btn-hover-bg;

$list-item-active-bg: var(--gray-6);

// Navbar
$navbar-height: 44px;
$navbar-padding: 0 var(--gutter);
$navbar-bg: var(--gray-6);
$navbar-border-color: var(--gray-5);

$navbar-color: var(--gray-1);
$navbar-font-size: $font-size-lg;
$navbar-logo-height: $navbar-height - 8px;

// Notice
$notice-padding: $gutter;
$notice-border-radius: 12px;
$notice-bg: var(--white);
$notice-icon-color: var(--brand-1);

$notice-content-color: var(--gray-1);
$notice-content-font-size: 13px;

// RateActions
$rate-btn-bg: var(--white);

// Bubble
$bubble-max-width: 680px;

$bubble-left-bg: var(--white);
$bubble-left-color: '';
$bubble-left-border-radius: 12px;

$bubble-right-bg: $brand-3;
$bubble-right-color: '';
$bubble-right-border-radius: 12px;

$bubble-left-gutter: 48px;
$bubble-right-gutter: 40px;

$bubble-text-padding: 12px;

$bubble-img-max-width: 200px;
$bubble-img-max-height: 200px;

$bubble-typing-padding: 8px 16px;

// Card
$card-padding: 12px;
$card-title-padding: $card-padding $card-padding 6px;
$card-title-font-size: $font-size-md;
$card-title-font-weight: $font-weight-bold;
$card-subtitle-font-size: $font-size-xxs;
$card-subtitle-color: var(--gray-3);
$card-border-width: $border-width;
$card-border-radius: 12px;
// $card-border-color: ;
$card-bg: var(--white);

$card-text-color: var(--gray-dark);

$card-size-xl: 300px;
$card-size-lg: 160px;
$card-size-md: 120px;
$card-size-sm: 104px;
$card-size-xs: 80px;

$card-fluid-width: calc(100% - 48px);
$card-max-width: 680px;
$card-min-width: 260px;

$card-btn-padding: 10px;
$card-btn-line-height: 1.5;
$card-btn-spacing-x: $gutter;
$card-btn-spacing-y: 0;
$card-btn-border-color: var(--gray-6);

$card-column-btn-bg: var(--white);
$card-column-btn-color: var(--gray-3);

$card-column-btn-primary-color: var(--brand-1);

$card-column-btn-hover-bg: var(--gray-7);
$card-column-btn-active-bg: var(--gray-7);

$card-column-btn-disabled-color: var(--gray-4);

// Carousel
$carousel-dots-bottom: 8px;

$carousel-dot-width: 8px;
$carousel-dot-height: $carousel-dot-width;
$carousel-dot-margin: 0 4px;
$carousel-dot-padding: 0;
$carousel-dot-border: 0;
$carousel-dot-border-radius: 50%;
$carousel-dot-bg: var(--gray-4);
$carousel-dot-transition: 0.3s;

// Icon
$icon-size-lg: 30px;

// IconButton
$icon-button-border: 0;
$icon-button-border-radius: 3px;
$icon-button-bg: transparent;
$icon-button-color: var(--gray-2);
$icon-button-size: 18px;

$icon-button-primary-color: var(--brand-2);

$icon-button-lg-border-radius: 6px;
$icon-button-lg-size: 24px;

$icon-button-disabled-border-color: var(--gray-6);
$icon-button-disabled-color: var(--gray-6);

// Modals
$modal-width: 320px;
$modal-border-radius: 12px;

$modal-bg: var(--white);
$modal-box-shadow: var(--shadow-3);

$modal-header-padding: $gutter;

$modal-title-margin: 0;
$modal-title-color: var(--gray-1);
$modal-title-font-size: $font-size-lg;
$modal-title-font-weight: $font-weight-bold;

$modal-close-padding: 0;
$modal-close-color: var(--gray-1);

$modal-footer-x-padding: $gutter;
$modal-btn-x-spacing: $gutter;

$modal-btn-y-padding: 12px;
$modal-btn-y-border-width: 1px;
$modal-btn-y-border-color: var(--gray-6);
$modal-btn-y-bg: var(--white);
$modal-btn-y-color: var(--gray-2);
$modal-btn-y-primary-color: var(--brand-1);

$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-opacity: 0;
$modal-show-opacity: 1;
$modal-transition:
  transform 0.3s ease-out,
  opacity 0.15s linear;

// Popup
$popup-border-radius: 27px 27px 0 0;
$popup-bg: var(--white);

$popup-max-height: 70vh;
$popup-wide-width: 480px;

$popup-header-padding: 15px 40px;

$popup-title-margin: $modal-title-margin;
$popup-title-color: $modal-title-color;
$popup-title-font-size: $modal-title-font-size;

$popup-close-color: $modal-close-color;

$popup-footer-padding: 9px $gutter;
$popup-btn-x-spacing: 9px;

// Popover
$popover-border-radius: 6px;
$popover-bg: var(--white);
$popover-box-shadow: $modal-box-shadow;

// SendConfirm
$send-confirm-dialog-width: 480px;
$send-confirm-dialog-margin: 20px;
$send-confirm-inner-height: 320px;

// Progress bars
$progress-height: 2px;
$progress-bg: var(--gray-5);
$progress-border-radius: 100px;
$progress-bar-bg: var(--blue);
$progress-bar-transition: width 0.6s ease;

$progress-bar-bg-success: var(--green);
$progress-bar-bg-error: var(--red);

// QuickReplies
$quick-replies-padding: 9px $gutter;
$quick-replies-bg: var(--gray-7);

$quick-reply-color: var(--gray-1);
$quick-reply-font-size: $font-size-sm;

$quick-reply-hover-bg: var(--gray-6);

$quick-reply-dot-top: 0;
$quick-reply-dot-right: 0;
$quick-reply-dot-size: 8px;
$quick-reply-dot-bg: var(--red);

// ScrollView
$scroll-view-spacing-x: 6px;

// Tabs
$tabs-nav-link-padding: 4px 12px;
$tabs-nav-link-border: 0;
$tabs-nav-link-border-radius: 20px;
$tabs-nav-link-bg: transparent;
$tabs-nav-link-color: var(--gray-2);
$tabs-nav-link-font-size: $font-size-sm;
$tabs-nav-link-transition: 0.3s;

$tabs-nav-link-hover-color: var(--gray-1);

$tabs-nav-link-active-color: $tabs-nav-link-hover-color;

$tabs-nav-pointer-height: 3px;
$tabs-nav-pointer-bg: $btn-primary-bg;
$tabs-nav-pointer-border-radius: 2px;
$tabs-nav-pointer-transition: 0.3s;

// Tag
$tag-margin: 0 4px 0 0;
$tag-padding: 0 6px;
$tag-border-radius: 4px;
$tag-color: var(--brand-1);
$tag-font-size: 12px;

// Price
$price-font-size: $font-size-sm;

// Goods
$goods-img-width: 72px;
$goods-img-height: $goods-img-width;
$goods-img-border-radius: 12px;

$goods-padding: $gutter;
$goods-gap: 9px;
$goods-desc-color: var(--gray-3);
$goods-meta-color: var(--gray-3);
$goods-meta-font-size: $font-size-xxs;
$goods-border-width: 1px;
$goods-border-color: var(--gray-7);
$goods-count-color: var(--gray-3);
$goods-count-font-size: $font-size-xs;
$goods-unit-font-size: $font-size-xxs;
$goods-buy-btn-bg: $brand-1;
$goods-buy-btn-color: #fff;
$goods-buy-btn-padding: 2px;
$goods-detail-btn-min-width: 48px;
$goods-detail-btn-padding: 0 10px;
$goods-detail-btn-border-radius: 10px;
$goods-detail-btn-font-size: $font-size-xxs;
$goods-detail-btn-line-height: 18px;
$goods-status-color: var(--highlight-2);

// MessageList
$message-list-padding: var(--gutter);

$message-spacer-y: 12px;

// Toast
$toast-content-padding: 18px 24px;
$toast-content-border-radius: 12px;
$toast-content-bg: rgba(0, 0, 0, 0.7);

$toast-message-margin: 0;
$toast-message-color: var(--white);
$toast-message-font-size: 16px;

// Z-index
$zindex-backdrop: 100;
$zindex-modal: 100;
$zindex-popup: $zindex-modal;
$zindex-popover: 1030;
$zindex-toast: 200;
$zindex-tooltip: 200;
$zindex-recorder-toast: 100;

$zindex-navbar: 10;
$zindex-footer: 10;
$zindex-quick-replies: 110;
$zindex-rate-actions: 10;

$zindex-step-dot: 2;
