[Summary view] [Print] [Text view]

   1  .wp-block-group {
   2      // Start IE clearfix.
   3      // This hack is only necessary because we want to support IE11.
   4      // If we don't want to support IE11, then "display: flow-root" would suffice.
   5      display: block;
   6      clear: both;
   7  
   8      display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties
   9  
  10      &:before,
  11      &:after {
  12          content: "";
  13          display: block;
  14          clear: both;
  15      }
  16      // End IE clearfix.
  17  
  18      .wp-block-group__inner-container {
  19          margin-left: auto;
  20          margin-right: auto;
  21  
  22          > * {
  23              margin-top: calc(0.666 * var(--global--spacing-vertical));
  24              margin-bottom: calc(0.666 * var(--global--spacing-vertical));
  25  
  26              &.alignfull {
  27                  @extend %responsive-alignfull-width-mobile;
  28              }
  29  
  30              @include media(mobile) {
  31                  margin-top: var(--global--spacing-vertical);
  32                  margin-bottom: var(--global--spacing-vertical);
  33              }
  34  
  35              &:first-child {
  36                  margin-top: 0;
  37              }
  38  
  39              &:last-child {
  40                  margin-bottom: 0;
  41              }
  42          }
  43      }
  44  
  45      &.has-background {
  46          padding: calc(0.666 * var(--global--spacing-vertical));
  47  
  48          @include media(mobile) {
  49              padding: var(--global--spacing-vertical);
  50          }
  51      }
  52  
  53      // Block Styles
  54      &.is-style-twentytwentyone-border {
  55          border: calc(3 * var(--separator--height)) solid var(--global--color-border);
  56          padding: var(--global--spacing-vertical);
  57      }
  58  
  59      // Adjust alignfull items to account for left and right padding.
  60      &.has-background,
  61      &.is-style-twentytwentyone-border {
  62  
  63          .wp-block-group__inner-container > .alignfull,
  64          .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
  65              max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
  66              width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
  67              margin-left: calc(-1 * var(--global--spacing-vertical));
  68          }
  69      }
  70  }