.btn {
  font-size: 11px;
  line-height: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: @letter-spacing-wider;
  padding: 11px 16px;
  border-radius: @border-radius;

  .svg-inline--fa {
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    bottom: 1px;

    &.icon-addon-right {
      margin-right: 12px;
    }

    &.icon-addon-left {
      margin-left: 12px;
    }
  }

  &.btn-link .svg-inline--fa {
    &.icon-addon-right {
      margin-right: 10px;
    }

    &.icon-addon-left {
      margin-left: 10px;
    }
  }

  &.btn-sm {
    line-height: 18px;
    padding: 7px 12px;

    .svg-inline--fa {
      font-size: 16px;
    }
  }

  &.btn-default {
    color: @text-color-gray;
    border-color: @gray-light;
    background: transparent;
    padding: 10px 16px;

    &:hover,
    &:focus,
    &:active {
      color: @text-color;
      border-color: darken(@gray-light, 20%);
      background: transparent;
    }

    &.btn-sm {
      padding: 6px 12px;
    }
  }

  &:not(.btn-default) {
    border: none;
  }

  &.btn-link {
    color: @text-color;
  }

  &.btn-link-inline {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    padding: 0;
    border: none;
    color: @link-color;
    display: inline;
    vertical-align: inherit;
    text-align: start;
    white-space: normal;
    text-transform: inherit;

    &:hover,
    &:focus {
      color: @link-hover-color;
      text-decoration: underline;
    }
  }
}