// CONFIG
// ========================================================================
@import 'vars';
$spinnerSize: 32px;

// z-index
$ladda-spinner-z-index: $zindex-base + 1;
$ladda-label-z-index: $ladda-spinner-z-index + 1;

// MIXINS
// ========================================================================

@mixin buttonColor($name, $color) {
  &[data-color=#{$name}] {
    background: $color;

    &:hover {
      background-color: lighten($color, 5%);
    }
  }
}

// BUTTON BASE
// ========================================================================

.ladda-button {
  position: relative;
}

// Spinner animation
.ladda-button .ladda-spinner {
  position: absolute;
  top: 50%;
  z-index: $ladda-spinner-z-index;
  display: inline-block;
  width: $spinnerSize;
  height: $spinnerSize;
  margin-top: 0;
  pointer-events: none;
  opacity: 0;//2
}

// Button label
.ladda-button .ladda-label {
  position: relative;
  z-index: $ladda-label-z-index;//3
}

// Progress bar
.ladda-button .ladda-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  visibility: hidden;
  background: rgba(0, 0, 0, .2);
  opacity: 0;
  transition: .1s linear all;
}

.ladda-button[data-loading] .ladda-progress {
  visibility: visible;
  opacity: 1;
}

// EASING
// ========================================================================

.ladda-button, .ladda-button .ladda-spinner, .ladda-button .ladda-label {
  transition: .3s cubic-bezier(.175, .885, .320, 1.275) all;
}

.ladda-button[data-style=zoom-in], .ladda-button[data-style=zoom-in] .ladda-spinner, .ladda-button[data-style=zoom-in] .ladda-label, .ladda-button[data-style=zoom-out], .ladda-button[data-style=zoom-out] .ladda-spinner, .ladda-button[data-style=zoom-out] .ladda-label {
  transition: .3s ease all;
}

// EXPAND LEFT
// ========================================================================

.ladda-button[data-style=expand-right] {
  .ladda-spinner {
    right: $spinnerSize/-2 + 10;
  }

  &[data-size="s"] .ladda-spinner, &[data-size="xs"] .ladda-spinner, &.btn-xs .ladda-spinner {
    right: $spinnerSize/-2 + 4;
  }

  &[data-loading] {
    padding-right: 45px;

    .ladda-spinner {
      opacity: 1;
    }

    &[data-size="s"], &[data-size="xs"], .btn-xs {
      padding-right: 30px;
    }
  }
}

// EXPAND RIGHT
// ========================================================================

.ladda-button[data-style=expand-left] {
  .ladda-spinner {
    left: $spinnerSize / 2 + 10;
  }

  &[data-size="s"] .ladda-spinner, &[data-size="xs"] .ladda-spinner, &.btn-xs .ladda-spinner {
    left: 15px;
  }

  &[data-loading] {
    padding-left: 45px;

    .ladda-spinner {
      opacity: 1;
    }

    &[data-size="s"], &[data-size="xs"], &.btn-xs {
      padding-left: 30px;
    }
  }
}

// EXPAND UP
// ========================================================================

.ladda-button[data-style=expand-up] {
  overflow: hidden;

  .ladda-spinner {
    top: -$spinnerSize;
    left: 50%;
    margin-left: 0;
  }

  &[data-loading] {
    padding-top: 30px;

    .ladda-spinner {
      top: ($spinnerSize/ 2);
      margin-top: 0;
      opacity: 1;
    }

    &[data-size="s"], &[data-size="xs"], &.btn-xs {
      padding-top: 32px;

      .ladda-spinner {
        top: 4px;
      }
    }
  }
}

// EXPAND DOWN
// ========================================================================

.ladda-button[data-style=expand-down] {
  overflow: hidden;

  .ladda-spinner {
    top: 44px;
    left: 50%;
    margin-left: 0;
  }

  &[data-size="s"] .ladda-spinner, &[data-size="xs"] .ladda-spinner, &.btn-xs .ladda-spinner {
    top: 30px;
  }

  &[data-loading] {
    padding-bottom: 30px;

    .ladda-spinner {
      opacity: 1;
    }

    &[data-size="s"], &[data-size="xs"], &.btn-xs {
      padding-bottom: 23px;
    }
  }
}

