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

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

ion-content {
  @include position(0, null, null, 0);

  position: relative;
  display: block;

  width: 100%;
  height: 100%;

  contain: layout size style;
}

.ion-page > ion-content {
  position: absolute;
}

a {
  color: $link-color;
}


// Scrollable Content
// --------------------------------------------------

.scroll-content {
  @include position(0, 0, 0, 0);

  position: absolute;
  z-index: $z-index-scroll-content;
  display: block;

  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;

  contain: size style layout;
}

ion-content.js-scroll > .scroll-content {
  position: relative;

  min-height: 100%;

  overflow-x: initial;
  overflow-y: initial;
  -webkit-overflow-scrolling: auto;
  will-change: initial;
}

.disable-scroll .ion-page {
  pointer-events: none;
  touch-action: none;
}

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


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

.fixed-content {
  @include position(0, 0, 0, 0);

  position: absolute;
  display: block;
}

[ion-fixed] {
  position: absolute;

  z-index: $z-index-fixed-content;

  transform: translateZ(0);
}


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

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

@mixin content-padding($mode, $content-padding) {
  ion-app.#{$mode} [padding] {
    @include padding($content-padding);
  }

  ion-app.#{$mode} [padding-top] {
    @include padding($content-padding, null, null, null);
  }

  ion-app.#{$mode} [padding-left] {
    @include padding-horizontal($content-padding, null);
  }

  ion-app.#{$mode} [padding-right] {
    @include padding-horizontal(null, $content-padding);
  }

  ion-app.#{$mode} [padding-bottom] {
    @include padding(null, null, $content-padding, null);
  }

  ion-app.#{$mode} [padding-vertical] {
    @include padding($content-padding, null, $content-padding, null);
  }

  ion-app.#{$mode} [padding-horizontal] {
    @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],
ion-app [no-margin] .scroll-content {
  @include margin(0);
}

@mixin content-margin($mode, $content-margin) {
  ion-app.#{$mode} [margin],
  ion-app.#{$mode} [margin] .scroll-content {
    @include margin($content-margin);
  }

  ion-app.#{$mode} [margin-top],
  ion-app.#{$mode} [margin-top] .scroll-content {
    @include margin($content-margin, null, null, null);
  }

  ion-app.#{$mode} [margin-left],
  ion-app.#{$mode} [margin-left] .scroll-content {
    // scss-lint:disable PropertySpelling
    margin-left: $content-margin;
  }

  ion-app.#{$mode} [margin-start],
  ion-app.#{$mode} [margin-start] .scroll-content {
    @include margin-horizontal($content-margin, null);
  }

  ion-app.#{$mode} [margin-right],
  ion-app.#{$mode} [margin-right] .scroll-content {
    // scss-lint:disable PropertySpelling
    margin-right: $content-margin;
  }

  ion-app.#{$mode} [margin-end],
  ion-app.#{$mode} [margin-end] .scroll-content {
    @include margin-horizontal(null, $content-margin);
  }

  ion-app.#{$mode} [margin-bottom],
  ion-app.#{$mode} [margin-bottom] .scroll-content {
    @include margin(null, null, $content-margin, null);
  }

  ion-app.#{$mode} [margin-vertical],
  ion-app.#{$mode} [margin-vertical] .scroll-content {
    @include margin($content-margin, null, $content-margin, null);
  }

  ion-app.#{$mode} [margin-horizontal],
  ion-app.#{$mode} [margin-horizontal] .scroll-content {
    @include margin-horizontal($content-margin);
  }
}