@import "../../../themes/ionic.globals";
@import "../../../themes/ionic.theme.default";

// Content
// --------------------------------------------------

.ion-content {
  position: relative;
  display: block;
  width: 100%;
  contain: layout style;
  
  @include position(0, null, null, 0);
  
  &::before {
    display: table;
    content: " ";
  }
}

a {
  color: $link-color;
}

// Scrollable Content
// --------------------------------------------------
.scroll-content {
  //position: absolute;
  position: relative;
  z-index: $z-index-scroll-content;
  display: block;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  contain: style layout;
  
  &::after,
  &::before {
    display: table;
    content: " ";
  }
  
  @include position(-1px, 0, 0, 0);
}

.scroll-content.disable-scroll {
  overflow: hidden !important;
}

.ion-content.has-refresher > .scroll-content {
  background-color: inherit;
}

// Fixed Content (ion-fixed and ion-fab)
// --------------------------------------------------

.fixed-content {
  position: fixed;
  left: 0;
  z-index: $z-index-fixed-content;
  display: block;
  width: 100%;
  height: 0;
  
  [fixed],
  [refresher],
  [fixed-top],
  [fixed-bottom] {
    position: absolute;
    z-index: $z-index-fixed-content + 10;
  }
  
  [fixed],
  [refresher],
  [fixed-top] {
    top: 0;
  }
  
  [fixed-bottom] {
    bottom: 0;
  }
}

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

.ion-app [no-padding]:not(.ion-content),
.ion-app [no-padding] .scroll-content {
  @include padding(0);
}

@mixin content-padding($mode, $content-padding) {
  .ion-app.#{$mode} [padding]:not(.ion-content) {
    @include padding($content-padding);
  }
  
  .ion-app.#{$mode} [padding-top]:not(.ion-content) {
    @include padding($content-padding, null, null, null);
  }
  
  .ion-app.#{$mode} [padding-left]:not(.ion-content) {
    @include padding-horizontal($content-padding, null);
  }
  
  .ion-app.#{$mode} [padding-right]:not(.ion-content) {
    @include padding-horizontal(null, $content-padding);
  }
  
  .ion-app.#{$mode} [padding-bottom]:not(.ion-content) {
    @include padding(null, null, $content-padding, null);
  }
  
  .ion-app.#{$mode} [padding-vertical]:not(.ion-content) {
    @include padding($content-padding, null, $content-padding, null);
  }
  
  .ion-app.#{$mode} [padding-horizontal]:not(.ion-content) {
    @include padding-horizontal($content-padding);
  }
  
  // Scroll content should use safe-area-padding
  .ion-app.#{$mode} [padding] .scroll-content {
    @include safe-area-padding($content-padding);
  }
  
  .ion-app.#{$mode} [padding-top] .scroll-content {
    @include safe-area-padding($content-padding, null, null, null);
  }
  
  .ion-app.#{$mode} [padding-left] .scroll-content {
    @include safe-area-padding-horizontal($content-padding, null);
  }
  
  .ion-app.#{$mode} [padding-right] .scroll-content {
    @include safe-area-padding-horizontal(null, $content-padding);
  }
  
  .ion-app.#{$mode} [padding-bottom] .scroll-content {
    @include safe-area-padding(null, null, $content-padding, null);
  }
  
  .ion-app.#{$mode} [padding-vertical] .scroll-content {
    @include safe-area-padding($content-padding, null, $content-padding, null);
  }
  
  .ion-app.#{$mode} [padding-horizontal] .scroll-content {
    @include safe-area-padding-horizontal($content-padding);
  }
}

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

.ion-app [no-margin]:not(.ion-content),
.ion-app [no-margin] .scroll-content {
  @include margin(0);
}

@mixin content-margin($mode, $content-margin) {
  .ion-app.#{$mode} [margin]:not(.ion-content),
  .ion-app.#{$mode} [margin] .scroll-content {
    @include margin($content-margin);
  }
  
  .ion-app.#{$mode} [margin-top]:not(.ion-content),
  .ion-app.#{$mode} [margin-top] .scroll-content {
    @include margin($content-margin, null, null, null);
  }
  
  .ion-app.#{$mode} [margin-left]:not(.ion-content),
  .ion-app.#{$mode} [margin-left] .scroll-content {
    // scss-lint:disable PropertySpelling
    margin-left: $content-margin;
  }
  
  .ion-app.#{$mode} [margin-start]:not(.ion-content),
  .ion-app.#{$mode} [margin-start] .scroll-content {
    @include margin-horizontal($content-margin, null);
  }
  
  .ion-app.#{$mode} [margin-right]:not(.ion-content),
  .ion-app.#{$mode} [margin-right] .scroll-content {
    // scss-lint:disable PropertySpelling
    margin-right: $content-margin;
  }
  
  .ion-app.#{$mode} [margin-end]:not(.ion-content),
  .ion-app.#{$mode} [margin-end] .scroll-content {
    @include margin-horizontal(null, $content-margin);
  }
  
  .ion-app.#{$mode} [margin-bottom]:not(.ion-content),
  .ion-app.#{$mode} [margin-bottom] .scroll-content {
    @include margin(null, null, $content-margin, null);
  }
  
  .ion-app.#{$mode} [margin-vertical]:not(.ion-content),
  .ion-app.#{$mode} [margin-vertical] .scroll-content {
    @include margin($content-margin, null, $content-margin, null);
  }
  
  .ion-app.#{$mode} [margin-horizontal]:not(.ion-content),
  .ion-app.#{$mode} [margin-horizontal] .scroll-content {
    @include margin-horizontal($content-margin);
  }
}