// http://ionicframework.com/docs/theming/
// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.
html {
  height: 100vh;
}

body {
  line-height: 22px;
}

// all content without menu
ion-content.add-bottom-safe-area {
  .fixed-content,
  .scroll-content {
    padding-bottom: 0;
    padding-bottom: calc(env(safe-area-inset-bottom));
    padding-bottom: -webkit-calc(env(safe-area-inset-bottom));
  }
}

// expandable views
ion-content.add-padding-bottom,
.add-padding-bottom ion-content {
  .fixed-content,
  .scroll-content {
    padding-bottom: 120px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
    padding-bottom: -webkit-calc(120px + env(safe-area-inset-bottom));
  }
}

ion-title.bp-title {
  .toolbar-title.toolbar-title-md,
  .toolbar-title.toolbar-title-ios {
    font-weight: 700 !important;
  }
}

// Alert position
// --------------------------------------------------
ion-alert.alert-top {
  align-items: center;
}

ion-alert {
  .alert-wrapper {
    color: black;

    .alert-title {
      color: black;
    }
  }

  .alert-radio-group {
    .alert-radio:not([aria-checked='true']) .alert-radio-label {
      color: black;
    }
  }
}

// Text wrap
// --------------------------------------------------
ion-label {
  white-space: normal;
}

