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

// Refresher
// --------------------------------------------------

/// @prop - Height of the refresher
$refresher-height: 70px !default;

/// @prop - Color of the refresher icon
$refresher-icon-color: #000 !default;

/// @prop - Font size of the refresher icon
$refresher-icon-font-size: 30px !default;

/// @prop - Text color of the refresher content
$refresher-text-color: #000 !default;

/// @prop - Font size of the refresher content
$refresher-text-font-size: 16px !default;

/// @prop - Border color of the refresher
$refresher-border-color: #ddd !default;

.ion-refresher {
  position: absolute;
  z-index: $z-index-refresher;
  display: none;
  width: 100%;
  height: $refresher-height;

  @include position(0, null, null, 0);

  &.refresher-active {
    display: block;
  }
}

.has-refresher > .scroll-content {
  border-top: 1px solid $refresher-border-color;
  transition: transform 320ms cubic-bezier(0.36, 0.66, 0.04, 1);
  // when the refresher is let go or has completed
  // this transition is what is used to put the
  // scroll content back into it's original location
  @include margin(-1px, null, null, null);
}

// Refresher Content
// --------------------------------------------------

.ion-refresher-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

.refresher-pulling,
.refresher-refreshing {
  display: none;
  width: 100%;
}

.refresher-pulling-icon,
.refresher-refreshing-icon {
  font-size: $refresher-icon-font-size;
  color: $refresher-icon-color;
  transition: 200ms;

  @include text-align(center);
  @include transform-origin(center);
}

.refresher-pulling-text,
.refresher-refreshing-text {
  font-size: $refresher-text-font-size;
  color: $refresher-text-color;

  @include text-align(center);
}

.refresher-refreshing .spinner-ios line,
.refresher-refreshing .spinner-ios-small line,
.refresher-refreshing .spinner-crescent circle {
  stroke: $refresher-icon-color;
}

.refresher-refreshing .spinner-bubbles circle,
.refresher-refreshing .spinner-circles circle,
.refresher-refreshing .spinner-dots circle {
  fill: $refresher-icon-color;
}

// Refresher Content States
// --------------------------------------------------

.ion-refresher[state=pulling] .ion-refresher-content {
  .refresher-pulling {
    display: block;
  }
}

.ion-refresher[state=ready] .ion-refresher-content {
  .refresher-pulling {
    display: block;
  }
  
  .refresher-pulling-icon {
    transform: rotate(180deg);
  }
}

.ion-refresher[state=refreshing] .ion-refresher-content {
  .refresher-refreshing {
    display: block;
  }
}

.ion-refresher[state=cancelling] .ion-refresher-content {
  .refresher-pulling {
    display: block;
  }
  
  .refresher-pulling-icon {
    transform: scale(0);
  }
}

.ion-refresher[state=completing] .ion-refresher-content {
  .refresher-refreshing {
    display: block;
  }
  
  .refresher-refreshing-icon {
    transform: scale(0);
  }
}