/*!
 * Copyright 2015 BookingSync SAS.
 * Licensed under MIT (https://github.com/BookingSync/bootstrap-bookingsync-sass/blob/master/LICENSE)
 */

@-webkit-keyframes btn_loading {
  0%, 100% {
    height: 6px;
    width: 6px;
    top: 13px;
    left: 13px;
    opacity: 0.6;
  }

  50% {
    height: 20px;
    width: 20px;
    top: 6px;
    left: 6px;
    opacity: 1;
  }
}

@keyframes btn_loading {
  0%, 100% {
    height: 6px;
    width: 6px;
    top: 13px;
    left: 13px;
    opacity: 0.6;
  }

  50% {
    height: 20px;
    width: 20px;
    top: 6px;
    left: 6px;
    opacity: 1;
  }
}

@-webkit-keyframes btn_sm_loading {
  0%, 100% {
    height: 4px;
    width: 4px;
    top: 12px;
    left: 12px;
    opacity: 0.6;
  }

  50% {
    height: 18px;
    width: 18px;
    top: 5px;
    left: 5px;
    opacity: 1;
  }
}

@keyframes btn_sm_loading {
  0%, 100% {
    height: 4px;
    width: 4px;
    top: 12px;
    left: 12px;
    opacity: 0.6;
  }

  50% {
    height: 18px;
    width: 18px;
    top: 5px;
    left: 5px;
    opacity: 1;
  }
}

.btn-loading {
  position: relative;
  padding-left: 32px;

  &:before,
  &:after {
    content: '';
    border: 2px solid #fff;
    border-radius: 500px;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 6px;
    top: 6px;
  }

  &:before {
    -webkit-animation: 1s linear 0.5s infinite btn_loading;
    animation: 1s linear 0.5s infinite btn_loading;
  }

  &:after {
    -webkit-animation: 1s linear 0s infinite btn_loading;
    animation: 1s linear 0s infinite btn_loading;
  }

  &.btn-sm {
    padding-left: 28px;

    &:before,
    &:after {
      width: 18px;
      height: 18px;
      left: 5px;
      top: 5px;
    }

    &:before,
    &:after {
      -webkit-animation-name: btn_sm_loading;
      animation-name: btn_sm_loading;
    }
  }
}

.btn-primary {
  &:focus,
  &.focus,
  &:hover {
    color: $btn-primary-active-color;
    background-color: $btn-primary-active-bg;
    border-color: $btn-primary-active-border;
  }

  &:active,
  &.active,
  &.btn-loading,
  .open > &.dropdown-toggle {
    color: $btn-primary-active-color;
    background-color: $btn-primary-active-bg;
    background-image: none;
    border-color: $btn-primary-active-border;
    @include box-shadow(none);

    &:hover,
    &:focus,
    &.focus {
      color: $btn-primary-active-color;
      background-color: $btn-primary-active-bg;
      border-color: $btn-primary-active-border;
    }
  }

  &.btn-loading {
    &:before,
    &:after {
      border-color: $btn-primary-loading;
    }
  }
}

.btn-default,
.btn-secondary {
  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);

  &:focus,
  &.focus,
  &:hover {
    color: $btn-secondary-active-color;
    background-color: $btn-secondary-active-bg;
    border-color: $btn-secondary-active-border;
  }

  &:active,
  &.active,
  &.btn-loading,
  .open > &.dropdown-toggle {
    color: $btn-secondary-active-color;
    background-color: $btn-secondary-active-bg;
    background-image: none;
    border-color: $btn-secondary-active-border;
    @include box-shadow(none);

    &:hover,
    &:focus,
    &.focus {
      color: $btn-secondary-active-color;
      background-color: $btn-secondary-active-bg;
      border-color: $btn-secondary-active-border;
    }
  }

  &.btn-loading {
    &:before,
    &:after {
      border-color: $btn-secondary-loading;
    }
  }
}

.btn-secondary-inverse {
  @include button-variant($btn-secondary-inverse-color, $btn-secondary-inverse-bg, $btn-secondary-inverse-border);
}

.btn-round {
  border-radius: 50%;

  &.btn-loading {
    height: 34px;
    padding-left: 20px;

    &.btn-sm {
      height: 30px;
      padding-left: 18px;
    }

    span {
      display: none;
    }
  }
}