// Buttons
// ––––––––––––––––––––––––––––––––––––––––––––––––––

button, .button
    appearance: none
    -webkit-appearance: none
    -moz-appearance: none
    display: inline-block
    text-align: center
    padding: 1em 3em
    outline: none
    border: none
    transition: all 0.3s ease-in-out
    background-color: $eden-green
    color: $eden-light-grey

    &:hover
        cursor: pointer
        background-color: darken($eden-green, 10)

    &.border
        border: 0.1em solid $eden-charcoal

    &.light
        background-color: $eden-light-grey
        color: $eden-charcoal

        &.border
            border: 0.1em solid $eden-dark-grey

        &:hover
            background-color: darken($eden-light-grey, 10)

    &.dark
        background-color: $eden-charcoal
        color: $eden-light-grey

        &.border
            border: 0.1em solid $eden-light-grey

        &:hover
            background-color: darken($eden-charcoal, 10)

    &.transparent
        background-color: transparent
        color: $eden-charcoal

        &.border
            border: 0.1em solid $eden-dark-grey

        &:hover
            background-color: $eden-light-grey

    &.short
        padding-top: 0.5em
        padding-bottom: 0.5em

    &.tall
        padding-top: 1.5em
        padding-bottom: 1.5em

    &.skinny
        padding-left: 2em
        padding-right: 2em

    &.fat
        padding-left: 4em
        padding-right: 4em

    &.rounded
        border-radius: 0.25em

    &.pill
        border-radius: 100px

    &.shadow
        box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.75)