/* --- general ---*/
$ribs-button-box-shadow-hover: rgba(0,0,0,.05);
$ribs-button-box-shadow-active: inset 0 3px 5px rgba(0,0,0,.125);

/* --- specific colors primary (general) --- */
$ribs-button-color: #ffffff;
$ribs-button-color-hover: #ffffff;
$ribs-button-background: #007bff;
$ribs-button-background-hover: #006fe6;
$ribs-button-border: #007bff;
$ribs-button-border-hover: #006fe6;
$ribs-button-border-active: #0062cc;
$ribs-button-box-shadow-hover1: rgba(0,123,255,.25);

/* --- specific colors secondary --- */
$ribs-button-secondary-color: #ffffff;
$ribs-button-secondary-color-hover: #ffffff;
$ribs-button-secondary-background: #5a6169;
$ribs-button-secondary-background-hover: #4e545b;
$ribs-button-secondary-border: #5a6169;
$ribs-button-secondary-border-hover: #4e545b;
$ribs-button-secondary-border-active: #42484e;
$ribs-button-secondary-box-shadow-hover1: rgba(90,97,105,.25);

/* --- specific colors success --- */
$ribs-button-success-color: #ffffff;
$ribs-button-success-color-hover: #ffffff;
$ribs-button-success-background: #17c671;
$ribs-button-success-background-hover: #14af64;
$ribs-button-success-border: #17c671;
$ribs-button-success-border-hover: #14af64;
$ribs-button-success-border-active: #129857;
$ribs-button-success-box-shadow-hover1: rgba(23,198,113,.25);

/* --- specific colors danger --- */
$ribs-button-danger-color: #ffffff;
$ribs-button-danger-color-hover: #ffffff;
$ribs-button-danger-background: #c4183c;
$ribs-button-danger-background-hover: #ad1535;
$ribs-button-danger-border: #c4183c;
$ribs-button-danger-border-hover: #ad1535;
$ribs-button-danger-border-active: #97122e;
$ribs-button-danger-box-shadow-hover1: rgba(196,24,60,.25);

/* --- specific colors warning --- */
$ribs-button-warning-color: #000000;
$ribs-button-warning-color-hover: #000000;
$ribs-button-warning-background: #ffb400;
$ribs-button-warning-background-hover: #e6a200;
$ribs-button-warning-border: #ffb400;
$ribs-button-warning-border-hover: #e6a200;
$ribs-button-warning-border-active: #cc9000;
$ribs-button-warning-box-shadow-hover1: rgba(255,180,0,.25);

/* --- specific colors info --- */
$ribs-button-info-color: #ffffff;
$ribs-button-info-color-hover: #ffffff;
$ribs-button-info-background: #00b8d8;
$ribs-button-info-background-hover: #00a2bf;
$ribs-button-info-border: #00b8d8;
$ribs-button-info-border-hover: #00a2bf;
$ribs-button-info-border-active: #008da5;
$ribs-button-info-box-shadow-hover1: rgba(0,184,216,.25);

/* --- specific colors dark --- */
$ribs-button-dark-color: #ffffff;
$ribs-button-dark-color-hover: #ffffff;
$ribs-button-dark-background: #212529;
$ribs-button-dark-background-hover: #16181b;
$ribs-button-dark-border: #212529;
$ribs-button-dark-border-hover: #16181b;
$ribs-button-dark-border-active: #0a0c0d;
$ribs-button-dark-box-shadow-hover1: rgba(0,0,0,.25);


/* --- specific colors white --- */
$ribs-button-white-color: #3d5170;
$ribs-button-white-color-hover: #3d5170;
$ribs-button-white-background: #ffffff;
$ribs-button-white-background-hover: #ffffff;
$ribs-button-white-border: #e1e5eb;
$ribs-button-white-border-hover: #e1e5eb;
$ribs-button-white-box-shadow-hover1: rgba(129,142,163,.3);


