.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    padding: .5rem 1rem;
    
    &.btn-primary-inverse {
        transition: all 0.3s;
        background-color: $primary-color;
        border: 0;
        color: white;
        &:hover {
            background-color: $secondary-color;
        }
    }
    
    &.btn-primary-white {
        transition: all 0.3s;
        background-color: $primary-color;
        border: 0;
        color: white;
        border: 2px solid rgba(0,0,0,0);
        &:hover {
            border: 2px solid $primary-color;
            background-color: white;
            color: $primary-color;
        }
    }

    &.btn-white-inverse {
        transition: all 0.3s;
        background-color: white;
        border: 0;
        color: $primary-color;
        border: 1px solid white;
        &:hover {
            border: 1px solid white;
            background-color: $primary-color;
            color: white;
        }
    }
    
    &.btn-primary-outline {
        transition: all 0.3s;
        &:hover {
            background-color: white;
            color: $primary-color;
        }
    }
    
    &.btn-outline {
        background-color: white;
        color: $primary-color !important;
        border: 2px solid $primary-color;
        &:hover {
            background-color: rgb(51, 97, 55) !important;
            color: white !important;
            border: 2px solid rgb(51, 97, 55);
        }
    }
    
    &.btn-outline-green {
        background-color: rgb(51, 97, 55) !important;
        color: white !important;
        border: 2px solid rgb(51, 97, 55);
    }

    &.btn-clean-cyan {
        background-color: unset;
        border: 0;
        &:hover {
            background-color: $secondary-color !important;
            color: white !important;
        }
    }
    
}