// -----------------------------------------------------------------------------
// Buttons
// -----------------------------------------------------------------------------

.btn {
    display: inline-block;
    padding: .65em 1em;
    text-align: center;
    background-color: transparent;
    border: solid 2px get-color(brand, primary);
    border-radius: 4px;
    transition: all .15s cubic-bezier(.4, 0, .2, 1);

    &:hover,
    &:active,
    &.is-active {
        background-color: get-color(brand, primary);
        color: get-color(base, 'white');
    }

    &--small {
        @extend %micro;
        padding: .3em .5em;
        border-width: 1px;
    }

    &--tiny {
        @extend %nano;
        padding: .3em .5em;
        border-width: 1px;
    }
}

