div.button-group {
  display: inline-block;
}

div.button-group + button,
div.button-group + div.button-group {
  margin-left: 1rem;
}

header {
  button, a.button {
    display: inline-block;
    padding: 0.4rem 0 0.3rem;
    text-align: center;
    border: 1px solid $dark-grey-2;
    border-radius: 0.2em;
    background-color: #fff;
    color: $dark-grey-2;
    font-size: 0.8rem;
    text-transform: uppercase;
    width: 3rem;

    svg {
      height: 1rem;
      path {
        fill: $dark-grey-2;
      }
    }

    &:hover {
      background-color: $dark-grey-2;
      color: #fff;

      svg {
        path {
          fill: #fff;
        }
      }
    }

    &:disabled,
    &:disabled:hover {
      border-color: $dark-grey-3;
      background-color: #fff;
      color: $dark-grey-3;

      svg {
        path {
          fill: $dark-grey-3;
        }
      }
    }
  }
}