/*
 * Healthier's own layer, applied on top of Bootstrap and the template styles.
 * Keep Bootstrap untouched so it can be upgraded cleanly; put every override here.
 */

:root {
    --healthier-green: #1b5e3f;
    --healthier-green-dark: #144832;
}

.btn-primary {
    --bs-btn-bg: var(--healthier-green);
    --bs-btn-border-color: var(--healthier-green);
    --bs-btn-hover-bg: var(--healthier-green-dark);
    --bs-btn-hover-border-color: var(--healthier-green-dark);
    --bs-btn-active-bg: var(--healthier-green-dark);
    --bs-btn-active-border-color: var(--healthier-green-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--healthier-green);
    --bs-btn-border-color: var(--healthier-green);
    --bs-btn-hover-bg: var(--healthier-green);
    --bs-btn-hover-border-color: var(--healthier-green);
    --bs-btn-active-bg: var(--healthier-green);
    --bs-btn-active-border-color: var(--healthier-green);
}

.page .sidebar {
    background-image: linear-gradient(180deg, var(--healthier-green) 0%, var(--healthier-green-dark) 70%);
}

/* Portion buttons are a primary control on touch devices, so give them room. */
.btn-group .btn {
    min-width: 7.5rem;
}

@media (max-width: 480px) {
    .btn-group {
        display: flex;
        width: 100%;
    }

    .btn-group .btn {
        min-width: 0;
        flex: 1 1 0;
    }
}