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

// iOS Popover
// --------------------------------------------------

/// @prop - Width of the popover content
$popover-ios-width: 200px !default;

/// @prop - Min width of the popover content
$popover-ios-min-width: 0 !default;

/// @prop - Minimum height of the popover content
$popover-ios-min-height: 0 !default;

/// @prop - Maximum height of the popover content
$popover-ios-max-height: 90% !default;

/// @prop - Border radius of the popover content
$popover-ios-border-radius: 10px !default;

/// @prop - Text color of the popover content
$popover-ios-text-color: $text-ios-color !default;

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

/// @prop - Background of the popover arrow
$popover-ios-arrow-background: $popover-ios-background !default;

.popover-ios .popover-content {
  width: $popover-ios-width;
  min-width: $popover-ios-min-width;
  min-height: $popover-ios-min-height;
  max-height: $popover-ios-max-height;
  color: $popover-ios-text-color;
  background: $popover-ios-background;
  
  @include border-radius($popover-ios-border-radius);
}

// Popover Arrow
// -----------------------------------------

.popover-ios .popover-arrow {
  position: absolute;
  display: block;
  width: 20px;
  height: 10px;
  overflow: hidden;
}

.popover-ios .popover-arrow::after {
  position: absolute;
  z-index: $z-index-overlay-wrapper;
  width: 14px;
  height: 14px;
  content: "";
  background-color: $popover-ios-arrow-background;
  transform: rotate(45deg);
  
  @include position(3px, null, null, 3px);
  @include border-radius(3px);
}

.popover-ios.popover-bottom .popover-arrow {
  top: auto;
  bottom: -10px;
}

.popover-ios.popover-bottom .popover-arrow::after {
  top: -6px;
}

.popover-ios {
  .item-ios {
    @include padding-horizontal($item-ios-padding-start, null);
    
  }
  
  .item-ios[detail-push] .item-inner,
  button.item-ios:not([detail-none]) .item-inner,
  a.item-ios:not([detail-none]) .item-inner {
    @include background-position(end, $item-ios-padding-end - 2, center);
    
  }
}

// Animate transitioName = 'popover-ios'
// --------------------------------------------------

.popover-ios-enter-active,
.popove-ios-leave-active {
  opacity: 1;
  transition: opacity ease 0.1s;
}

.popover-ios-enter,
.popover-ios-leave-active {
  opacity: 0;
  transition: opacity ease 0.1s;
}