@import url('../../../css/base.css');

:root {
    /* Client theme colors */
    --white: #FFFFFF;
    --black: #000000;
    --hgp-green: #9BCA3E;
    --hgp-green-active: #84AD34;
    --hgp-green-muted: #92A175;
    --light-gray: #EFEFEF;
    --dark-gray: #303030;

    /* Navigation */
    --layout-bg-color: var(--black);
    --layout-primary-color: var(--white);
    --layout-secondary-color: var(--light-gray);
    --primary: var(--hgp-green) !important;
    --primary-active: var(--hgp-green-active) !important;
    --primary-disabled: var(--hgp-green-muted) !important;

    /* Module progress bar */
    --progress-bar-not-started: var(--hgp-green);
    --progress-bar-in-progress: var(--hgp-green);
    --progress-bar-completed: var(--hgp-green);
    --progress-bar-color: var(--black);
    --progress-bar-step-color: var(--hgp-green);
}

i.text-primary {
    color: var(--primary) !important;
}

#bundle-progress-card #bundle-name {
    color: var(--white);
}

#bundle-progress-card.completed i#bundle-complete.fa.fa-check-circle.fa-lg.text-complete {
    color: var(--black); /* module list page */
}

#bundle-progress-card.completed.activity-display i#bundle-complete.fa.fa-check-circle.fa-lg.text-complete {
    color: var(--white); /* activities pages */
}

#bundle-list #bundle-progress-card.completed i#bundle-complete.fa.fa-check-circle.fa-lg.text-complete {
    color: var(--hgp-green); /* bundle list pages */
}

.nav-active::after {
    background-color: var(--hgp-green) !important;
}

/* for bundle list page only */
#bundle-list #bundle-progress-card {
    --progress-bar-not-started: var(--light-gray);
    --progress-bar-in-progress: var(--light-gray);
    --progress-bar-completed: var(--light-gray);

    border-radius: 23px;
}

#bundle-list #bundle-progress-card #bundle-name {
    color: var(--black);
}

.btn.btn-primary,
.btn.btn-outline-light {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn.btn-primary:disabled,
.btn.btn-outline-light:disabled,
.btn.btn-primary:disabled:hover,
.btn.btn-outline-light:disabled:hover {
    color: var(--white);
    background-color: var(--primary-disabled);
    border-color: var(--primary-disabled);
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:not(:disabled, .disabled):active,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:not(:disabled, .disabled):active,
.btn.btn-outline-light:hover,
.btn.btn-outline-light:active,
.btn.btn-outline-light:focus,
.btn.btn-outline-light:not(:disabled, .disabled):active {
    color: var(--white);
    background-color: var(--primary-active);
    border-color: var(--primary-active);
}

.btn.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn.btn-outline-primary:hover {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary);
}

#activity-item #activity-label i.fa {
    padding: 4px;
    color: var(--white);
    background-color: var(--hgp-green);
}

#activity-item i.fa.text-complete,
#module-name .text-complete {
    color: var(--primary, var(--hgp-green));
    background-color: transparent;
}

/* badge page */
#badge-page .card-header.card-header-special {
    color: var(--white);
    background-color: var(--hgp-green) !important;
}