// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: '../assets/fonts';
$font-family-base: 'Roboto';
// The app direction is used to include
// rtl styles in your app. For more info, please see:
// http://ionicframework.com/docs/theming/rtl-support/
$app-direction: ltr;
@import 'ionic.globals';
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
// Override - Homogenized ionic component styles

@import 'icons';
@import 'lists';
@import 'overrides';
@import 'mixins';
@import 'modals';
@import 'zero-state';
// Colors
$colors: (
  primary: $color-primary,
  secondary: $color-secondary,
  warning: #fdb455,
  danger: #df5264,
  success: #01d1a2,
  info: #5476eb,
  light: #f4f4f4,
  blank: #fff,
  dark: #000,
  grey: #667,
  light-grey: #9b9bab,
  error: #e56c7b,
  btc-color: #f7931a,
  eth-color: #6b71d6
);

$background-colors: (
  warning: #fff7f2,
  danger: #fff2f4,
  success: #bfffeb,
  info: #eff1f8
);

// Wallet-details
$feather-dark: #f8f8f9;
$feather: #fbfbff;

$slateDark: #434d5a;
$black: #303133;

// Refresh color
$refresher-icon-color: color($colors, primary);
$refresher-icon-font-size: 12px;
$refresher-border-color: none;
// Toolbar
$toolbar-text-color: color($colors, light);
// Main color
$text-color: color($colors, dark);
// Border light
$list-border-color: color($colors, light);
// Toolbar
$toolbar-ios-title-text-color: color($colors, light);
$toolbar-md-title-text-color: color($colors, light);
// Onboarding colors
$onboarding-gradient-bottom-color: $color-secondary-dark;
$onboarding-background-image: linear-gradient(
  to bottom,
  $onboarding-gradient-top-color 0%,
  $onboarding-gradient-bottom-color 100%
);
// Removes green border below the input (Android)
$text-input-md-highlight-color-invalid: transparent;
$text-input-md-highlight-color-valid: transparent;
$text-input-md-show-invalid-highlight: transparent;
$text-input-md-highlight-color: transparent;
$text-input-md-show-valid-highlight: transparent;
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$tabs-ios-border-color: rgba(0, 0, 0, 0.1);
$item-ios-divider-color: color($colors, grey);
$item-ios-padding-top: 16px;
$item-ios-padding-bottom: 16px;
$label-ios-margin-top: 14px;
$label-ios-margin-bottom: 14px;
$list-ios-border-color: color($colors, light);
$list-ios-margin-bottom: 0;
$list-ios-header-font-weight: 700;
$list-ios-header-color: color($colors, dark);
$searchbar-ios-background-color: color($colors, blank);
$searchbar-ios-padding-vertical: 16px;
$searchbar-ios-padding-horizontal: 8px;
$note-ios-color: color($colors, light-grey);
$toolbar-ios-title-font-weight: 400;
$checkbox-ios-icon-border-color-off: color($colors, light-grey);
$range-ios-tick-width: 10px;
$range-ios-tick-height: 10px;
$range-ios-knob-width: 23px;
$range-ios-knob-height: 23px;
$range-ios-tick-border-radius: 50%;
$range-ios-bar-height: 3px;
$range-ios-slider-height: 35px;

// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$item-md-divider-color: color($colors, grey);
$item-md-padding-top: 16px;
$item-md-padding-bottom: 16px;
$label-md-margin-top: 14px;
$label-md-margin-bottom: 14px;
$searchbar-md-padding-start: 8px;
$searchbar-md-padding-end: 8px;
$searchbar-md-padding-top: 16px;
$list-md-border-color: color($colors, light);
$list-md-header-margin-bottom: 0;
$list-md-margin-bottom: 0;
$list-md-header-color: color($colors, dark);
$note-md-color: color($colors, light-grey);
$alert-md-title-font-size: 16px;
$alert-md-sub-title-font-size: 12.5px;
$alert-md-message-font-size: 12.5px;
$button-md-text-transform: none;
$button-md-clear-background-color-hover: transparent;
$badge-md-border-radius: 9px;
$segment-button-md-border-color-activated: color($colors, primary);
$segment-button-md-border-bottom-width: 0.5px;
$segment-button-md-text-color-activated: color($colors, dark);
$segment-button-md-height: 5rem;
$segment-button-md-padding-top: 4px;
$range-md-tick-width: 10px;
$range-md-tick-height: 10px;
$range-md-knob-width: 30px;
$range-md-knob-height: 30px;
$range-md-slider-height: 35px;
// $range-ios-knob-box-shadow: 3% solid white;
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.
@import 'ionic.theme.default';
@import 'dark';
@import 'light';

// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/
@import 'ionic.ionicons';
// Fonts
// --------------------------------------------------
@import 'roboto';
@import 'noto-sans';

@font-face {
  font-family: 'AmazonEmberDisplay';
  src: url(../assets/fonts/AmazonEmberDisplay_Rg.ttf) format('truetype');
}

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: normal;
  src: url(../assets/fonts/Heebo-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Heebo-Medium';
  src: url(../assets/fonts/Heebo-Medium.ttf) format('truetype');
}

/* Ionic Overrides and Workarounds */

// Please include a description of the problem solved by the workaround.
// Hide scrollbars on platforms which don't match iOS, Android, or Windows
// (So scroll bars are not visible in Chrome, NW.js, or Electron.)
.platform-core .scroll-content {
  overflow-y: auto;
}

* ::-webkit-scrollbar {
  display: none;
}

// Removes border-bottom
.md,
.ios {
  .card {
    ion-list > .item:last-child,
    ion-list > .item-wrapper:last-child .item,
    ion-list > .item:last-child,
    ion-list > .item-wrapper:last-child .item {
      border-bottom: none;
    }
  }
}

/* Fix iPhone X screen */

ion-footer {
  .toolbar {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-left: 0rem !important;

    .toolbar-background {
      background: none;
      border: 0px;
    }
  }

  .toolbar-md {
    padding-bottom: 0rem !important;
  }

  .toolbar-ios {
    margin-bottom: -4px;
  }
}

/* Force safe-area for iPhone X with ion-footer */
.ios .tabs:not(.tabs-ios[tabsPlacement='top']) ion-footer .toolbar:last-child {
  padding-bottom: 0 !important;
  padding-bottom: calc(env(safe-area-inset-bottom)) !important;
  padding-bottom: -webkit-calc(env(safe-area-inset-bottom)) !important;
}

.toolbar {
  // Titles centered on all headers for material design
  &.toolbar-md {
    //material design only
    position: relative;

    .back-button {
      z-index: 999;
    }

    .title-md {
      //material design only
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      text-align: center;

      .toolbar-title-md {
        padding: 0px 70px 0px 70px;
        font-weight: 400;
      }
    }
  }
}
