// stylelint-disable declaration-no-important

////
/// Фоны
////

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    // Масштабирование
    .bg#{$infix}-cover       { background-size: cover !important; }
    .bg#{$infix}-contain     { background-size: contain !important; }
    .bg#{$infix}-contain-x   { background-size: 100% auto !important; }
    .bg#{$infix}-contain-y   { background-size: auto 100% !important; }
    .bg#{$infix}-original    { background-size: auto !important; }
    
    // Повторение
    .bg#{$infix}-repeat      { background-repeat: repeat !important; }
    .bg#{$infix}-repeat-x    { background-repeat: repeat-x !important; }
    .bg#{$infix}-repeat-y    { background-repeat: repeat-y !important; }
    .bg#{$infix}-no-repeat   { background-repeat: no-repeat !important; }

    // Позиционирование
    .bg#{$infix}-top         { background-position-y: 0% !important; }
    .bg#{$infix}-right       { background-position-x: 100% !important; }
    .bg#{$infix}-bottom      { background-position-y: 100% !important; }
    .bg#{$infix}-left        { background-position-x: 0 !important; }
    .bg#{$infix}-center      { background-position: 50% 50% !important; }
    .bg#{$infix}-center-x    { background-position-x: 50% !important; }
    .bg#{$infix}-center-y    { background-position-y: 50% !important; }
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-down($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        //Скрытие
        .bg#{$infix}-down-hide       { background-image: none !important; }
    }
}

// Скрытие изображение
@media screen and (max-width: $screen-xs-max) {
  .bg-xs-only-hide           { background-image: none !important; }
}

@media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .bg-sm-only-hide           { background-image: none !important; }
}

// Фоновый цвет
.bg-color-white              { background-color: white !important; }
.bg-color-transparent        { background-color: transparent !important; }