.vahu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 42px;
    padding: 10px 20px;

    border: 1px solid transparent;
    border-radius: var(--vahu-radius);

    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;

    cursor: pointer;
    position: relative;
    overflow: hidden;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .20s ease,
        box-shadow .25s ease;
}

.vahu-btn::before {

    content: "";

    position: absolute;
    top: 0;
    left: -130%;

    width: 60%;
    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .55),
            transparent);

    transform: skewX(-25deg);

}

.vahu-btn:hover::before {

    left: 170%;
    transition: left .8s ease;

}

/* ==========================================================
   SAVE 
   ========================================================== */

.vahu-btn-save {

    background: var(--vahu-gradient);
    color: var(--vahu-text);
    border: none;

    box-shadow:
        var(--vahu-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .70);

}

.vahu-btn-save::before {

    content: "";

    position: absolute;
    top: 0;
    left: -130%;

    width: 60%;
    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .65),
            transparent);

    transform: skewX(-25deg);

}

.vahu-btn-save:hover {

    background: var(--vahu-gradient-hover);

    transform: translateY(-1px);

    box-shadow:
        var(--vahu-shadow-hover),
        inset 0 1px 0 rgba(255, 255, 255, .85);

}

.vahu-btn-save:hover::before {

    left: 170%;
    transition: left .8s ease;

}


/* ==========================================================
   CANCEL
   ========================================================== */

.vahu-btn-cancel {

    background: var(--vahu-cancel);
    color: var(--vahu-cancel-text);

    border: 1px solid var(--vahu-cancel-border);

}

.vahu-btn-cancel:hover {

    background: var(--vahu-cancel-hover);

    transform: translateY(-1px);

}


/* ==========================================================
   DELETE
   ========================================================== */

.vahu-btn-delete {

    background: var(--vahu-btn-delete-bg);
    color: var(--vahu-btn-delete-text);

    border: none;

    box-shadow:
        var(--vahu-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .70);

}

.vahu-btn-delete:hover {

    background: var(--vahu-btn-delete-bg-hover);

    transform: translateY(-1px);

    box-shadow:
        var(--vahu-shadow-hover),
        inset 0 1px 0 rgba(255, 255, 255, .85);

}

/* ==========================================================
   BACK + NEXT
   ========================================================== */

.vahu-btn-back,
.vahu-btn-next {

    background: var(--vahu-mint-light);
    color: var(--vahu-text);

    border: 1px solid var(--vahu-mint);

}

.vahu-btn-back:hover,
.vahu-btn-next:hover {

    background: var(--vahu-mint-hover);
    border-color: var(--vahu-mint-hover);

    transform: translateY(-1px);

    box-shadow: var(--vahu-shadow);

}


/* ==========================================================
   DISABLED
   ========================================================== */

.vahu-btn:disabled,
.vahu-btn[disabled] {

    opacity: .55;
    cursor: not-allowed;
    transform: none;

}

/* ==========================================================
   REFRESH
   ========================================================== */

.vahu-btn-refresh {

    background: linear-gradient(135deg,
            var(--vahu-peach) 0%,
            var(--vahu-peach-light) 20%,
            var(--vahu-mint-light) 75%,
            var(--vahu-mint) 100%);

    color: var(--vahu-text);
    border: none;

    box-shadow:
        var(--vahu-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .70);

}

.vahu-btn-refresh:hover {

    background: linear-gradient(135deg,
            var(--vahu-peach) 0%,
            var(--vahu-peach-light) 20%,
            var(--vahu-mint-hover) 75%,
            var(--vahu-mint-light) 100%);

    transform: translateY(-1px);

    box-shadow:
        var(--vahu-shadow-hover),
        inset 0 1px 0 rgba(255, 255, 255, .85);

}