// Background Color

.bf-color-bg {

    // Brand

    &-brand {
        background-color: var(--bf-color-brand);
    }

    // Background

    &-ground {
        background-color: var(--bf-color-bg-ground);
    }

    &-underground {
        background-color: var(--bf-color-bg-underground);
    }

    &-highlight {
        background-color: var(--bf-color-bg-highlight);
    }

    // Action

    &-action-primary {
        background-color: var(--bf-color-bg-action-primary);
    }

    &-action-primary-hover {
        background-color: var(--bf-color-bg-action-primary-hover);
    }

    &-action-secondary {
        background-color: var(--bf-color-bg-action-secondary);
    }

    &-action-secondary-hover {
        background-color: var(--bf-color-bg-action-secondary-hover);
    }

    &-action-disabled {
        background-color: var(--bf-color-bg-action-disabled);
    }

    &-action-no-bg-hover {
        background-color: var(--bf-color-bg-action-no-bg-hover);
    }
}