/* =========================================================
   COMPONENTS
   ========================================================= */


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.button {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 35px;

    padding:
        7px 12px;

    margin: 3px;

    border:
        1px solid rgba(255,255,255,.085);

    border-radius:
        var(--radius-sm);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.035)
        );

    color:
        var(--text-soft);

    cursor:
        pointer;

    text-decoration:
        none;

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        550;

    line-height:
        1;

    white-space:
        nowrap;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 2px 7px rgba(0,0,0,.10);

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .16s cubic-bezier(.2,.8,.2,1),
        box-shadow .2s ease,
        opacity .2s ease;
}


/* =========================================================
   BUTTON LIGHT
   ========================================================= */

button::before,
.button::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius:
        inherit;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            transparent 60%
        );

    transition:
        opacity .2s ease;
}


button:hover,
.button:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.05)
        );

    border-color:
        rgba(255,255,255,.16);

    color:
        var(--text);

    transform:
        translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 7px 20px rgba(0,0,0,.22);
}

button:hover::before,
.button:hover::before {
    opacity:
        1;
}


button:active,
.button:active {
    transform:
        translateY(0)
        scale(.97);

    box-shadow:
        0 2px 7px rgba(0,0,0,.15);
}


/* =========================================================
   FOCUS
   ========================================================= */

button:focus-visible,
.button:focus-visible {
    outline:
        none;

    border-color:
        rgba(139,156,255,.42);

    box-shadow:
        0 0 0 3px var(--accent-soft),
        0 5px 18px rgba(0,0,0,.18);
}


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

button:disabled,
.button[aria-disabled="true"] {
    opacity:
        .45;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.actions {
    position:
        relative;

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        4px;

    margin-top:
        15px;
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

.back {
    margin:
        0 0 18px;

    color:
        var(--text-muted);

    background:
        transparent;

    border-color:
        transparent;

    box-shadow:
        none;
}

.back:hover {
    color:
        var(--text);

    background:
        rgba(255,255,255,.045);

    border-color:
        var(--border);

    box-shadow:
        0 5px 16px rgba(0,0,0,.14);
}


/* =========================================================
   ACTION COLORS
   ========================================================= */

/* Primary action */

.actions button:first-child,
.actions .button:first-child {
    color: #eef0ff;

    background:
        linear-gradient(
            180deg,
            rgba(139,156,255,.20),
            rgba(139,156,255,.10)
        );

    border-color:
        rgba(139,156,255,.30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 4px 14px rgba(70,80,170,.14);
}

.actions button:first-child:hover,
.actions .button:first-child:hover {
    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(139,156,255,.30),
            rgba(139,156,255,.16)
        );

    border-color:
        rgba(163,176,255,.48);

    box-shadow:
        0 8px 25px rgba(70,80,170,.24);
}


/* =========================================================
   SECONDARY / INFORMATION ACTION
   ========================================================= */

.actions .secondary,
button.secondary,
.button.secondary {
    color:
        var(--secondary);

    background:
        linear-gradient(
            180deg,
            rgba(79,209,197,.11),
            rgba(79,209,197,.055)
        );

    border-color:
        rgba(79,209,197,.20);
}

.actions .secondary:hover,
button.secondary:hover,
.button.secondary:hover {
    color:
        var(--secondary-hover);

    background:
        linear-gradient(
            180deg,
            rgba(79,209,197,.18),
            rgba(79,209,197,.09)
        );

    border-color:
        rgba(79,209,197,.34);

    box-shadow:
        0 7px 22px rgba(40,150,145,.16);
}


/* =========================================================
   WARNING ACTION
   ========================================================= */

.actions .warning,
button.warning,
.button.warning {
    color:
        var(--warning);

    background:
        linear-gradient(
            180deg,
            rgba(244,184,96,.11),
            rgba(244,184,96,.05)
        );

    border-color:
        rgba(244,184,96,.20);
}

.actions .warning:hover,
button.warning:hover,
.button.warning:hover {
    color:
        var(--warning-hover);

    background:
        linear-gradient(
            180deg,
            rgba(244,184,96,.18),
            rgba(244,184,96,.08)
        );

    border-color:
        rgba(244,184,96,.34);
}


/* =========================================================
   DANGER ACTION
   ========================================================= */

.actions .danger,
button.danger,
.button.danger {
    color:
        var(--danger);

    background:
        linear-gradient(
            180deg,
            rgba(255,116,124,.10),
            rgba(255,116,124,.045)
        );

    border-color:
        rgba(255,116,124,.18);
}

/* =========================================================
   EMPTY
   ========================================================= */

.empty {
    padding:
        60px 20px;

    color:
        var(--text-muted);

    text-align:
        center;

    font-size:
        14px;
}


/* =========================================================
   SUCCESS / ERROR
   ========================================================= */

.job-error {
    color:
        var(--danger);
}

.job-success {
    color:
        var(--success);
}


/* =========================================================
   RESPONSIVE BUTTONS
   ========================================================= */

@media (max-width: 600px) {

    button,
    .button {
        min-height:
            36px;

        padding:
            8px 11px;
    }

    .actions {
        gap:
            3px;
    }
}