HBM/md-components

/**
 * http://www.google.com/design/spec/components/cards.html#cards-usage
 */

.mdc-Card {
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

.mdc-Card-title {
  font-size: 24px;
  padding: 24px 16px 16px;
}

.mdc-Card-actions {
  padding: 8px;
}

.mdc-Card-content {
  padding: 24px 16px;
}

/**
 * Align left most button text with title and card text
 */
.mdc-Card-actions > .mdc-Button {
  margin: 0;
  text-align: left;
  min-width: 0;
}

.mdc-Card-actions .mdc-Button + .mdc-Button {
  margin-left: 8px;
}

.mdc-Card-text {
  padding: 16px;
}

/**
 * Fix left alignment for Checkbox component 10px + 3px
 */
.mdc-Card-text > .mdc-Checkbox {
  margin-left: -13px;

  @include medium {
    /**
     * 5px + 3px
     */
    margin-left: -8px;
  }
}