.two-lines {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

// Header
// --------------------------------------------------
ion-header.bp-header .toolbar {
  ion-title {
    padding: 0;

    .toolbar-title.toolbar-title-md,
    .toolbar-title.toolbar-title-ios {
      font-size: 18px;
      font-weight: 700;
    }
  }
}

.wide-header__title {
  color: $text-color;
  font-size: 25px;
  font-weight: 700;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  background: $background-color;
}

.close-container {
  margin-left: 13px !important;
  height: 41px;
  width: 41px;
  border-radius: 50%;
  background-color: rgba(155, 163, 174, 0.2);
  color: #d8d8d8;
  box-shadow: none;

  &.button-ios {
    margin: 0;
  }

  &.button-md.activated,
  &.button-ios.activated {
    background-color: rgba(155, 163, 174, 0.2);
    box-shadow: none;
  }
}

.option-button {
  font-size: 24px;
  opacity: 0.6;
  border-radius: none;
  background-color: transparent !important;
  margin: 0 5px;
  color: #434d5a;

  &.activated,
  &:hover:not(.disable-hover) {
    color: #434d5a;
  }
}

// Buttons
// --------------------------------------------------
.bottom-absolute {
  width: 100%;
  position: absolute;
  bottom: 0;
  bottom: calc(env(safe-area-inset-bottom));
  padding: 15px 15px calc(5vw + 1vh) 15px;
  padding: 15px 15px -webkit-calc(5vw + 1vh) 15px;

  .button {
    margin: 1.2rem auto;
    max-width: 360px;
  }
}

.button-footer {
  margin: 0;
  height: 70px;
  width: 100%;
  font-size: 18px;
}

// Themes
// --------------------------------------------------
// This is just to make a smooth transition between themes
@mixin transition {
  transition: all, color, 150ms cubic-bezier(0, 0, 0.3, 0.3) !important;
}

.theme-transition {
  ion-content.add-bottom-safe-area {
    .fixed-content,
    .scroll-content {
      @include transition();
    }
  }

  ion-content.add-padding-bottom,
  .add-padding-bottom ion-content {
    .fixed-content,
    .scroll-content {
      @include transition();
    }
  }

  ion-content,
  .content-ios .toolbar-background-ios,
  .toolbar-background-md,
  .toolbar-title,
  .back-button-ios,
  .back-button-md,
  .header .toolbar-background {
    @include transition();
  }

  // Lists
  .bp-list.settings-list {
    .item {
      &.item-ios,
      &.item-md {
        @include transition();
      }
    }
  }
}

/* Refresh component */
ion-refresher-content {
  justify-content: normal;
}

ion-spinner * {
  stroke: color($colors, light);
}

.header-ios .toolbar-background-ios {
  border-width: 0 !important;
}

.item-subtitle {
  margin-top: 5px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 300;
  font-size: 13px;

  ion-icon {
    vertical-align: text-bottom;
    margin-left: 5px;
  }
}

// Fixes IOS 10.3.1 icons
.item-img {
  display: flex;
  align-items: center;
}

.toolbar.toolbar-md,
.toolbar.toolbar-ios {
  .back-button-md {
    min-width: 41px;
  }

  .back-button {
    margin-left: 15px;
    height: 41px;
    width: 41px;
    border-radius: 50%;
    background-color: rgba(155, 163, 174, 0.12);
    color: #d8d8d8;
    box-shadow: none;

    .back-button-icon-md {
      padding: 0px 0px 32px 4px;

      &::before {
        font-size: 14px;
      }
    }

    .back-button-icon-ios {
      margin: 2px 2px 0px 0px;
    }
  }
}

// Remove border of icons when screen resolution is big
.tab-button-icon {
  overflow: unset;
}

// Remove the MD drop-shadow on app header
.header-md::after {
  display: none;
}

.icon-card {
  width: 35px;
  height: 35px;
  border-radius: $icon-border-radius;
  background-repeat: no-repeat;
  background-clip: padding-box;
  background-size: 103%;
}

.icon-wallet {
  $icon-dim: 36px;
  height: $icon-dim;
  width: $icon-dim;
  margin-right: 16px;

  &.disabled {
    background-color: color($colors, grey);
  }
}

.btc-background {
  background-color: #f7931a;
}

.bch-background {
  background-color: #2fcf6e;
}

.eth-background {
  background-color: #6b71d6;
}

.xrp-background {
  background-color: #000000;
}

.doge-background {
  background-color: #d8c172;
}

.ltc-background {
  background-color: #a6a9aa;
}

button.item {
  &.activated {
    background-color: $feather;
  }
}

.button-item {
  ion-label {
    display: flex;
    align-items: center;
  }
}

.testnet {
  filter: grayscale(100%);
}

.background_xrp.testnet {
  filter: opacity(0.4);
}

.icon-card {
  background-color: #2a3f90;
}

.big-icon-svg {
  padding: 10px;

  .bg {
    padding: 0 7px;
    border-radius: $icon-border-radius;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-clip: padding-box;
    background-size: 103%;

    &.green {
      background: rgb(1, 209, 162);
    }
  }
}

.logo-services {
  width: 100px;
}

.icon-services {
  overflow: hidden;
  background-color: none;
  border-radius: $icon-border-radius;
  width: 35px;
  height: 35px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  background-repeat: no-repeat;
  background-clip: padding-box;
  background-size: 103%;
}

.custom-icon {
  color: rgb(169, 169, 169);
}

.icon-contact {
  width: 35px;
}

.box-notification {
  cursor: pointer;
  padding: 10px;
  text-align: center;

  a {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .icon {
    margin: 0 6px;
    font-size: 20px;
  }

  &.success {
    background-color: color($background-colors, success);
    color: color($colors, success);
  }

  &.info {
    background-color: color($background-colors, info);
    color: color($colors, info);
  }

  &.warning {
    background-color: color($background-colors, warning);
    color: color($colors, warning);
  }

  &.error {
    background-color: color($background-colors, danger);
    color: color($colors, danger);
  }
}

.gravatar {
  min-width: 2.5rem;
  min-height: 2.5rem;
}

// Compatibility Ionic 1
.light,
a.light,
.stable,
a.stable {
  color: color($colors, light);
}

.calm,
a.calm {
  color: color($colors, grey);
}

.positive,
a.positive {
  color: color($colors, primary);
}

.energized,
a.energized {
  color: color($colors, warning);
}

.assertive,
a.assertive {
  color: color($colors, danger);
}

.balanced,
a.balanced {
  color: color($colors, success);
}

.royal,
a.royal {
  color: color($colors, dark);
}

.text-gray {
  color: color($colors, grey);
}

.text-bold {
  font-weight: 700;
}

.ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pointer {
  cursor: pointer;
}

.card {
  padding-top: 1px;
  width: 92%;
  padding-bottom: 10px;
  box-shadow: 0 7px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin: 20px auto;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;

  .item-divider {
    background-color: #ffffff;
    margin-bottom: 5px;
    min-height: 48px;
  }

  .item-block {
    padding: 5px 0 0px 24px;
  }

  .input-wrapper {
    padding-bottom: 4px;
  }
}

.search-container {
  background-color: #ffffff;
}

.search-wrapper {
  background-color: #f8f8f8;
  display: flex;
  align-items: baseline;
  border-radius: 8px;

  .text-input-ios {
    margin: 16px 8px 16px 8px;
  }
}

// Set backgrounds transparent so the QR Scanner can be seen behind the app.
ion-app,
.nav-decor {
  background: transparent !important;
}

.button-standard-full {
  width: 100%;
  margin: 5px 16px 25px 16px;
  display: flex;
  min-height: 60px;
  border-radius: 5px;
  box-shadow: none;
  font-weight: 400;
  font-size: 18px;

  .button-inner {
    padding: 2px;
  }

  span {
    @extend .two-lines;
  }
  &.no-margin-bottom {
    margin-bottom: 0px;
  }
}

.button-standard {
  width: 85%;
  max-width: 300px;
  margin: 5px auto 25px auto;
  display: flex;
  min-height: 60px;
  border-radius: 5px;
  box-shadow: none;
  font-weight: 400;
  font-size: 18px;

  .button-inner {
    padding: 2px;
  }

  span {
    @extend .two-lines;
  }
  &.no-margin-bottom {
    margin-bottom: 0px;
  }
}

.button-default {
  color: white;
}

.button-secondary {
  background-color: #ededed;
  color: black;

  &:hover,
  &:focus,
  &:active {
    &.button-md,
    &.button-ios {
      background-color: #ededed;
      color: black;
      box-shadow: none;
    }
  }

  &:active,
  &.activated {
    &.button-md,
    &.button-ios {
      background-color: $feather;
    }
  }
}

.btn-transparent {
  border: 0px !important;
  background-color: color($colors, secondary);
  color: color($colors, primary);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.alertDanger {
  .alert-message {
    color: color($colors, danger);
  }
}

// https://github.com/ionic-team/ionic/pull/14241
ion-alert .alert-message {
  overflow-y: auto;
}

.header-extend {
  background: $toolbar-background;
  height: 180px;
  position: absolute;
  top: -100px;
  width: 100%;
  z-index: 0;
  display: flex;
  justify-content: center;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: color($colors, light-grey);
  font-size: 16px;
  font-weight: 500;
  margin: 20px 16px 10px 20px;
}

.key-name {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 500;
}

.close-container.button-default {
  color: color($colors, dark);
  box-shadow: none;
}

.qr-container {
  @include center;
  height: 293px;

  .qr-card {
    margin: 0;
    padding-bottom: 0;
    max-width: 293px;
    max-height: 293px;
    box-shadow: none;

    img {
      height: auto;
      width: 100%;
    }

    .aclass {
      @include center;
      padding: 5px;
    }

    .aclass > img {
      filter: grayscale(100%);
      height: 100%;
      width: 100%;
    }
  }
}

.address-divider {
  width: 1px;
  height: 25px;
  background-color: rgb(227, 227, 227);
  display: inline-block;
  margin-left: 6px;
  margin-right: 12px;
  vertical-align: middle;
}

// Add padding bottom when item has label
ion-item.with-label.item {
  padding-bottom: 10px;

  &.item-ios,
  &.item-md {
    .item-inner {
      border-bottom: 0;
    }
  }
}

// avoid issue with box-shadow and floating labels
.ng-valid .item-inner,
.ng-invalid .item-inner,
.item-input-has-focus .item-inner {
  box-shadow: none !important;
}

.slide-confirm-down {
  transform: translate(0px, 200px);
  -webkit-transform: translate(0px, 200px);
}

.slide-confirm-slow {
  transition: transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
}

.slide-confirm-fast {
  transition: transform 0.2s;
  -webkit-transition: -webkit-transform 0.2s;
}

.reorder-done {
  color: color($colors, primary);
}

.reorder-button {
  display: flex;
  position: relative;

  &:after {
    // For easier tappability
    content: '';
    position: absolute;
    height: 30px;
    width: 40px;
    top: -10px;
    left: -10px;
  }
}

page-bitpay-card {
  @include toolbar-button-color(white);

  ion-title .toolbar-title {
    color: color($colors, light);
    font-weight: 75;
  }

  ion-title {
    &.title-ios {
      padding: 0 70px 1px;
    }

    .toolbar-title {
      opacity: 0.7;
      font-weight: 600;
    }
  }

  &:not(.no-subtitle) {
    ion-title .toolbar-title {
      font-weight: 100;
      font-size: 16px;
    }
  }

  ion-toolbar {
    min-height: 0;
    margin-top: -6px;

    &.toolbar-md {
      padding-top: 0;
    }
  }

  &__balance,
  &__balance-hidden,
  &__subtitle {
    text-align: left;
    color: white;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    margin-left: 4.5rem;

    ion-icon {
      font-size: 16px;
      font-weight: 100;
      margin-left: 5px;
    }
  }
}

.icon-plus {
  -webkit-mask-box-image: url(../assets/img/icon-plus.svg);
  height: 18px;
  width: 18px;
  background-color: #cdd1d8;
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 2rem;
  margin: auto;
  transform: translate(0, -10%);
}

.tabbar {
  height: 10vh;

  .tabs-md &,
  .tabs-ios & {
    background: white;
  }

  .tabs-ios & {
    .tab-button-icon {
      height: 22px;
    }
  }

  justify-content: center;
  padding-top: 5px;
  transform: translate3d(0, 0, 0);

  .tab-button {
    max-width: 80px;

    .tab-button-text {
      display: block;
    }
  }
}

ion-tabs {
  &:after {
    // Workaround to prevent tabs from disappearing when activated
    position: absolute;
    display: none;
    content: url('../assets/img/tab-icons/tab-home-active.svg')
      url('../assets/img/tab-icons/tab-wallets-active.svg')
      url('../assets/img/tab-icons/tab-transact.svg')
      url('../assets/img/tab-icons/tab-scan.svg')
      url('../assets/img/tab-icons/tab-copay-scan.svg')
      url('../assets/img/tab-icons/tab-cards-active.svg')
      url('../assets/img/tab-icons/tab-settings-active.svg');
  }

  .tab-badge {
    font-family: 'Roboto';
  }
}

$home-active: url('../assets/img/tab-icons/tab-home-active.svg') no-repeat 50%
  50%;
$home-inactive: url('../assets/img/tab-icons/tab-home.svg') no-repeat 50% 50%;
$wallets-active: url('../assets/img/tab-icons/tab-wallets-active.svg') no-repeat
  50% 50%;
$wallets-inactive: url('../assets/img/tab-icons/tab-wallets.svg') no-repeat 50%
  50%;
$transact: url('../assets/img/tab-icons/tab-transact.svg') no-repeat 50% 50%;
$cards-active: url('../assets/img/tab-icons/tab-cards-active.svg') no-repeat 50%
  50%;
$cards-inactive: url('../assets/img/tab-icons/tab-cards.svg') no-repeat 50% 50%;
$settings-active: url('../assets/img/tab-icons/tab-settings-active.svg')
  no-repeat 50% 50%;
$settings-inactive: url('../assets/img/tab-icons/tab-settings.svg') no-repeat
  50% 50%;
$scan-active: url('../assets/img/tab-icons/tab-scan-active.svg') no-repeat 50%
  50%;
$scan-inactive: url('../assets/img/tab-icons/tab-scan.svg') no-repeat 50% 50%;
$copay-scan-active: url('../assets/img/scan-ico.svg') no-repeat 50% 50%;
$copay-scan-inactive: url('../assets/img/tab-icons/tab-copay-scan.svg')
  no-repeat 50% 50%;

ion-icon {
  &[class*='tab-'] {
    margin: 0 5px 0 0;
    vertical-align: middle;
    $sz: 20px;
    width: $sz;
    height: $sz;
  }

  &[class*='tab-home'] {
    background: $home-inactive;
    background-size: contain;

    .tab-button[aria-selected='true'] & {
      background: $home-active;
      background-size: contain;
    }
  }

  &[class*='tab-wallets'] {
    background: $wallets-inactive;
    background-size: contain;

    .tab-button[aria-selected='true'] & {
      background: $wallets-active;
      background-size: contain;
    }
  }

  &[class*='tab-transact'] {
    background: $transact;
    background-size: contain;
    width: 36px;
    height: 36px !important;

    .tab-button[aria-selected='true'] & {
      background: $transact;
      background-size: contain;
    }
  }

  &[class*='tab-scan'] {
    background: $scan-inactive;
    background-size: contain;
    width: 36px;
    height: 36px !important;

    .tab-button[aria-selected='true'] & {
      background: $scan-active;
      background-size: contain;
    }
  }

  &[class*='tab-copay-scan'] {
    background: $copay-scan-inactive;
    background-size: contain;
    margin-top: 0px;
    opacity: 0.2;

    .tab-button[aria-selected='true'] & {
      background: $copay-scan-active;
      background-size: contain;
      opacity: 1;
    }
  }

  &[class*='tab-cards'] {
    background: $cards-inactive;
    background-size: contain;

    .tab-button[aria-selected='true'] & {
      background: $cards-active;
      background-size: contain;
    }
  }

  &[class*='tab-settings'] {
    background: $settings-inactive;
    background-size: contain;

    .tab-button[aria-selected='true'] & {
      background: $settings-active;
      background-size: contain;
    }
  }
}

.line-divider {
  box-sizing: border-box;
  border: 0.5px solid rgba(155, 163, 174, 0.1);
  margin: 0px 25px;
}

.buy-crypto-currency-2 .alert-radio-group {
  button:nth-child(2) {
    border-bottom: 1px solid #dedede;
  }
}

.buy-crypto-currency-3 .alert-radio-group {
  button:nth-child(3) {
    border-bottom: 1px solid #dedede;
  }
}
.toast-bg {
  .toast-wrapper {
    background-color: color($colors, primary);
    color: white;
  }
  .toast-message {
    white-space: pre-line;
  }
}
.in-app-notification-modal {
  height: calc(env(safe-area-inset-top) + 100px);
}
