%button {
  padding: $button-padding;
  border-radius: $button-radius;
  display: inline-block;
}


.btn {
  @extend %button;
  background: $button-bg-color;
  color: set-color($button-bg-color);
  border: create-border($button-border-color);
  text-align: center;
  &:hover {
    background-color: darken($button-bg-color, 10%);
  }
  &:last-child {
    margin-right: 0;
  }
  &:focus {
    outline: $button-focus-outline;
  }
  &.flat {
    border: none;
  }
  &-outline{
    border: 1px solid $default-border-color;
  }
}

.btn {
  margin-right: 1rem;
}

.btn-group {
  display: inline-flex;
  vertical-align: middle;

  .btn {
    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      margin-right: 0;
      border-right: 0;
    }

    &:not(:first-child) {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
  }
}

.btn-icon {
  padding: 0.5rem;
}

@for $i from 1 through 6 {
  .btn-size-#{$i} {
    font-size: 0.5rem+ ($i * 0.25rem);
    padding: 0.5em 1em;
  }
}
a.btn {
  text-decoration: none;
}