//
// Buttons
// --------------------------------------------------


.btn {
  font-weight: bold;
  border-radius: 4px;
  border: none;
  padding-left: 15px;
  padding-right: 15px;
  @include transition(background-color ease .2s);

  &:active,
  &.active {
    box-shadow: none;
    outline: none;
  }

  &:focus {
    outline: none;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    color: $gray-light;
    background-color: rgba($gray-lighter, .3);
    box-shadow: inset 0 0 0 1px $gray-light;
    opacity: 1;
  }

  .icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 4px;
    margin-left: -2px;
  }

  .caret {
    position: relative;
    top: -1px;
    width: 7px;
    height: 10px;
    display: inline-block;
    border: none;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAABGdBTUEAALGPC/xhBQAAAHhJREFUGBmdj8EJgDAMRevZXcQ1Cg5ScBFxDXUVwTkKHj3oVajvlxT0auHl85M2SZ2zk1JqYZOWXFYSHVxwmHal0JO4YYLaVL53hAgDVLotNR/z63+BFjuMavdqK79rRgAtMIMWWsyHPA7j4QR9Reo/e5BoYJWWwgNOyZST/q/QUQAAAABJRU5ErkJggg==') no-repeat;

    @include retina {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAABGdBTUEAALGPC/xhBQAAASZJREFUOBHdkk1qAkEQRh1/NuJaBK/gwlu48RRuvIF7swlkmRsEkq1ZBInkChG8gJtALhACSkjI+L6xv9jTTi5gwbOqq17pjHStVhF5njfgNtCoUM5byB14AofqzrkZdRD6sPFGlNXrR+qpZDCE90jeUguHZsPTBhWNMXzaIL9CN6DaIWdcLFNM4ccT8jP8vZNqWIFD7lS/tneHfAfN0uMcn6gVZlb3WnwEPcI8XUjPOFfBXaSzizzzskv4gmvI/ntJzYIjd6l/dQeOe4pWuqwePFgi77Q4ge+o+UKdXgD1HHInxZdTjODDE/IafOVUO+SMSk9EYwBvNsjpJddsUFrygUEP4kvNsQj1evYqM0IbFoV+/FDdTuXKvx+xjngT5FmWZb/p4gHik/DofGR3LQAAAABJRU5ErkJggg==') no-repeat;
      background-size: 7px 10px;
    }
  }
}

.btn-default {
  box-shadow: inset 0 0 0 1px rgba($btn-default-color, .6);

  &:hover {
    background: #FAF7FD;
    box-shadow: inset 0 0 0 1px rgba($btn-default-color, .6);
    color: $btn-default-color;
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background: #EEE7F6 !important;
    box-shadow: inset 0 0 0 1px rgba($btn-default-color, .8);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    color: $gray-light;
    background-color: rgba($gray-lighter, .3);
    box-shadow: inset 0 0 0 1px $gray-light;

    &:hover {
      color: $gray-light;
      background-color: rgba($gray-lighter, .3);
      box-shadow: inset 0 0 0 1px $gray-light;
    }
  }

  .caret {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAABGdBTUEAALGPC/xhBQAAANRJREFUGBmdTj1OAmEUnPnYE3gG7QzhBDZWJhZ0sEBAK0ikB3ZpdxMTSgqgYZfoqom9B/ACxjtoR2hN0G/8vg0nYIr3M2/evEccELXWNYhLUP20uP3wtPFh2s6vYfku4Mznsnd8JWpmd1bISbyeBObyRzq1FsnFeX0biBhTmiXFzYR0ldSNw+xL5Ni7HgdGYfYN8CEpuqODLePW5h5Qh3FzPbDgHMSze6i/2/+tBDYMNKQ/GLXzK1n74hx+3UZAYxrpY++tHJaCMK8KWhAcpE+9T8/9A50YUm6gIA0oAAAAAElFTkSuQmCC') no-repeat;

    @include retina {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAABGdBTUEAALGPC/xhBQAAAg9JREFUOBHdU79rE1Ecf59Lk6PFCOpSKLSCQ5cKgXZycREKmgwOHm2KSbNYUJd2EBoL3mAzOFQXC7okd2IKR6GDiVR0c40QqIuDQ4SCk0LVliTtff1+7/JiEvoX+OC97/f7+XHv50Gd0jzPi9R3jp4Klbg5vGxZ1smgDIOAfdc70/xxuKUUJUMOFfP8yLy9af3u1fYZH2acMWpThYgSfSKgjiiS6252X+NdYz5dTCgfFVI0JiQUvkrk+lKn3lcGJQvlXF1qQ4a1BSfJpo9dE1CLRY0r0sG5aAKONYGWa6zOO0uK6DlTEREoYNc8N3JL70n23Pr5Z5tIzQa8wglr7hlQ9Eyb+OuuOTmR0iYRSj4Rv5wSLjRSRDxDXOzyfq4BamN9a/FRSPaPSy9n2oxk83NOgydZ5vx9v+L/rPg6ilWQHA42HpczeY502lb5NWEt7RY4rhDoA1bnSod8UsOBGHh9MT6V65xi1//iTi3aONgr8RfTIYgjvkfc534cAEQLjV97Vbl07ZJcMG0SbehhRT7tziryPV7G2cAAfDKHjOuSN4/9t/yypiXnbRwoGFahnHn375Hfdqeo7Vd52eOBaOCRs+0bosaNwqvM55CXsdPsxeJoq4k3PPOMxiTyTLWYSSm7lPuu8eDv0IUQsfiFqyzc0ZjkgvWahOsuVQsl2jYZrS/OE8ljk9kHtg1f8t72F5HJzIBJBfCCAAAAAElFTkSuQmCC') no-repeat;
      background-size: 7px 10px;
    }
  }
}

.btn-primary {
  @include purple-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-bg-alt);
}

.btn-success {
  @include purple-button-variant($btn-success-color, $btn-success-bg, $btn-success-bg-alt);

  &.btn-default {
    @include purple-button-variant-alt($brand-success);
  }
}

.btn-info {
  @include purple-button-variant($btn-info-color, $btn-info-bg, $btn-info-bg-alt);

  &.btn-default {
    @include purple-button-variant-alt($brand-info);
  }
}

.btn-warning {
  @include purple-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-bg-alt);

  &.btn-default {
    @include purple-button-variant-alt($brand-warning);
  }
}

.btn-danger {
  @include purple-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-bg-alt);

  &.btn-default {
    @include purple-button-variant-alt($brand-danger);
  }
}

.btn-dropbox {
  @include purple-button-variant(#fff, $btn-dropbox-bg, $btn-dropbox-bg-alt);

  &.btn-default {
    @include purple-button-variant-alt($color-dropbox);
  }
}

.btn-github {
  @include purple-button-variant(#fff, $btn-github-bg, $btn-github-bg-alt);

  &.btn-default {
    @include purple-button-variant-alt($color-github);
  }
}

.btn-link {
  font-weight: normal;
  text-decoration: underline;

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    color: $gray-light;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration: inherit;

    &:hover {
      color: $gray-light;
      background-color: transparent;
      border-color: transparent;
      box-shadow: none;
      text-decoration: inherit;
    }
  }
}

.btn-lg {
  font-weight: normal;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 6px;
}

.btn-sm {
  font-size: 13px;

  .icon {
    margin-right: 2px;
  }
}

.btn-xs {
  height: 24px;
  line-height: 22px;
  padding-left: 12px;
  padding-right: 12px;

  .icon {
    margin-right: 0;
  }
}

.input-group-btn {

  .btn {
    line-height: 1.6;
    z-index: 2;
  }
}