:root {
    --mini-card-padding: var(--gap);

    --mini-card-border-radius: 5px;
    --mini-card-border-width: 1px;
    --mini-card-border-style: solid;

    --mini-card-border-color: var(--zinc-600);
    --mini-card-border-color-hover: var(--zinc-700);
    --mini-card-background-color: var(--zinc-100);
    --mini-card-background-color-hover: white;

    --mini-card-text-color: var(--zinc-700);
    --mini-card-text-color-hover: var(--zinc-800);
    --mini-card-text-color-active: var(--zinc-900);
    --mini-card-text-color-disabled: var(--zinc-600);
}

/* ============================================================================ */

.mini-card {
    padding: var(--mini-card-padding);

    border-radius: var(--mini-card-border-radius);
    border-width: var(--mini-card-border-width);
    border-style: var(--mini-card-border-style);

    color: var(--mini-card-text-color);
    background-color: var(--mini-card-background-color);
    border-color: var(--mini-card-border-color);
}

.mini-card:hover {
    color: var(--mini-card-text-color-hover);
    background-color: var(--mini-card-background-color-hover);
    border-color: var(--mini-card-border-color-hover);
}
.mini-card:active {
    color: var(--mini-card-text-color-active);
    background-color: var(--mini-card-background-color-hover);
    border-color: var(--mini-card-border-color-hover);
}
.mini-card:disabled {
    border-color: var(--mini-card-border-color);
    cursor: not-allowed;
}

.mini-card-shadow {
    box-shadow: var(--box-shadow-M);
}

.mini-card-shadow:hover {
    box-shadow: var(--box-shadow-L);
}