//  ANGULAR BASE APPS SETTINGS
//  --------------------------
//
//  Table of Contents:
//
//   1. CSS Exports
//   2. Global Styles
//   3. Breakpoints
//   4. Typography
//   5. Grid
//   6. Button
//   7. Accordion
//   8. Action Sheet
//   9. Block List
//  10. Button Group
//  11. Card
//  12. Compatibility
//  13. Extras
//  14. Forms
//  15. Icon
//  16. Label
//  17. Loader
//  18. Menu Bar
//  19. Modal
//  20. Motion
//  21. Notification
//  22. Off Canvas
//  23. Panel
//  24. Popup
//  25. Switch
//  26. Tabs
//  27. Title Bar

@import 'helpers/functions';

// 1. CSS Exports
// --------------

$include-css: (
  accordion: true,
  action-sheet: true,
  block-list: true,
  button: true,
  button-group: true,
  card: true,
  compatibility: true,
  coloring: true,
  extras: true,
  forms: true,
  grid: true,
  icon: true,
  label: true,
  badge: true,
  list: true,
  menu-bar: true,
  loader: true,
  modal: true,
  motion: true,
  notification: true,
  off-canvas: true,
  panel: true,
  popup: true,
  switch: true,
  tabs: true,
  title-bar: true,
  typography: true,
  utilities: true
);

// 2. Global Styles
// ----------------

$rem-base: 16px;
$base-font-size: 100%;
$base-line-height: 1.5;
$headers: "h1,h2,h3,h4,h5,h6";
$font-weight-normal: normal;
$font-weight-bold: bold;
$body-background: #fff;
$body-font-color: #222;
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
$body-font-weight: $font-weight-normal;
$body-font-style: normal;
$body-antialiased: true;
$primary-color: #00558b;
$secondary-color: #f1f1f1;
$alert-color: #F04124;
$info-color: #A0D3E8;
$success-color: #43AC6A;
$warning-color: #F08A24;
$dark-color: #232323;
$gray: #dfdfdf;
$gray-dark: darken($gray, 8);
$gray-light: lighten($gray, 8);
$global-radius: 4px;
$global-rounded: 1000px;
$global-padding: 1rem;
$global-spacing: rem-calc(15);
$icon-classes: ('iconic', 'ionicons', 'material-icons', 'open-iconic');
$loader-classes: ('sk-loader');

// 3. Breakpoints
// --------------

$breakpoints: (
  small: rem-calc(0),
  medium: rem-calc(640),
  large: rem-calc(1200),
  xlarge: rem-calc(1440),
  xxlarge: rem-calc(1920),
);
$breakpoint-classes: (small medium large);

// 4. Typography
// -------------

