@import "../../globals.core";

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

$refresher-height:             60px !default;

$refresher-icon-color:         #000 !default;
$refresher-icon-font-size:     30px !default;

$refresher-text-color:         #000 !default;
$refresher-text-font-size:     16px !default;

$refresher-border-color:       #ddd !default;


ion-refresher {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $z-index-refresher;
  display: none;

  width: 100%;
  height: $refresher-height;

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

.has-refresher > scroll-content {
  // 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
  margin-top: -1px;

  border-top: 1px solid $refresher-border-color;
  transition: all 320ms cubic-bezier(.36, .66, .04, 1);
}


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

ion-refresher-content {
  display: flex;

  flex-direction: column;
  justify-content: center;

  height: 100%;
}

.refresher-pulling,
.refresher-refreshing {
  display: none;

  width: 100%;
}

.refresher-pulling-icon,
.refresher-refreshing-icon {
  font-size: $refresher-icon-font-size;
  text-align: center;
  color: $refresher-icon-color;
  transform-origin: center;
  transition: 200ms;
}

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


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

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

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

  .refresher-pulling-icon {
    transform: rotate(180deg);
  }
}

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

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

  .refresher-pulling-icon {
    transform: scale(0);
  }
}

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

  .refresher-refreshing-icon {
    transform: scale(0);
  }
}
