@mixin button-colors($bg-color, $font-color) {
  color: $font-color;
  background-color: $bg-color;
  border-color: $bg-color;

  &.lst-btn--link {
    border: none;
    background: none;
    color: $bg-color;

    &:hover {
      background: none;
      color: lighten($bg-color, 5%);
      box-shadow: none;
      transform: none;
    }
  }

  &.lst-btn--outline {
    background: none;
    color: $bg-color;

    a {
      color: $bg-color;
    }
  }

  &.selected {
    background: $bg-color;
    color: $font-color;
  }

  &:hover {
    background: lighten($bg-color, 5%);
    color: $font-color;
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);

    a {
      color: $font-color;
    }
  }

  a {
    text-decoration: none;
  }
}

.lst-btn {
  padding: 0.5rem 1em;
  margin: $margin/2;
  border-radius: 5px;
  border: 1px solid;
  cursor: pointer;
  transition: color $fast-transition-time ease,
  background $fast-transition-time ease,
  box-shadow $fast-transition-time ease,
  transform $normal-transition-time ease;
  outline: none;
  user-select: none;
  @include button-colors($black-light-20, $white);

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &--success {
    @include button-colors($green, $white);
  }

  &--warning {
    @include button-colors($yellow, $white);
  }

  &--danger {
    @include button-colors($red, $white);
  }

  &--info {
    @include button-colors($blue, $white);
  }

  &--no-margin {
    margin: 0;
  }

  &--no-style, &--no-style *, &--no-style:hover {
    margin: inherit;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    display: inherit;
    font-weight: inherit;
    font-size: inherit;
  }

  &--no-animation:hover {
    transform: none;
    box-shadow: none;
  }

  &--mini {
      margin: $margin/4;
      padding: 6px 12px;
      font-size: 12px;
  }

  .lst-icons {
    position: relative;
    line-height: 0;
    top: 4px;
    font-size: 16px;
    margin-right: 8px;
  }
}

a.lst-btn {
    display: inline-block;
    text-decoration: none;
    // font-weight: 300;
}

.lst-button-group {
    .lst-btn {
        border-radius: 0px;
        border-left-width: 0px;

        &:first-child {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-left-width: 1px;
        }

        &:last-child {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    }
}
