/****************************************************************************** 
* Buttons
******************************************************************************/

  .button {
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    display: inline-block;
    min-width: 10rem;
    padding: 1rem;
    text-align: center;
    text-decoration: none;

    &.button-small {
      font-size: 0.875rem;
      min-width: auto;
      padding: 0.5rem 1rem;
    }

    &.button-rounded {
      border-radius: 0.125rem;
    }

    &.button-block {
      display: block;
    }

    &.button-primary {
      background-color: $color-800;
      box-shadow: 0 0 1rem 0 rgba($black, 0.12);
      color: $color-200;
      
      &:hover,
      &:focus,
      &:active {
        background-color: $color-700;
        color: $color-100;
      }
    }
  }