//- 💫 CSS > COMPONENTS > BUTTONS

.c-button
    display: inline-block
    font-weight: bold
    padding: 0.8em 1.1em 1em
    margin-bottom: 1px
    border: 2px solid $color-theme
    border-radius: 2em
    text-align: center
    transition: background-color, color 0.25s ease

    &:hover
        border-color: $color-theme-dark

    &.c-button--small
        font-size: 1.1rem
        padding: 0.65rem 1.1rem 0.825rem

    &.c-button--primary
        background: $color-theme
        color: $color-back

        &:hover
            background: $color-theme-dark

    &.c-button--secondary
        background: $color-back
        color: $color-theme

        &:hover
            color: $color-theme-dark

    &.c-button--secondary-light
        background: transparent
        color: $color-back
        border-color: $color-back

.c-icon-button
    @include size(35px)
    background: $color-subtle-light
    color: $color-subtle-dark
    border-radius: 50%
    padding: 0.5rem
    transition: color 0.2s ease

    &:hover
        color: $color-theme

    &.c-icon-button--right
        float: right
        margin-left: 3rem