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

// iOS Toast
// --------------------------------------------------

/// @prop - Background of the toast wrapper
$toast-ios-background:                            rgba(0, 0, 0, .9) !default;

/// @prop - Border radius of the toast wrapper
$toast-ios-border-radius:                         .65rem !default;

/// @prop - Color of the toast title
$toast-ios-title-color:                           #fff !default;

/// @prop - Font size of the toast title
$toast-ios-title-font-size:                       1.4rem !default;

// deprecated
$toast-ios-title-padding:                         null !default;

/// @prop - Padding top of the toast title
$toast-ios-title-padding-top:                     1.5rem !default;

/// @prop - Padding end of the toast title
$toast-ios-title-padding-end:                     $toast-ios-title-padding-top !default;

/// @prop - Padding bottom of the toast title
$toast-ios-title-padding-bottom:                  $toast-ios-title-padding-top !default;

/// @prop - Padding start of the toast title
$toast-ios-title-padding-start:                   $toast-ios-title-padding-end !default;


.toast-ios .toast-wrapper {
  @include position-horizontal(10px, 10px);
  @include margin(auto);
  @include border-radius($toast-ios-border-radius);

  position: absolute;

  z-index: $z-index-overlay-wrapper;
  display: block;

  max-width: $toast-max-width;

  background: $toast-ios-background;
}

.toast-ios .toast-wrapper.toast-top {
  @include transform(translate3d(0, -100%, 0));
  @include margin(constant(safe-area-inset-top), auto, auto, auto);
  @include margin(env(safe-area-inset-top), auto, auto, auto);

  top: 0;
}

.toast-ios .toast-wrapper.toast-bottom {
  @include transform(translate3d(0, 100%, 0));

  @include margin(auto, auto, constant(safe-area-inset-bottom), auto);
  @include margin(auto, auto, env(safe-area-inset-bottom), auto);
  bottom: 0;
}

.toast-ios .toast-wrapper.toast-middle {
  opacity: .01;
}

.toast-ios .toast-message {
  font-size: $toast-ios-title-font-size;

  color: $toast-ios-title-color;

  @include deprecated-variable(padding, $toast-ios-title-padding) {
    @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start);
  }
}