/* ==========================================================
   DJJ Healthcare
   buttons.css
========================================================== */

/* ==========================================================
   BASE BUTTON
========================================================== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 38px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all .35s cubic-bezier(.23,1,.32,1);
    white-space: nowrap;
}

/* ==========================================================
   PRIMARY
========================================================== */
.btn-primary {
    background: linear-gradient(
        135deg,
        var(--secondary),
        var(--secondary-dark)
    );
    color: #fff;
    box-shadow: 0 12px 30px rgba(57,183,201,.25);
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(57,183,201,.35);
}

.btn-primary:active {
    transform: translateY(-1px);
}

/* ==========================================================
   OUTLINE
========================================================== */
.btn-outline-light {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-outline-light:hover {
    background: var(--primary);
    color: #fff;
}

/* ==========================================================
   LIGHT
========================================================== */
.btn-light {
    background: #fff;
    color: var(--primary);
}

.btn-light:hover {
    background: var(--grey);
}

/* ==========================================================
   DARK
========================================================== */
.btn-dark {
    background: var(--primary);
    color: #fff;
}

.btn-dark:hover {
    background: var(--primary-dark);
}

/* ==========================================================
   RIPPLE
========================================================== */
.btn::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transform: translate(-50%,-50%);
    transition: .6s;
}

.btn:hover::before {
    width: 380px;
    height: 380px;
}

/* ==========================================================
   ICONS
========================================================== */
.btn i {
    transition: .35s;
}

.btn:hover i {
    transform: translateX(6px);
}

/* ==========================================================
   SIZES
========================================================== */
.btn-sm {
    padding: 12px 24px;
    font-size: 14px;
}

.btn-lg {
    padding: 22px 46px;
    font-size: 18px;
}