.ribs-button {
    font-weight: 400;
    border: 1px solid;
    padding: .5625rem 1rem;
    margin-right: .5rem;
    font-size: .75rem;
    line-height: 1.125;
    border-radius: .25rem;
    transition: all 250ms cubic-bezier(.27,.01,.38,1.06);
    color: $ribs-button-color !important;
    border-color: $ribs-button-border;
    background: $ribs-button-background;
    display: inline-block;

    &:last-of-type {
        margin-right: 0;
    }
    
    &:not(:disabled) {
        cursor: pointer;
    }
    
    &:hover {
        color: $ribs-button-color-hover !important;
        border-color: $ribs-button-border-hover;
        background: $ribs-button-background-hover;
        box-shadow: 0 5px 15px $ribs-button-box-shadow-hover, 0 4px 10px $ribs-button-box-shadow-hover1;
    }

    &:active {
        color: $ribs-button-color-hover !important;
        background-color: $ribs-button-background-hover;
        border-color: $ribs-button-border-active;
        box-shadow: $ribs-button-box-shadow-active;
    }

    &.outline {
        background: transparent;
        color: $ribs-button-background !important;

        &:hover {
            color: $ribs-button-color-hover !important;
            background: $ribs-button-background;
        }
    }
    
    &.secondary {
        color: $ribs-button-secondary-color !important;
        border-color: $ribs-button-secondary-border;
        background: $ribs-button-secondary-background;
        
        &:hover {
            color: $ribs-button-secondary-color-hover !important;
            border-color: $ribs-button-secondary-border-hover;
            background: $ribs-button-secondary-background-hover;
            box-shadow: 0 5px 15px $ribs-button-box-shadow-hover, 0 4px 10px $ribs-button-secondary-box-shadow-hover1;
        }

        &:active {
            color: $ribs-button-color-hover !important;
            background-color: $ribs-button-secondary-background-hover;
            border-color: $ribs-button-secondary-border-active;
            box-shadow: $ribs-button-box-shadow-active;
        }

        &.outline {
            background: transparent;
            color: $ribs-button-secondary-background !important;

            &:hover {
                color: $ribs-button-secondary-color-hover !important;
                background: $ribs-button-secondary-background;
            }
        }
    }
    
    &.success {
        color: $ribs-button-success-color !important;
        border-color: $ribs-button-success-border;
        background: $ribs-button-success-background;
        
        &:hover {
            color: $ribs-button-success-color-hover !important;
            border-color: $ribs-button-success-border-hover;
            background: $ribs-button-success-background-hover;
            box-shadow: 0 5px 15px $ribs-button-box-shadow-hover, 0 4px 10px $ribs-button-success-box-shadow-hover1;
        }

        &:active {
            color: $ribs-button-color-hover !important;
            background-color: $ribs-button-success-background-hover;
            border-color: $ribs-button-success-border-active;
            box-shadow: $ribs-button-box-shadow-active;
        }

        &.outline {
            background: transparent;
            color: $ribs-button-success-background !important;

            &:hover {
                color: $ribs-button-success-color-hover !important;
                background: $ribs-button-success-background;
            }
        }
    }
    
    &.danger {
        color: $ribs-button-danger-color !important;
        border-color: $ribs-button-danger-border;
        background: $ribs-button-danger-background;
        
        &:hover {
            color: $ribs-button-danger-color-hover !important;
            border-color: $ribs-button-danger-border-hover;
            background: $ribs-button-danger-background-hover;
            box-shadow: 0 5px 15px $ribs-button-box-shadow-hover, 0 4px 10px $ribs-button-danger-box-shadow-hover1;
        }

        &:active {
            color: $ribs-button-color-hover !important;
            background-color: $ribs-button-danger-background-hover;
            border-color: $ribs-button-danger-border-active;
            box-shadow: $ribs-button-box-shadow-active;
        }

        &.outline {
            background: transparent;
            color: $ribs-button-danger-background !important;

            &:hover {
                color: $ribs-button-danger-color-hover;
                background: $ribs-button-danger-background;
            }
        }
    }
    
    &.warning {
        color: $ribs-button-warning-color !important;
        border-color: $ribs-button-warning-border;
        background: $ribs-button-warning-background;
        
        &:hover {
            color: $ribs-button-warning-color-hover !important;
            border-color: $ribs-button-warning-border-hover;
            background: $ribs-button-warning-background-hover;
            box-shadow: 0 5px 15px $ribs-button-box-shadow-hover, 0 4px 10px $ribs-button-warning-box-shadow-hover1;
        }

        &:active {
            color: $ribs-button-warning-color-hover !important;
            background-color: $ribs-button-warning-background-hover;
            border-color: $ribs-button-warning-border-active;
            box-shadow: $ribs-button-box-shadow-active;
        }

        &.outline {
            background: transparent;
            color: $ribs-button-warning-color-hover !important;

            &:hover {
                color: $ribs-button-warning-color-hover !important;
                background: $ribs-button-warning-background;
            }
        }
    }

    &.info {
        color: $ribs-button-info-color !important;
        border-color: $ribs-button-info-border;
        background: $ribs-button-info-background;

        &:hover {
            color: $ribs-button-info-color-hover !important;
            border-color: $ribs-button-info-border-hover;
            background: $ribs-button-info-background-hover;
            box-shadow: 0 5px 15px $ribs-button-box-shadow-hover, 0 4px 10px $ribs-button-info-box-shadow-hover1;
        }

        &:active {
            color: $ribs-button-info-color-hover !important;
            background-color: $ribs-button-info-background-hover;
            border-color: $ribs-button-info-border-active;
            box-shadow: $ribs-button-box-shadow-active;
        }

        &.outline {
            background: transparent;
            color: $ribs-button-info-background !important;

            &:hover {
                color: $ribs-button-info-color-hover !important;
                background: $ribs-button-info-background;
            }
        }
    }

    &.dark {
        color: $ribs-button-dark-color !important;
        border-color: $ribs-button-dark-border;
        background: $ribs-button-dark-background;

        &:hover {
            color: $ribs-button-dark-color-hover !important;
            border-color: $ribs-button-dark-border-hover;
            background: $ribs-button-dark-background-hover;
            box-shadow: 0 5px 15px $ribs-button-box-shadow-hover, 0 4px 10px $ribs-button-dark-box-shadow-hover1;
        }

        &:active {
            color: $ribs-button-info-color-hover !important;
            background-color: $ribs-button-dark-background-hover;
            border-color: $ribs-button-dark-border-active;
            box-shadow: $ribs-button-box-shadow-active;
        }

        &.outline {
            background: transparent;
            color: $ribs-button-dark-background !important;

            &:hover {
                color: $ribs-button-dark-color-hover !important;
                background: $ribs-button-dark-background;
            }
        }
    }

    &.white {
        color: $ribs-button-white-color !important;
        border-color: $ribs-button-white-border;
        background: $ribs-button-white-background;

        &:hover {
            color: $ribs-button-white-color-hover !important;
            border-color: $ribs-button-white-border-hover;
            background: $ribs-button-white-background-hover;
            box-shadow: 0 5px 15px $ribs-button-box-shadow-hover, 0 4px 10px $ribs-button-white-box-shadow-hover1;
        }

        &:active {
            color: $ribs-button-info-color-hover !important;
            background-color: $ribs-button-background-hover;
            border-color: $ribs-button-border-active;
            box-shadow: $ribs-button-box-shadow-active;
        }

        &.outline {
            background: transparent;
            color: $ribs-button-white-color !important;

            &:hover {
                color: $ribs-button-white-color-hover !important;
                background: $ribs-button-white-background;
            }
        }
    }
}