@import "../../../themes/ionic.globals.ios";

// iOS Content
// --------------------------------------------------

/// @prop - Background color of the outer content
$content-ios-outer-background: #efeff4 !default;

/// @prop - Background color of the content when making transition
$content-ios-transition-background: #000 !default;

.content-ios {
  color: $text-ios-color;
  background-color: $background-ios-color;
}

.content-ios.outer-content {
  background: $content-ios-outer-background;
}

.content-ios hr {
  height: $hairlines-width;
  background-color: rgba(0, 0, 0, 0.12);
}

.ios .ion-page.show-page ~ .nav-decor {
  
  // when ios pages transition, the leaving page grays out
  // this is the black square behind all pages so they gray out
  position: absolute;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: $content-ios-transition-background;
  
  @include position(0, null, null, 0);
}

// iOS Content Padding
// --------------------------------------------------

@include content-padding("ios", $content-ios-padding);

// iOS Content Margin
// --------------------------------------------------

@include content-margin("ios", $content-ios-margin);