@keyframes animate-arrow-right {
  0% {
    transform: translate(0, 0) scale(1, 1);
    transform: translate3d(0, 0, 0) scale(1, 1);
    opacity: 1;
  }

  50% {
    transform: translate(10px, 0) scale(1.3, 1);
    transform: translate3d(10px, 0, 0) scale(1.3, 1);
    opacity: 0;
  }

  51% {
    transform: translate(-10px, 0) scale(1.3, 1);
    transform: translate3d(-10px, 0, 0) scale(1.3, 1);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0) scale(1, 1);
    transform: translate3d(0, 0, 0) scale(1, 1);
    opacity: 1;
  }
}

@mixin button-animation($color) {
  position: relative;
  transition: color 0.3s;
  outline: none;
  overflow: hidden;
  z-index: 0; // for animation

  // animation
  &:not([disabled]):after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 530px;
    transform: translate(-50%,-50%) rotate(45deg);
    transform: translate3d(-50%,-50%, 0) rotate(45deg);
    transition: width 0.3s, opacity 0.3s;
    background: $color;
    content: '';
    opacity: 0;
    z-index: -1;
    backface-visibility: hidden;
  }

  &:hover,
  &:active,
  &:focus {
    &:after {
      width: 100%;
      opacity: 1;
    }
  }
}

@mixin btn-split-icon($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  @include button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius);

  & .btn-font-icon {
    width: $line-height + $padding-vertical + $padding-vertical;
    margin-right: -$padding-horizontal;
  }

  & .btn-icon {
    display: block;
    align-self: center;
    width: $line-height + $padding-vertical + $padding-vertical;
    height: 1em;
    margin-top: 5px;
    margin-right: -$padding-horizontal;
    float: right;
  }

  &.btn-split-icon {
    display: inline-flex;

    & .btn-font-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: $line-height + 2*$padding-vertical;
      height: $line-height + 2*$padding-vertical;
      margin-top: (-$padding-vertical - 0.06667rem);
      margin-right: -$padding-horizontal;
      margin-bottom: (-$padding-vertical - 0.06667rem);
      margin-left: 20px;
      border-left-width: 1px;
      border-left-style: solid;
    }

    & .btn-icon {
      display: block;
      align-self: center;
      width: $line-height + 2*$padding-vertical;
      height: $line-height + 2*$padding-vertical;
      margin-top: (-$padding-vertical - 0.06667rem);
      margin-right: -$padding-horizontal;
      margin-bottom: (-$padding-vertical - 0.06667rem);
      margin-left: 20px;
      padding-top: $padding-vertical + ($line-height - $font-size)/2;
      padding-right: $padding-vertical + ($line-height - $font-size)/2;
      padding-bottom: $padding-vertical + ($line-height - $font-size)/2;
      padding-left: $padding-vertical + ($line-height - $font-size)/2 -0.06667rem;
      float: unset;
      border-left-width: 1px;
      border-left-style: solid;
    }
  }
}

@mixin button-primary($main, $secondary, $contrast) {
  transition: background-position $duration-fast $motion-easein;
  border-bottom-color: $secondary;
  background: $color-button-primary;
  // background-image: linear-gradient(to bottom, $main 50%, $secondary 50%);
  // background-size: 100% 200%;

  color: $contrast;

  // &:focus,
  // &.focus,
  // &:hover {
  //   transition: background-position $duration-fast $motion-easeout;
  //   border-color: $secondary;
  //   background-position: 0 100%;
  //   color: $contrast;
  // }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    border-color: $secondary;
    background-position: 0 100%;
    color: $contrast;

    &:hover,
    &:focus,
    &.focus {
      border-color: darken($secondary, 8%);
      background-color: darken($secondary, 8%);
      color: $contrast;
    }
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    border-color: $color-light-grey;
    background: $color-mercury;
    color: $color-light-grey;

    cursor: $cursor-disabled;

    &:hover,
    &:focus,
    &.focus {
      border-color: $color-light-grey;
      background: $color-mercury;
      color: $color-light-grey;

      cursor: $cursor-disabled;
    }
  }

  .badge {
    background-color: $contrast;
    color: $main;
  }

  &:hover,
  &:focus,
  &.focus {
    .badge {
      background-color: $contrast;
      color: $secondary;
    }

    &.btn-split-icon {
      & .btn-font-icon, & .btn-icon {
        border-left-color: transparentize($color-white, 0.8);
      }
    }
  }

  &.btn-split-icon, & .btn-icon {
    border-left-color: transparentize($color-white, 0.8);

    & .btn-font-icon {
      border-left-color: transparentize($color-white, 0.8);
    }

  }
}

@mixin button-color($main, $secondary, $contrast) {
  border-color: $main;
  background: $contrast;
  color: $main;

  &:hover,
  &:focus,
  &.focus {
    border-color: $secondary;
    color: $contrast;

    .badge {
      background-color: $secondary;
      color: $contrast;
    }
  }

  &:active,
  &.active {
    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
    border-color: darken($secondary, 8%);
    outline: 0;
    color: darken($secondary, 8%);

    .badge {
      background-color: darken($secondary, 8%);
      color: $contrast;
    }
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    border-color: $color-light-grey;
    background: $color-mercury;
    color: $color-light-grey;

    cursor: $cursor-disabled;

    &:hover,
    &:focus,
    &.focus {
      border-color: $color-light-grey;
      background: $color-mercury;
      color: $color-light-grey;

      cursor: $cursor-disabled;
    }
  }

  .badge {
    background-color: $main;
    color: $contrast;
  }

  &.btn-split-icon {
    & .btn-font-icon {
      border-left-color: $main;
    }
  }
}