/*doc
---
title: Message with button
name: ButtonMessage
category: Components
---

Icons for displaying an image of a user

```html_example_table

<div class="ButtonMessage">
  <div class="ButtonMessage__left">
    <h3 class="ButtonMessage__heading">Getting started is easy</h3>
    <p class="ButtonMessage__message">Create an account either with email or via Twitter.</p>
  </div>
  <div class="ButtonMessage__right">
    <a class="btn ButtonMessage__button" href="/">Try us right now</a>
  </div>
</div>
```

*/

.ButtonMessage {
  background: $green-icy;
  border-radius: $border-radius-large;

  display: block;
  font-family: $font-family-sans-serif;
  overflow: auto;
  padding: 30px;
  text-align: left;
  width: 100%;

  @media screen and (min-width: $screen-sm) {
    margin: 0 auto;
    width: 100%;
    display: table;
  }

  &__left, &__right {
    display: block;
    margin-bottom: 10px;
    text-align: center;

    @media (min-width: $screen-sm) {
      display: table-cell;
      vertical-align: middle;
      margin-bottom: 0;
      text-align: left;
    }
  }

  &__heading {
    font-size: 18px;
    margin: 0;
    margin-bottom: 10px;
  }

  &__message {
    display: inline-block;
    font-family: $font-family-sans-serif;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 10px;
    vertical-align: top;
  }

  &__button {
    background: $color-poptype-green;
    color: $white;
    float: right;
    font-weight: $semi-bold;
    margin: 0;
    padding: 7px 15px 8px;
    width: 100%;
    white-space: nowrap;

    &:hover {
      background-color: #017b3c;
      text-decoration: none;
    }

    @media screen and (min-width: $screen-md) {
      margin-left: $space-large;
      width: auto;
    }
  }
}