/*
---
name: Primary button
tag:
  - components
  - buttons
category:
  - components
  - components/buttons
  - components/buttons/primary
sourcePath: /components/buttons/_button-primary.scss
---

The button with the strongest visual weight is the primary button. It’s the
button that’s supposed to get the most attention.

```html
<button class="button-primary">Primary button</button>
```
*/
.button-primary {
    background: transparent;
    border-radius: 3px;
    border: 0;
    box-shadow: 0 0 0 1px $color-black;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: vertical-base(0.5) 1em;

    &:hover {
        background-color: $color-black;
        color: invert($color-black);
    }

    @include media(">=medium") {
        font-size: 1.25em;
        line-height: vertical-base(1.5);
    }
}