$header-font-family: $body-font-family;
$header-font-weight: $font-weight-normal;
$header-font-style: $font-weight-normal;
$header-font-color: #222;
$header-line-height: 1.4;
$header-top-margin: .2rem;
$header-bottom-margin: .5rem;
$header-text-rendering: optimizeLegibility;
$h2-font-size: rem-calc(37);
$h3-font-size: rem-calc(27);
$h4-font-size: rem-calc(23);
$h5-font-size: rem-calc(18);
$h6-font-size: 1rem;
$h2-font-reduction: rem-calc(10);
$h3-font-reduction: rem-calc(5);
$h4-font-reduction: rem-calc(5);
$h5-font-reduction: 0;
$h6-font-reduction: 0;
$subheader-line-height: 1.4;
$subheader-font-color: scale-color($header-font-color, $lightness: 35%);
$subheader-font-weight: $font-weight-normal;
$subheader-top-margin: .2rem;
$subheader-bottom-margin: .5rem;
$small-font-size: 60%;
$small-font-color: scale-color($header-font-color, $lightness: 35%);
$paragraph-font-family: inherit;
$paragraph-font-weight: $font-weight-normal;
$paragraph-font-size: 1rem;
$paragraph-line-height: 1.6;
$paragraph-margin-bottom: rem-calc(20);
$paragraph-aside-font-size: rem-calc(14);
$paragraph-aside-line-height: 1.35;
$paragraph-aside-font-style: italic;
$paragraph-text-rendering: optimizeLegibility;
$code-color: grayscale($primary-color);
$code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
$code-font-weight: $font-weight-normal;
$code-background-color: scale-color($secondary-color, $lightness: 70%);
$code-border-size: 1px;
$code-border-style: solid;
$code-border-color: scale-color($code-background-color, $lightness: -10%);
$code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
$anchor-text-decoration: none;
$anchor-text-decoration-hover: none;
$anchor-font-color: $primary-color;
$anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
$hr-border-width: 1px;
$hr-border-style: solid;
$hr-border-color: #ddd;
$hr-margin: rem-calc(20);
$list-font-family: $paragraph-font-family;
$list-font-size: $paragraph-font-size;
$list-line-height: $paragraph-line-height;
$list-margin-bottom: $paragraph-margin-bottom;
$list-style-position: outside;
$list-side-margin: 1.1rem;
$list-ordered-side-margin: 1.4rem;
$list-side-margin-no-bullet: 0;
$list-nested-margin: rem-calc(20);
$definition-list-header-weight: $font-weight-bold;
$definition-list-header-margin-bottom: .3rem;
$definition-list-margin-bottom: rem-calc(12);
$blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid #ddd;
$blockquote-cite-font-size: rem-calc(13);
$blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
$blockquote-cite-link-color: $blockquote-cite-font-color;
$acronym-underline: 1px dotted #ddd;

// 5. Grid
// -------

$container-width: rem-calc(900);
$block-padding: $global-padding;
$block-spacing: $global-spacing;
$total-columns: 12;
$block-grid-max-size: 6;

// 6. Button
// ---------

$button-padding: 0.85em 1em;
$button-margin: 0 $global-padding $global-padding 0;
$button-style: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: auto;
$button-radius: 0;
$button-sizes: (
  tiny: 0.7,
  small: 0.8,
  medium: 1,
  large: 1.3,
);
$button-font-size: 0.9rem;
$button-opacity-disabled: 0.5;
$button-tag-selector: false;
$button-icon-spacing: 0.5em;

// 7. Accordion
// ------------

$accordion-border: 1px solid $gray-dark;
$accordion-title-background: $gray-light;
$accordion-title-background-hover: smartscale($accordion-title-background, 5%);
$accordion-title-background-active: smartscale($accordion-title-background, 3%);
$accordion-title-color: isitlight($accordion-title-background);
$accordion-title-color-active: isitlight($accordion-title-background);
$accordion-title-padding: $global-padding;
$accordion-content-padding: $global-padding;

// 8. Action Sheet
// ---------------

$actionsheet-background: white;
$actionsheet-border-color: #ccc;
$actionsheet-animate: transform opacity;
$actionsheet-animation-speed: 0.25s;
$actionsheet-width: 300px;
$actionsheet-radius: 4px;
$actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
$actionsheet-padding: $global-padding;
$actionsheet-tail-size: 10px;
$actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);
$actionsheet-link-color: #000;
$actionsheet-link-background-hover: smartscale($actionsheet-background);

// 9. Block List
// -------------

$blocklist-background: #fff;
$blocklist-fullbleed: true;
$blocklist-fontsize: 1rem;
$blocklist-item-padding: 0.8rem 1rem;
$blocklist-item-color: isitlight($blocklist-background, #000, #fff);
$blocklist-item-background-hover: smartscale($blocklist-background, 4.5%);
$blocklist-item-color-disabled: #999;
$blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%);
$blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%);
$blocklist-item-icon-size: 0.8;
$blocklist-header-fontsize: 0.8em;
$blocklist-header-color: smartscale($blocklist-item-color, 40%);
$blocklist-header-uppercase: true;
$blocklist-check-icons: true;

// 10. Button Group
// ----------------

$btngroup-background: $primary-color;
$btngroup-color: #fff;
$btngroup-radius: $button-radius;

// 11. Card
// --------