// SLIDE LEFT
// ========================================================================

.ladda-button[data-style=slide-left] {
  overflow: hidden;

  .ladda-label {
    position: relative;
  }

  .ladda-spinner {
    left: 100%;
    margin-left: 0;
  }

  &[data-loading] {
    .ladda-label {
      left: -100%;
      opacity: 0;
    }

    .ladda-spinner {
      left: 50%;
      opacity: 1;
    }
  }
}

// SLIDE RIGHT
// ========================================================================

.ladda-button[data-style=slide-right] {
  overflow: hidden;

  .ladda-label {
    position: relative;
  }

  .ladda-spinner {
    right: 100%;
    left: $spinnerSize / 2;
    margin-left: 0;
  }

  &[data-loading] {
    .ladda-label {
      left: 100%;
      opacity: 0;
    }

    .ladda-spinner {
      left: 50%;
      opacity: 1;
    }
  }
}

// SLIDE UP
// ========================================================================

.ladda-button[data-style=slide-up] {
  overflow: hidden;

  .ladda-label {
    position: relative;
  }

  .ladda-spinner {
    left: 50%;
    margin-top: 1em;
    margin-left: 0;
  }

  &[data-loading] {
    .ladda-label {
      top: -1em;
      opacity: 0;
    }

    .ladda-spinner {
      margin-top: 0;
      opacity: 1;
    }
  }
}

// SLIDE DOWN
// ========================================================================

.ladda-button[data-style=slide-down] {
  overflow: hidden;

  .ladda-label {
    position: relative;
  }

  .ladda-spinner {
    left: 50%;
    margin-top: -2em;
    margin-left: 0;
  }

  &[data-loading] {
    .ladda-label {
      top: 1em;
      opacity: 0;
    }

    .ladda-spinner {
      margin-top: 0;
      opacity: 1;
    }
  }
}

// ZOOM-OUT
// ========================================================================

.ladda-button[data-style=zoom-out] {
  overflow: hidden;
}

.ladda-button[data-style=zoom-out] .ladda-spinner {

  @include transform(scale( 2.5));
  left: 50%;
  margin-left: $spinnerSize;
}

.ladda-button[data-style=zoom-out] .ladda-label {
  position: relative;
  display: inline-block;
}

.ladda-button[data-style=zoom-out][data-loading] .ladda-label {

  @include transform(scale( 0.5));
  opacity: 0;
}

.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {

  @include transform(none);
  margin-left: 0;
  opacity: 1;
}

// ZOOM-IN
// ========================================================================

.ladda-button[data-style=zoom-in] {
  overflow: hidden;
}

.ladda-button[data-style=zoom-in] .ladda-spinner {

  @include transform(scale( 0.2));
  left: 50%;
  margin-left: $spinnerSize/-2;
}

.ladda-button[data-style=zoom-in] .ladda-label {
  position: relative;
  display: inline-block;
}

.ladda-button[data-style=zoom-in][data-loading] .ladda-label {

  @include transform(scale( 2.2));
  opacity: 0;
}

.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {

  @include transform(none);
  margin-left: 0;
  opacity: 1;
}

// CONTRACT
// ========================================================================

.ladda-button[data-style=contract] {
  width: 100px;
  overflow: hidden;
}

.ladda-button[data-style=contract] .ladda-spinner {
  left: 50%;
  margin-left: 0;
}

.ladda-button[data-style=contract][data-loading] {
  width: 52px;
  border-radius: 50%;
}

.ladda-button[data-style=contract][data-loading] .ladda-label {
  opacity: 0;
}

.ladda-button[data-style=contract][data-loading] .ladda-spinner {
  opacity: 1;
}

// OVERLAY
// ========================================================================

.ladda-button[data-style=contract-overlay] {
  width: 100px;
  overflow: hidden;
  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0);
}

.ladda-button[data-style=contract-overlay] .ladda-spinner {
  left: 50%;
  margin-left: 0;
}

.ladda-button[data-style=contract-overlay][data-loading] {
  width: 52px;
  border-radius: 50%;

  /*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/
  box-shadow: 0 0 0 3000px rgba(0, 0, 0, .8);
}

.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
  opacity: 0;
}

.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
  opacity: 1;
}