// ==========================================================================
// Buttons
// ==========================================================================
.buttons-demo {
  padding: 0;

  * {
    vertical-align: top;
  }

  .btn {
    display: block;
    vertical-align: top;
  }
}

.btn,
a.btn {
  @include transition(background $transition);
  border-radius: $border-radius;
  display: inline-block;
  margin: $pad-sm 0;
  padding: 6px 14px;
  border: none;
  font-weight: $font-bold;
  text-align: center;
  text-decoration: none;
  background: $white;
  font-size: 13px;
  outline: none;
  position: relative;
  cursor: pointer;

  &:active,
  &.active {
    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;
    cursor: not-allowed;
  }

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

  .hk-icon {
    font-size: 14px;
    line-height: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 4px;
    margin-left: -2px;
  }

  .caret {
    position: relative;
    top: 1px;
    width: 10px;
    height: 10px;
    display: inline-block;
    border: none;
    left: 4px;
    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;
    }
  }

  //- Colors

  &-default {
    @include shibori-button-alt($brand-primary);

    &.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;
      }
    }
  }

  &-primary {
    @include shibori-button(#fff, $brand-primary);

    &-lightning {
      @include shibori-button-lightning(#fff, $brand-primary, $brand-primary-alt);
    }
  }

  &-white {
    @include shibori-button($brand-primary, #fff);
    box-shadow: inset 0 0 0 1px rgba(#fff, .6);

    &-lightning {
      @include shibori-button-lightning($brand-primary, #E7E4EE, #fff);
      box-shadow: inset 0 0 0 1px rgba(#fff, .6);
    }
  }

  &-success {
    @include shibori-button(#fff, $brand-success);

    &-lightning {
      @include shibori-button-lightning(#fff, $brand-success, $brand-success-alt);
    }

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

  &-info {
    @include shibori-button(#fff, $brand-info);

    &-lightning {
      @include shibori-button-lightning(#fff, $brand-info, $brand-info-alt);
    }

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

  &-warning {
    @include shibori-button(#fff, $brand-warning);

    &-lightning {
      @include shibori-button-lightning(#fff, $brand-warning, $brand-warning-alt);
    }

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

  &-danger {
    @include shibori-button(#fff, $brand-danger);

    &-lightning {
      @include shibori-button-lightning(#fff, $brand-danger, $brand-danger-alt);
    }

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

  //- Sizes
  &-xs {
    padding: 2px 8px;
    font-size: 12px;
  }

  &-sm {
    padding: 5px 16px;
    font-size: 12px;
  }

  &-lg {
    padding: 7px 20px;
    font-size: $font-lg;
  }

  &-block {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  //- Layouts

  &-no-margin {
    margin: 0;
  }

  //- Types
  &-text {
    background: transparent;
    color: $blue;

    &:hover,
    &:focus {
      color: darken($blue, 5%);
      background: transparent;
    }

    &:active {
      color: $brand-primary;
    }
  }

  // Special Buttons
  &.deploy {

    .hk-icon {
      position: relative;
      top: 1px;
      line-height: $font-sm;
      margin-right: 4px;
      color: lighten($brand-primary-light, 15%);
      font-size: $font-base;
    }

    .to-heroku {
      color: lighten($brand-primary-light, 15%);
    }
  }
}

// - Switch

.shibori-checkbox {
  display: inline-block;
}

.shibori-checkbox input {
  display: inline-block;
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* style the "fake" shibori-checkbox */

.shibori-checkbox-value {
  background: #EEF1F6;
  border: 1px solid #CFD7E6;
  border-radius: 34px;
  display: inline-block;
  height: 30px;
  width: 60px;
  position: relative;
  transition: all 120ms;
  vertical-align: -0.5em;
}

.shibori-checkbox-value::before {
  content: '';
  background-color: #fff;
  border: 1px solid;
  border-color: inherit;
  border-radius: 50%;
  box-shadow: 0 0.0625em 0 0.0625em rgba(0,0,0,0.075);
  display: block;
  height: 30px;
  width: 30px;
  left: 25%;
  position: absolute;
  top: -1px;
  left: -1px;
  transition: all 120ms ease-in;
}

input:checked + .shibori-checkbox-value {
  background-image: linear-gradient(-135deg, #AB8ECD 0%, #79589F 100%);
  border-color: #AB8ECD;
}

input:checked + .shibori-checkbox-value::before {
  left: 51%;
}