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

button.btn-dd,
button.btn-dd-plain {
    width: 100%;
    padding: var(--padding-md);

    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);

    cursor: pointer;

    background: var(--bg-glass);
    color: var(--text-primary);

    font-weight: bold;
    line-height: 1;

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

    box-sizing: border-box;

    appearance: none;
    -webkit-appearance: none;

    transition:
        var(--transition-default),
        border-color var(--transition-default),
        box-shadow var(--transition-default),
        transform var(--transition-default);
}


/* =========================
DROPDOWN VARIANTS
========================= */


button.btn-dd-p {
    background: var(--gradient-blue);
    color: var(--text-primary);

    border-color: var(--border-primary);
    box-shadow: var(--glow-secondary);
}

button.btn-dd-s {
    border-color: var(--border-secondary);
    color: var(--text-secondary);
}

button.btn-dd-a {
    border-color: var(--border-accent);
    color: var(--text-primary);
}


/* =========================
HOVER
========================= */

button.btn-dd:hover {
    transform: translateY(var(--hover-lift));
    border-color: var(--border-subtle-hover);
    box-shadow: var(--glow-shadow-small);
}

button.btn-dd-p:hover {
    border-color: var(--border-primary-hover);
    box-shadow: var(--glow-primary);
}

button.btn-dd-s:hover {
    border-color: var(--border-secondary-hover);
    box-shadow: var(--glow-secondary);
}

button.btn-dd-a:hover {
    border-color: var(--border-accent-hover);
    box-shadow: var(--glow-accent);
}


/* =========================
ACTIVE
========================= */

button.btn-dd:active {
    transform: translateY(0);
}


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

button.btn-dd:disabled {
    cursor: not-allowed;

    opacity: .4;

    transform: none;
    box-shadow: none;
}