%btn {
   background: $white;
   color: $black;
   padding: 9px 20px;
   margin: 0 4px;
   min-height: 40px;
   font-family: 'Open Sans', sans-serif;
   font-size: $btn_fontsize;
   line-height: 1;
   border: 2px solid;
   border-radius: 2px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
   cursor: pointer;
   transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;

   &.disabled {
      opacity: 0.5;
      pointer-events: none;
   }

   &:focus {
      outline: thin dotted;
      outline-offset: -4px;
   }
}

button,
.button {
   @extend %btn;

   &:hover {
      background: darken($white, 20%);
   }
}

.button {
   @include button--colors;
   @include button--social;

   &--small {
      font-size: calc(#{$btn_fontsize} * .8);
      padding: 5px;
      min-height: auto;
      min-width: auto;
   }

   &--large{
      font-size: calc(#{$btn_fontsize} * 1.4);
      padding: 10px 30px;
   }

   &--long {
      width: 100%;
   }

   &--loading {
      i {
         margin: 0;
         position: relative;
         right: 7px;
         top: 1px;
      }
   }

   &--submit {
      &:after{
         font-family: 'Font Awesome 5 Free';
         font-weight: 900;
         content: "\f061";
         margin-left: 10px;
      }

      &-alt:before{
         font-family: 'Font Awesome 5 Free';
         font-weight: 900;
         content: "\f067";
         margin-right: 10px;
      }
   }

   &--search {
      &:after{
         font-family: 'Font Awesome 5 Free';
         font-weight: 900;
         content: "\f002";
         margin-left: 10px;
      }
   }

   &--icon {
      padding: 6px;
      min-width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;

      &-round {
         @extend .button--icon;
         border-radius: 50%;
      }

      &-left,
      &-right {
         @extend .button--icon;
         padding: 5px 20px;
      }

      &-right i {
         order: 1;
         padding-left: 10px;
      }

      &-left i {
         order: 0;
         padding-right: 10px;
      }
   }
}