$card-background: #fff;
$card-color: isitlight($card-background);
$card-border: 1px solid smartscale($card-background, 7%);
$card-radius: $global-radius;
$card-shadow: 0 1px 2px rgba(#000, 0.2);
$card-padding: $global-padding;
$card-margin: 0.5rem;
$card-divider-background: smartscale($card-background, 7%);

// 12. Compatibility
// -----------------

$nosupport-overlay: #000000;
$nosupport-background: $alert-color;
$nosupport-color: isitlight($nosupport-background);
$nosupport-top: 15%;
$nosupport-width: 50%;
$nosupport-font: Arial, Helvetica, sans-serif !important;

// 13. Extras
// ----------

$closebutton-position: (top right);
$closebutton-size: 2em;
$closebutton-lineheight: 0.5;
$closebutton-color: #999;
$closebutton-color-hover: #333;
$thumbnail-padding: 0.5rem;
$thumbnail-shadow: 0 3px 15px rgba(black, 0.25);

// 14. Forms
// ---------

$form-fontsize: 1rem;
$form-padding: 0.5rem;
$input-color: #000;
$input-color-hover: $input-color;
$input-color-focus: $input-color;
$input-background: #fff;
$input-background-hover: $input-background;
$input-background-focus: $input-background;
$input-background-disabled: smartscale($input-background);
$input-border: 1px solid #ccc;
$input-border-hover: 1px solid #bbb;
$input-border-focus: 1px solid #999;
$input-cursor-disabled: not-allowed;
$select-color: #000;
$select-background: #fafafa;
$select-background-hover: smartscale($select-background, 4%);
$select-arrow: true;
$select-arrow-color: $select-color;
$form-label-fontsize: 0.9rem;
$form-label-margin: 0.5rem;
$form-label-color: #333;
$inlinelabel-color: #333;
$inlinelabel-background: #eee;
$inlinelabel-border: $input-border;
$slider-background: #ddd;
$slider-height: 1rem;
$slider-radius: 0px;
$slider-thumb-height: 1.5rem;
$slider-thumb-color: $primary-color;
$slider-thumb-radius: 0px;
$meter-height: 1.5rem;
$meter-background: #ccc;
$meter-fill: $primary-color;
$meter-fill-high: $success-color;
$meter-fill-medium: #e7cf00;
$meter-fill-low: $alert-color;
$meter-radius: 0;

// 15. Icon
// --------

$icon-primary-fill: $primary-color;
$icon-primary-stroke: $primary-color;
$icon-accent-fill: $icon-primary-fill;
$icon-accent-stroke: $icon-accent-fill;
$icon-sizes: (
  tiny: 0.5,
  small: 1,
  medium: 2,
  large: 4
);
$icon-default-size: 1rem;

// 16. Label
// ---------

$label-fontsize: 0.8rem;
$label-padding: ($global-padding / 3) ($global-padding / 2);
$label-margin: 0 0 ($global-spacing / 2) 0;
$label-radius: 0;
$label-background: $primary-color;
$label-color: isitlight($primary-color);
$badge-margin: 0 0 ($global-spacing / 2) 0;
$badge-fontsize: 0.8em;
$badge-diameter: 1.5rem;
$badge-background: $primary-color;
$badge-color: #fff;

// 17. Loader
// ----------

$loader-sizes: (
  tiny: 0.5,
  small: 1,
  medium: 2,
  large: 4
);
$loader-default-size: 1rem;

// 18. Menu Bar
// ------------

$menubar-fontsize: 1rem;
$menubar-background: #fff;
$menubar-background-hover: smartscale($menubar-background, 7%);
$menubar-background-active: $menubar-background-hover;
$menubar-color: isitlight($menubar-background);
$menubar-color-hover: $menubar-color;
$menubar-color-active: $menubar-color-hover;
$menubar-item-padding: $global-padding;
$menubar-icon-size: 25px;
$menubar-icon-spacing: $menubar-item-padding;

// 19. Modal
// ---------

$modal-background: #fff;
$modal-border: 0;
$modal-radius: 0px;
$modal-shadow: none;
$modal-zindex: 1000;
$modal-sizes: (
  tiny: 300px,
  small: 500px,
  medium: 600px,
  large: 800px,
);
$modal-overlay-class: 'modal-overlay';
$modal-overlay-background: rgba(#333, 0.7);

// 20. Motion
// ----------

$motion-class: (
  in: "ng-enter",
  out: "ng-leave",
);
$motion-class-active: (
  in: "ng-enter-active",
  out: "ng-leave-active",
);
$motion-class-stagger: (
  in: "ng-enter-stagger",
  out: "ng-leave-stagger",
);
$motion-class-showhide: (
  in: "ng-hide-remove",
  out: "ng-hide-add",
);
$motion-class-showhide-active: (
  in: "ng-hide-remove-active",
  out: "ng-hide-add-active",
);
$motion-slide-and-fade: false;
$motion-hinge-and-fade: true;
$motion-scale-and-fade: true;
$motion-spin-and-fade: true;
$motion-duration-default: 500ms;
$motion-duration-slow: 750ms;
$motion-duration-fast: 250ms;
$motion-stagger-duration-default: 150ms;
$motion-stagger-duration-short: 50ms;
$motion-stagger-duration-long: 300ms;
$motion-timing-default: ease;
$motion-timings: (
  linear: linear,
  ease: ease,
  easeIn: ease-in,
  easeOut: ease-out,
  easeInOut: ease-in-out,
  bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
  bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
  bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
);
$motion-delay-default: 0;
$motion-delay-short: 300ms;
$motion-delay-long: 700ms;

// 21. Notification
// ----------------

$notification-default-position: right top;
$notification-width: rem-calc(400);
$notification-offset: $global-padding;
$notification-background: $primary-color;
$notification-color: white;
$notification-padding: $global-padding;
$notification-radius: 4px;
$notification-icon-size: 60px;
$notification-icon-margin: $global-padding;
$notification-icon-align: top;

// 22. Off Canvas
// --------------

$offcanvas-size-horizontal: 250px;
$offcanvas-size-vertical: 250px;
$offcanvas-background: #fff;
$offcanvas-color: isitlight($offcanvas-background);
$offcanvas-padding: 0;
$offcanvas-shadow: 3px 0 10px rgba(black, 0.25);
$offcanvas-animation-speed: 0.25s;
$offcanvas-frame-selector: '.grid-frame';

// 23. Panel
// ---------

$panel-size-horizontal: 300px;
$panel-size-vertical: 300px;
$panel-padding: 0;
$panel-background: #fff;
$panel-shadow: 3px 0 10px rgba(black, 0.25);

// 24. Popup
// ---------

$popup-width: rem-calc(300);
$popup-background: #fff;
$popup-border: 0;
$popup-radius: 0;
$popup-shadow: 0 0 10px rgba(#000, 0.25);

// 25. Switch
// ----------

$switch-width: rem-calc(50);
$switch-height: rem-calc(32);
$switch-background: #ccc;
$switch-background-active: $primary-color;
$switch-border: 0;
$switch-radius: 9999px;
$switch-animation-speed: 0.15s;
$switch-paddle-color: white;
$switch-paddle-offset: 4px;

// 26. Tabs
// --------

$tabstrip-background: transparent;
$tab-title-background: $gray-light;
$tab-title-background-hover: smartscale($tab-title-background, 5%);
$tab-title-background-active: smartscale($tab-title-background, 3%);
$tab-title-color: isitlight($tab-title-background);
$tab-title-color-active: $tab-title-color;
$tab-title-padding: $global-padding;
$tab-content-padding: $global-padding;

// 27. Title Bar
// -------------

$titlebar-center-width: 50%;
$titlebar-side-width: (100% - $titlebar-center-width) / 2;
$titlebar-background: #eee;
$titlebar-color: #000;
$titlebar-border: 1px solid #ccc;
$titlebar-padding: $global-padding;
$titlebar-item-classes: (
  center: 'center',
  left: 'left',
  right: 'right',
  title: 'title',
);