/* ==========================================================================
    Tools / Mixins / Button
========================================================================== */

/* Button
========================================================================== */

@mixin make-button() {
    /*

    Ligth/Dark mode

    All css color variables are in the _document.scss

	--btn-bg-color: var(--primary);
    --btn-border-color: var(--primary);
    --btn-color: var(--white);
	--btn-hover-color: var(--white);
    --btn-hover-bg-color: var(--primary-light);
    --btn-hover-border-color: var(--primary-light);

    */

    --btn-padding-tb: 8px;
    --btn-padding-lr: 20px;

    display: inline-block;
    background: var(--btn-bg-color);
    border: 1px solid var(--btn-border-color);
    color: var(--btn-color);
    font-weight: var(--font-bold);
    padding: var(--btn-padding-tb) var(--btn-padding-lr);
    transition: all 0.35s $ease-in;

    &:hover,
    &:focus {
        background: var(--btn-hover-bg-color);
        border: 1px solid var(--btn-hover-border-color);
        color: var(--btn-hover-color);
    }
}
