.button
    +font(20px, '', $font_color)
    +flex('', center)
    padding: $gutter
    border-radius: $radius
    transition: background $transition
    
    &:not(:disabled)
        background: $primary
        cursor: pointer
        box-shadow: $shadow_4

        &:hover
            background: hsl(from #{$primary} h s calc(l - 20))

    &:disabled
        background: #c3c3c3
        cursor: default
    
    & > i
        +font(24px, '', $font_color)
        margin-right: $gutter_sm