// Global

body {
    background: $c-bg-primary;
}

// Colors 
.bg-transparent {
    background: transparent;
}
.bg-primary {
    background: $c-bg-primary;
}
.bg-secondary {
    background: $c-bg-secondary;
    &-hover:hover {
        @include hover-bg-darken($c-bg-secondary);
    }
}
.bg-accent {
    background: $c-accent;
    &-hover:hover {
        @include hover-bg-darken($c-accent);
    }
}

@media (min-width: $md) {
    .bg-transparent-md {
        background: transparent;
    }
    .bg-primary-md {
        background: $c-bg-primary;
    }
    .bg-secondary-md {
        background: $c-bg-secondary;
        &-hover:hover {
            @include hover-bg-darken($c-bg-secondary);
        }
    }
    .bg-accent-md {
        background: $c-accent;
        &-hover:hover {
            @include hover-bg-darken($c-accent);
        }
    }
}

// Btn colors

.bg-btn-negaive {
    background: $c-bg-btn-negative;
}

.bg-btn-positive {
    background: $c-bg-btn-positive;
}