.btn {
  text-decoration: none;
}


.btn-default {
  @extend .btn-primary;

}


.btn-secondary, .btn-secondary:active {
  background-color: var(--parent-color);
  border-color: var(--parent-color);
}


.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--parent-color-light);
  border-color: var(--parent-color-light)
}


.btn-secondary:focus {
  box-shadow-color: var(--parent-color-light);
}


.btn {

  .icon {
    display: inline-block;
    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
    line-height: (($btn-padding-y * 2) + ($font-size-base * $btn-line-height));
    width: (($btn-padding-y * 4) + ($font-size-base * $btn-line-height));
    margin: (- $btn-padding-y) $btn-padding-x;
    background-color: rgba(0, 0, 0, .2);
    &:last-child {
      margin-right: (- $btn-padding-x);
      //background-color: red;
    }
    &:first-child {
      margin-left: (- $btn-padding-x);
      //background-color: green;
    }
  }
}
