.btn-group {
  @include clearfix();

  .btn {
    float: left;
    border-radius: 0;
  }

  .btn:first-child {
    border-radius: 3px 0 0 3px;
  }

  .btn:not(:first-child) {
    margin-left: -1px;
  }

  .btn:last-child {
    border-radius: 0 3px 3px 0;
  }

  label.btn input[type=radio] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
  }
}

.btn {
  display: inline-block;
  padding: .75em .8em;
  text-align: center;
  border-radius: 3px;
  border: 1px solid $gray20;
  color: $gray20;
  font-size: 1rem;
  background-color: rgba($gray20, 0);
  transition: .2s ease-out;
  cursor: pointer;
  -webkit-appearance: none;

  @include with-fine-pointer() {
    &:hover {
      color: white;
      text-decoration: none;
      background-color: $gray20;
    }
  }

  &:focus {
    outline-width: 0;
    box-shadow: 0 0 0 2px rgba($gray20, 0.4);
  }

  &.active,
  &:active {
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    color: white;
    background-color: $gray20;
  }

  &:focus.active {
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 2px rgba($gray20, 0.4);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    color: $gray20;
    background-color: rgba($gray20, 0);
  }
}

$btn-variants: (
  'warning': $carrot,
  'primary': $river,
  'danger': $alizarin,
  'go': $emerald,
);

@each $name, $color in $btn-variants {
  .btn--#{$name} {
    color: $color;
    border-color: $color;
    background-color: rgba($color, 0);

    @include with-fine-pointer() {
      &:hover {
        background-color: $color;
      }
    }

    &:focus {
      box-shadow: 0 0 0 2px rgba($color, 0.4);
    }

    &.active,
    &:active {
      background-color: $color;
    }

    &:focus.active {
      box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 2px rgba($color, 0.4);
    }

    &:disabled {
      color: $color;
      background-color: rgba($color, 0);
    }
  }
}

@include breakpoint(sm, true) {
  .btn {
    font-size: 0.875rem;
  }
}

.filter-group .btn {
  position: relative;

  $size: 20px;
  // Circle and check
  &.active:before,
  &.active:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: $size;
    height: $size;
    margin-left: -$size / 2;
    margin-top: -$size / 2;
    opacity: 0;
    transition: .2s;
  }

  // Circle
  &:before {
    background-color: $gray10;
    border-radius: 50%;
  }

  // Check
  &:after {
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../img/check.svg);
  }

  &.active:before,
  &.active:after {
    opacity: 1;
  }
}