$mobile-padding: 1rem;
$tablet-padding: 1.5rem;
$desktop-padding: 2rem;

/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
.wp-block-bokun-product-widget,
.wp-block-bokun-product-list-widget {
  padding: 2rem 0;

  &.no-padding {
    padding: 0;
  }

  &.small-padding {
    padding: $mobile-padding 0;

    @include media-breakpoint-up(sm) {
      padding: $tablet-padding 0;
    }

    @include media-breakpoint-up(xl) {
      padding: $desktop-padding 0;
    }
  }

  &.medium-padding {
    padding: $mobile-padding*1.5 0;

    @include media-breakpoint-up(sm) {
      padding: $tablet-padding*1.5 0;
    }

    @include media-breakpoint-up(xl) {
      padding: $desktop-padding*1.5 0;
    }
  }

  &.large-padding {
    padding: $mobile-padding*2.5 0;

    @include media-breakpoint-up(sm) {
      padding: $tablet-padding*2.5 0;
    }

    @include media-breakpoint-up(xl) {
      padding: $desktop-padding*2.5 0;
    }
  }
}