@import "../globals.core";

// Cordova Status Bar Padding iOS Platform
// --------------------------------------------------------------------------------

// The height of the ios statusbar
$cordova-ios-statusbar-padding:                     20px   !default;

// The breakpoint when a modal becomes inset
$cordova-statusbar-padding-modal-max-width:         767px !default;


// The first-child should get modified padding-top for the status bar
// --------------------------------------------------------------------------------

@mixin toolbar-statusbar-padding($toolbar-height, $content-padding) {

  > .toolbar.statusbar-padding:first-child {
    padding-top: $cordova-ios-statusbar-padding;

    height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
    min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
  }

  > ion-content.statusbar-padding:first-child scroll-content {
    padding-top: $cordova-ios-statusbar-padding;
  }

  > ion-content.statusbar-padding:first-child[padding] scroll-content,
  > ion-content.statusbar-padding:first-child[padding-top] scroll-content {
    padding-top: calc(#{$content-padding} + #{$cordova-ios-statusbar-padding});
  }

}

// The navbar section should get modified height and padding-top for the status bar
// --------------------------------------------------------------------------------

@mixin navbar-section-statusbar-padding($toolbar-height) {

  ion-navbar-section.statusbar-padding {
    height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
    min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
  }

  ion-navbar-section.statusbar-padding > .toolbar {
    padding-top: $cordova-ios-statusbar-padding;

    height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
    min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
  }

}


// iOS is the only mode that uses these mixins and they should be removed with #5036
// --------------------------------------------------------------------------------

@mixin toolbar-title-statusbar-padding($toolbar-height, $content-padding) {

  > .toolbar.statusbar-padding:first-child ion-segment,
  > .toolbar.statusbar-padding:first-child ion-title {
    padding-top: $cordova-ios-statusbar-padding;

    height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
    min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
  }

}

@mixin navbar-section-title-statusbar-padding($toolbar-height) {

  ion-navbar-section.statusbar-padding > .toolbar ion-segment,
  ion-navbar-section.statusbar-padding > .toolbar ion-title {
    padding-top: $cordova-ios-statusbar-padding;

    height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
    min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
  }

}