.btn {
    display: inline-block;
    padding: .50rem .80rem;
    transition: $transition-default;
    cursor: pointer;

    &--primary {
        color: $color-white;
        background-color: $color-primary;
        border: 2px solid $color-primary;

        &:hover {
            background-color: darken($color-primary, 8%);
            border: 2px solid darken($color-primary, 8%);
        }
    }

    &--secondary {
        color: $color-white;
        background-color: $color-secondary;
        border: 2px solid $color-secondary;

        &:hover {
            background-color: darken($color-secondary, 8%);
            border: 2px solid darken($color-secondary, 8%);
        }
    }

    &--success {
        color: $color-white;
        background-color: $color-green;
        border: 2px solid $color-green;

        &:hover {
            background-color: darken($color-green, 8%);
            border: 2px solid darken($color-green, 8%);
        }
    }

    &--primary--outline {

        border: 2px solid $color-primary;
        color: $color-primary;
        background: transparent;

        &:hover {
            background-color: $color-primary;
            color: #fff;
        }
    }

    &--secondary--outline {

        border: 2px solid $color-secondary;
        color: $color-secondary;
        background: transparent;

        &:hover {
            background-color: $color-secondary;
            color: #fff;
        }
    }

    &--success--outline {

        border: 2px solid $color-green;
        color: $color-green;
        background: transparent;

        &:hover {
            background-color: $color-green;
            color: #fff;
        }
    }

    &--modal--close {
        background:transparent;
        font-size: 2.3rem;
        font-weight: 200;
    }
}