[Summary view] [Print] [Text view]

   1  /* !Block styles */
   2  
   3  
   4  // Default block margin and alignment rules.
   5  // These are replicated inside of the Group block
   6  // so that child blocks in there appear the same way.
   7  .entry .entry-content > *,
   8  .entry .entry-summary > *,
   9  .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
  10  .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
  11      margin: 32px 0;
  12      max-width: 100%;
  13  
  14      @include postContentMaxWidth();
  15  
  16      @include media(tablet) {
  17          margin: 32px 0;
  18      }
  19  
  20      &.alignwide {
  21          margin-left: auto;
  22          margin-right: auto;
  23          clear: both;
  24  
  25          @include media(tablet) {
  26              width: 100%;
  27              max-width: 100%;
  28          }
  29      }
  30  
  31      &.alignfull {
  32          position: relative;
  33          left: -#{$size__spacing-unit };
  34          width: calc( 100% + (2 * #{$size__spacing-unit}));
  35          max-width: calc( 100% + (2 * #{$size__spacing-unit}));
  36          clear: both;
  37  
  38          @include media(tablet) {
  39              margin-top: calc(2 * #{$size__spacing-unit});
  40              margin-bottom: calc(2 * #{$size__spacing-unit});
  41              left: calc( -12.5% - 75px );
  42              width: calc( 125% + 150px );
  43              max-width: calc( 125% + 150px );
  44          }
  45      }
  46  
  47      &.alignleft {
  48          /*rtl:ignore*/
  49          float: left;
  50          max-width: calc(5 * (100vw / 12));
  51          margin-top: 0;
  52          margin-left: 0;
  53          /*rtl:ignore*/
  54          margin-right: $size__spacing-unit;
  55  
  56          @include media(tablet) {
  57              max-width: calc(4 * (100vw / 12));
  58              /*rtl:ignore*/
  59              margin-right: calc(2 * #{$size__spacing-unit});
  60          }
  61      }
  62  
  63      &.alignright {
  64          /*rtl:ignore*/
  65          float: right;
  66          max-width: calc(5 * (100vw / 12));
  67          margin-top: 0;
  68          margin-right: 0;
  69          /*rtl:ignore*/
  70          margin-left: $size__spacing-unit;
  71  
  72          @include media(tablet) {
  73              max-width: calc(4 * (100vw / 12));
  74              margin-right: 0;
  75              /*rtl:ignore*/
  76              margin-left: calc(2 * #{$size__spacing-unit});
  77          }
  78      }
  79      &.aligncenter {
  80          margin-left: auto;
  81          margin-right: auto;
  82  
  83          @include postContentMaxWidth();
  84  
  85          @include media(tablet) {
  86              margin-left: 0;
  87              margin-right: 0;
  88          }
  89      }
  90  }
  91  
  92  .entry .entry-content > *,
  93  .entry .entry-summary > * {
  94  
  95      > *:first-child {
  96          margin-top: 0;
  97      }
  98  
  99      > *:last-child {
 100          margin-bottom: 0;
 101      }
 102  }
 103  
 104  /*
 105   * Unset nested content selector styles
 106   * - Prevents layout styles from cascading too deeply
 107   * - helps with plugin compatibility
 108   */
 109  .entry .entry-content,
 110  .entry .entry-summary {
 111  
 112      .entry-content,
 113      .entry-summary,
 114      .entry {
 115          margin: inherit;
 116          max-width: inherit;
 117          padding: inherit;
 118  
 119          @include media(tablet) {
 120              margin: inherit;
 121              max-width: inherit;
 122              padding: inherit;
 123          }
 124      }
 125  }
 126  
 127  .entry .entry-content {
 128  
 129      //! Paragraphs
 130      p.has-background {
 131          padding: 20px 30px;
 132      }
 133  
 134      //! Audio
 135      .wp-block-audio {
 136  
 137          width: 100%;
 138  
 139          audio {
 140              display: block;
 141              width: 100%;
 142          }
 143  
 144          &.alignleft audio,
 145          &.alignright audio {
 146  
 147              max-width: (0.33 * $mobile_width);
 148  
 149              @include media(tablet) {
 150                  max-width: (0.5 * $tablet_width);
 151              }
 152  
 153              @include media(wide) {
 154                  max-width: (0.33 * $desktop_width);
 155              }
 156          }
 157      }
 158  
 159      //! Video
 160      .wp-block-video {
 161  
 162          video {
 163              width: 100%;
 164          }
 165      }
 166  
 167      //! Buttons
 168      .wp-block-buttons {
 169          line-height: $font__line-height-heading;
 170      }
 171  
 172      .wp-block-button {
 173  
 174          .wp-block-button__link {
 175              @include button-transition;
 176              border: none;
 177              font-size: $font__size-sm;
 178              @include font-family( $font__heading );
 179              box-sizing: border-box;
 180              font-weight: bold;
 181              text-decoration: none;
 182              padding: ($size__spacing-unit * .76) $size__spacing-unit;
 183              outline: none;
 184  
 185              &:not(.has-background) {
 186                  background-color: $color__background-button;
 187              }
 188  
 189              &:not(.has-text-color) {
 190                  color: white;
 191              }
 192  
 193              &:hover {
 194                  color: white;
 195                  background: $color__background-button-hover;
 196                  cursor: pointer;
 197                  &:not(.has-background) {
 198                      background: $color__background-button-hover;
 199                  }
 200              }
 201  
 202              &:focus {
 203                  color: white;
 204                  background: $color__background-button-hover;
 205                  outline: thin dotted;
 206                  outline-offset: -4px;
 207                  &:not(.has-background) {
 208                      background: $color__background-button-hover;
 209                  }
 210              }
 211          }
 212  
 213          &:not(.is-style-squared) .wp-block-button__link {
 214              border-radius: 5px;
 215          }
 216  
 217          &.is-style-outline .wp-block-button__link,
 218          &.is-style-outline .wp-block-button__link:focus,
 219          &.is-style-outline .wp-block-button__link:active {
 220              @include button-all-transition;
 221              border-width: 2px;
 222              border-style: solid;
 223  
 224              &:not(.has-background) {
 225                  background: transparent;
 226              }
 227  
 228              &:not(.has-text-color) {
 229                  color: $color__background-button;
 230                  border-color: currentColor;
 231              }
 232          }
 233  
 234          &.is-style-outline .wp-block-button__link:hover {
 235              color: white;
 236              border-color: $color__background-button-hover;
 237              &:not(.has-background) {
 238                  color: $color__background-button-hover;
 239              }
 240          }
 241      }
 242  
 243      .wp-block-buttons,
 244      .wp-block-button {
 245  
 246          &.has-custom-font-size .wp-block-button__link {
 247              font-size: 1em;
 248          }
 249  
 250          &[style*="font-weight"] .wp-block-button__link {
 251              font-weight: inherit;
 252          }
 253  
 254          &[style*="text-decoration"] .wp-block-button__link {
 255              text-decoration: inherit;
 256          }
 257      }
 258  
 259      //! Latest posts, categories, archives
 260      .wp-block-archives,
 261      .wp-block-categories,
 262      .wp-block-latest-posts {
 263          padding: 0;
 264          list-style: none;
 265  
 266          li > a {
 267              @include font-family( $font__heading );
 268              font-size: calc(#{$font__size_base} * #{$font__size-ratio});
 269              font-weight: bold;
 270              line-height: $font__line-height-heading;
 271              text-decoration: none;
 272          }
 273      }
 274  
 275      .wp-block-archives,
 276      .wp-block-categories {
 277  
 278          &.aligncenter {
 279              text-align: center;
 280          }
 281      }
 282  
 283      //! Latest categories
 284      .wp-block-categories {
 285  
 286          ul {
 287              padding-top: ( .75 * $size__spacing-unit );
 288          }
 289  
 290          li ul {
 291              list-style: none;
 292              padding-left: 0;
 293          }
 294  
 295          @include nestedSubMenuPadding();
 296      }
 297  
 298      //! Latest posts
 299      .wp-block-latest-posts {
 300  
 301          .wp-block-latest-posts__post-date {
 302              @include font-family( $font__heading );
 303              font-size: $font__size-xs;
 304              color: $color__text-light;
 305              line-height: 1.2;
 306          }
 307  
 308          .wp-block-latest-posts__post-full-content,
 309          .wp-block-latest-posts__post-excerpt {
 310              margin-top: $size__spacing-unit;
 311              margin-bottom: $size__spacing-unit;
 312          }
 313  
 314          li {
 315              padding-bottom: ( .5 * $size__spacing-unit );
 316  
 317              &.menu-item-has-children,
 318              &:last-child {
 319                  padding-bottom: 0;
 320              }
 321  
 322              :not(:last-child) .wp-block-latest-posts__post-excerpt {
 323                  padding-bottom: ( .5 * $size__spacing-unit );
 324              }
 325          }
 326  
 327          &.is-grid li {
 328              border-top: 2px solid $color__border;
 329              padding-top: (1 * $size__spacing-unit);
 330              margin-bottom: (2 * $size__spacing-unit);
 331              a {
 332                  &:after {
 333                      content: '';
 334                  }
 335              }
 336              &:last-child {
 337                  margin-bottom: auto;
 338                  a:after {
 339                      content: '';
 340                  }
 341              }
 342          }
 343      }
 344  
 345      //! Latest preformatted text
 346      .wp-block-preformatted {
 347          font-size: $font__size-xs;
 348          line-height: 1.8;
 349          padding: $size__spacing-unit;
 350      }
 351  
 352      //! Poetry (Verse)
 353      .wp-block-verse {
 354          @include font-family( $font__body );
 355          font-size: $font__size_base;
 356          line-height: 1.8;
 357      }
 358  
 359      //! Paragraphs
 360      .has-drop-cap {
 361          &:not(:focus):first-letter {
 362              @include font-family( $font__heading );
 363              font-size: $font__size-xxxl;
 364              line-height: 1;
 365              font-weight: bold;
 366              margin: 0 0.25em 0 0;
 367  
 368              @-moz-document url-prefix()  {
 369                  & {
 370                      margin-top: 0.2em;
 371                  }
 372              }
 373          }
 374      }
 375  
 376      //! Pullquote
 377      .wp-block-pullquote {
 378          color: $color__text-main;
 379          border-color: transparent;
 380          border-width: 2px;
 381          padding: $size__spacing-unit;
 382          font-size: 1em;
 383  
 384          blockquote {
 385              border: none;
 386              margin-top: calc(4 * #{ $size__spacing-unit});
 387              margin-bottom: calc(4.33 * #{ $size__spacing-unit});
 388              margin-right: 0;
 389              padding-left: 0;
 390          }
 391  
 392          p {
 393              font-size: $font__size-lg;
 394              font-style: italic;
 395              line-height: 1.3;
 396              margin-bottom: 0.5em;
 397              margin-top: 0.5em;
 398  
 399              em {
 400                  font-style: normal;
 401              }
 402  
 403              @include media(tablet) {
 404                  font-size: $font__size-xl;
 405              }
 406          }
 407  
 408          cite {
 409              display: block;
 410              @include font-family( $font__heading );
 411              line-height: 1.6;
 412              text-transform: none;
 413              color: $color__text-light;
 414  
 415              /*
 416               * This requires a rem-based font size calculation instead of our normal em-based one,
 417               * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
 418               */
 419              font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
 420          }
 421  
 422          &.alignleft,
 423          &.alignright {
 424              width: 100%;
 425              padding: 0;
 426  
 427              blockquote {
 428                  margin: $size__spacing-unit 0;
 429                  padding: 0;
 430                  text-align: left;
 431                  max-width: 100%;
 432  
 433                  p:first-child {
 434                      margin-top: 0;
 435                  }
 436              }
 437          }
 438  
 439          &.has-text-color cite {
 440              color: inherit;
 441          }
 442  
 443          &.is-style-solid-color {
 444              background-color: $color__link;
 445              padding-left: 0;
 446              padding-right: 0;
 447  
 448              @include media(tablet) {
 449                  padding-left: 10%;
 450                  padding-right: 10%;
 451              }
 452  
 453              p {
 454                  font-size: $font__size-lg;
 455                  line-height: 1.3;
 456                  margin-bottom: 0.5em;
 457                  margin-top: 0.5em;
 458  
 459                  @include media(tablet) {
 460                      font-size: $font__size-xl;
 461                  }
 462              }
 463  
 464              a {
 465                  color: $color__background-body;
 466              }
 467  
 468              cite {
 469                  color: inherit;
 470              }
 471  
 472              blockquote {
 473                  max-width: 100%;
 474                  color: $color__background-body;
 475                  padding-left: 0;
 476                  margin-left: $size__spacing-unit;
 477                  margin-right: $size__spacing-unit;
 478  
 479                  &.has-text-color p,
 480                  &.has-text-color a,
 481                  &.has-primary-color,
 482                  &.has-secondary-color,
 483                  &.has-dark-gray-color,
 484                  &.has-light-gray-color,
 485                  &.has-white-color {
 486                      color: inherit;
 487                  }
 488  
 489                  @include media(tablet) {
 490                      margin-left: 0;
 491                      margin-right: 0;
 492                  }
 493              }
 494  
 495              &.alignright,
 496              &.alignleft {
 497  
 498                  @include media(tablet) {
 499                      padding: $size__spacing-unit calc(2 * #{$size__spacing-unit});
 500                  }
 501              }
 502  
 503              &.alignfull {
 504  
 505                  @include media(tablet) {
 506                      padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 507                      padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 508                  }
 509              }
 510          }
 511      }
 512  
 513      //! Blockquote
 514      .wp-block-quote {
 515  
 516          &:not(.is-large),
 517          &:not(.is-style-large) {
 518              border-width: 2px;
 519              border-color: $color__link;
 520              padding-top: 0;
 521              padding-bottom: 0;
 522          }
 523  
 524          p {
 525              font-size: 1em;
 526              font-style: normal;
 527              line-height: 1.8;
 528          }
 529  
 530          cite {
 531              /*
 532               * This requires a rem-based font size calculation instead of our normal em-based one,
 533               * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
 534               */
 535              font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
 536          }
 537  
 538          &.is-large,
 539          &.is-style-large {
 540              margin: $size__spacing-unit 0;
 541              padding: 0;
 542              border-left: none;
 543  
 544              p {
 545                  font-size: $font__size-lg;
 546                  line-height: 1.4;
 547                  font-style: italic;
 548              }
 549  
 550              cite,
 551              footer {
 552                  /*
 553                   * This requires a rem-based font size calculation instead of our normal em-based one,
 554                   * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
 555                   */
 556                  font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
 557              }
 558  
 559              @include media(tablet) {
 560                  margin: $size__spacing-unit 0;
 561                  padding: $size__spacing-unit 0;
 562  
 563                  p {
 564                      font-size: $font__size-lg;
 565                  }
 566              }
 567          }
 568      }
 569  
 570      //! Image
 571      .wp-block-image {
 572          max-width: 100%;
 573  
 574          img {
 575              display: block;
 576          }
 577  
 578          // If an image does not have a left/center/right alignment,
 579          // it's a direct child of .wp-block-image.  If it has no other
 580          // alignment added, we want to make sure the image and its
 581          // caption do not extend beyond the width of the text column.
 582          &:not(.alignwide):not(.alignfull) > img,
 583          &:not(.alignwide):not(.alignfull) > a > img,
 584          &:not(.alignwide):not(.alignfull) > img + figcaption,
 585          &:not(.alignwide):not(.alignfull) > a + figcaption {
 586              @include postContentMaxWidth();
 587          }
 588  
 589          .aligncenter {
 590  
 591              @include postContentMaxWidth();
 592  
 593              @include media(tablet) {
 594                  margin: 0;
 595                  width: $size__site-tablet-content;
 596  
 597                  img {
 598                      margin: 0 auto;
 599                  }
 600              }
 601  
 602              @include media(desktop) {
 603                  width: $size__site-desktop-content;
 604  
 605                  img {
 606                      margin: 0 auto;
 607                  }
 608              }
 609          }
 610  
 611          &.alignfull img {
 612              width: 100vw;
 613              max-width: calc( 100% + (2 * #{$size__spacing-unit}));
 614  
 615              @include media(tablet) {
 616                  max-width: calc( 125% + 150px );
 617                  margin-left: auto;
 618                  margin-right: auto;
 619              }
 620          }
 621      }
 622  
 623      //! Cover Image
 624      .wp-block-cover-image,
 625      .wp-block-cover {
 626          position: relative;
 627          min-height: 430px;
 628          padding: $size__spacing-unit;
 629  
 630          @include media(tablet) {
 631              padding: $size__spacing-unit 10%;
 632          }
 633  
 634          .wp-block-cover-image-text,
 635          .wp-block-cover-text,
 636          h2 {
 637              @include font-family( $font__heading );
 638              font-size: $font__size-lg;
 639              font-weight: bold;
 640              line-height: 1.25;
 641              padding: 0;
 642              color: #fff;
 643  
 644              @include media(tablet) {
 645                  font-size: $font__size-xl;
 646                  max-width: 100%;
 647              }
 648          }
 649  
 650          &.alignleft,
 651          &.alignright {
 652              width: 100%;
 653  
 654              @include media(tablet) {
 655                  padding: $size__spacing-unit calc(2 * #{$size__spacing-unit});
 656              }
 657          }
 658  
 659          &.alignfull {
 660  
 661              .wp-block-cover-image-text,
 662              .wp-block-cover-text,
 663              h2 {
 664                  @include postContentMaxWidth();
 665              }
 666  
 667              @include media(tablet) {
 668                  padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 669                  padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
 670  
 671                  .wp-block-cover-image-text,
 672                  .wp-block-cover-text,
 673                  h2 {
 674                      padding: 0;
 675                  }
 676              }
 677          }
 678      }
 679  
 680      //! Galleries
 681      .wp-block-gallery {
 682          list-style-type: none;
 683          padding-left: 0;
 684  
 685          .blocks-gallery-image:last-child,
 686          .blocks-gallery-item:last-child {
 687              margin-bottom: 16px;
 688          }
 689  
 690          figcaption a {
 691              color: #fff;
 692          }
 693      }
 694  
 695      //! Captions
 696      .wp-block-audio figcaption,
 697      .wp-block-video figcaption,
 698      .wp-block-image figcaption,
 699      .wp-block-gallery .blocks-gallery-image figcaption,
 700      .wp-block-gallery .blocks-gallery-item figcaption {
 701          font-size: $font__size-xs;
 702          @include font-family( $font__heading );
 703          line-height: $font__line-height-pre;
 704          margin: 0;
 705          padding: ( $size__spacing-unit * .5 );
 706          text-align: center;
 707      }
 708  
 709      //! Separator
 710      .wp-block-separator,
 711      hr {
 712          background-color: $color__text-light;
 713          border: 0;
 714          height: 2px;
 715          margin-bottom: (2 * $size__spacing-unit);
 716          margin-top: (2 * $size__spacing-unit);
 717          max-width: 2.25em;
 718          text-align: left;
 719  
 720          &:not(.wp-block-separator) {
 721              max-width: 100%;
 722              @include postContentMaxWidth();
 723          }
 724  
 725          &.is-style-wide {
 726              max-width: 100%;
 727              @include postContentMaxWidth();
 728          }
 729  
 730          &.is-style-dots {
 731              background-color: inherit;
 732              border: inherit;
 733              height: inherit;
 734              text-align: center;
 735              max-width: 100%;
 736              @include postContentMaxWidth();
 737  
 738              // Only apply the default dot color if there's no separator color specified.
 739              &:not(.has-text-color):not(.has-background) {
 740                  color: $color__text-light;
 741              }
 742  
 743              &:before {
 744                  font-size: $font__size-lg;
 745                  letter-spacing: $font__size-sm;
 746                  padding-left: $font__size-sm;
 747              }
 748          }
 749  
 750          & + h1,
 751          & + h2 {
 752  
 753              &:before {
 754                  /* Remove duplicate rule-line when a separator is followed by an H1 or H2 */
 755                  display: none;
 756              }
 757          }
 758      }
 759  
 760      //! Twitter Embed
 761      .wp-block-embed-twitter {
 762          word-break: break-word;
 763      }
 764  
 765      //! Table
 766      .wp-block-table {
 767  
 768          th,
 769          td {
 770              border-color: $color__text-light;
 771          }
 772      }
 773  
 774      //! File
 775      .wp-block-file {
 776          @include font-family( $font__heading );
 777  
 778          .wp-block-file__button {
 779              display: table;
 780              @include button-transition;
 781              border: none;
 782              border-radius: 5px;
 783              background: $color__background-button;
 784              font-size: $font__size-base;
 785              @include font-family( $font__heading );
 786              line-height: $font__line-height-heading;
 787              text-decoration: none;
 788              font-weight: bold;
 789              padding: ($size__spacing-unit * .75) $size__spacing-unit;
 790              color: #fff;
 791              margin-left: 0;
 792              margin-top: calc(0.75 * #{$size__spacing-unit});
 793  
 794              @include media(desktop) {
 795                  font-size: $font__size-base;
 796                  padding: ($size__spacing-unit * .875) ($size__spacing-unit * 1.5);
 797              }
 798  
 799              &:hover {
 800                  background: $color__background-button-hover;
 801                  cursor: pointer;
 802              }
 803  
 804              &:focus {
 805                  background: $color__background-button-hover;
 806                  outline: thin dotted;
 807                  outline-offset: -4px;
 808              }
 809          }
 810  
 811          &.aligncenter .wp-block-file__button {
 812              margin-left: auto;
 813              margin-right: auto;
 814          }
 815  
 816          &.alignright .wp-block-file__button {
 817              margin-left: auto;
 818              margin-right: 0;
 819          }
 820      }
 821  
 822      //! Code
 823      .wp-block-code {
 824          border-radius: 0;
 825  
 826          code {
 827              font-size: $font__size-md;
 828              white-space: pre-wrap;
 829              word-break: break-word;
 830          }
 831      }
 832  
 833      //! Columns
 834      .wp-block-columns {
 835  
 836          .wp-block-column > * {
 837  
 838              &:first-child {
 839                  margin-top: 0;
 840              }
 841  
 842              &:last-child {
 843                  margin-bottom: 0;
 844              }
 845          }
 846  
 847          // Ensure images do not expand beyond the column.
 848          .wp-block-image:not(.alignwide):not(.alignfull) > img,
 849          .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
 850          .wp-block-image > img:not(.alignwide):not(.alignfull),
 851          .wp-block-image > figure {
 852  
 853              @include media(tablet) {
 854                  max-width: 100%;
 855              }
 856  
 857              @include media(desktop) {
 858                  max-width: 100%;
 859              }
 860          }
 861  
 862          @include media(tablet) {
 863              flex-wrap: nowrap;
 864  
 865              .wp-block-column:not(:first-child) {
 866                  margin-left: 32px;
 867              }
 868          }
 869      }
 870  
 871      //! Group
 872      .wp-block-group {
 873  
 874          // When the Group block is standard/wide, we need to prevent full-aligned
 875          // child blocks from expanding out of their container.
 876          &:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
 877          &:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
 878  
 879              @include media(tablet) {
 880                  left: 0;
 881                  max-width: 100%;
 882              }
 883          }
 884  
 885          // The full-width Group block's inner container should mimic .entry-content styles.
 886          &.alignfull > .wp-block-group__inner-container {
 887              max-width: calc(100% - (2 * #{ $size__spacing-unit }));
 888              margin: 0 $size__spacing-unit;
 889  
 890              @include media(tablet) {
 891                  max-width: 80%;
 892                  margin: 0 10%;
 893                  padding: 0 60px;
 894              }
 895          }
 896  
 897          // Group block with a colored background.
 898          &.has-background {
 899              padding: $size__spacing-unit;
 900              margin-top: 0;
 901              margin-bottom: 0;
 902  
 903              // Remove the top and bottom margins of inner blocks.
 904              .wp-block-group__inner-container {
 905  
 906                  > *:first-child {
 907                      margin-top: 0;
 908                  }
 909  
 910                  > *:last-child {
 911                      margin-bottom: 0;
 912                  }
 913              }
 914  
 915              // If the Group block is full-width, it does not need this extra padding.
 916              &.alignfull {
 917                  padding-left: 0;
 918                  padding-right: 0;
 919  
 920                  @include media(tablet) {
 921                      padding-top: $size__spacing-unit;
 922                      padding-bottom: $size__spacing-unit;
 923                  }
 924              }
 925  
 926              // Full-aligned child blocks should take up the maximum width available in their container.
 927              &:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
 928                  width: 100%;
 929                  max-width: 100%;
 930  
 931                  @include media(tablet) {
 932                      width: calc( 100% + #{$size__spacing-unit * 2} );
 933                      max-width: calc( 100% + #{$size__spacing-unit * 2} );
 934                      margin-left: -#{$size__spacing-unit};
 935                  }
 936              }
 937          }
 938      }
 939  
 940      //! Latest Comments
 941      .wp-block-latest-comments {
 942  
 943          .wp-block-latest-comments__comment-meta {
 944              @include font-family( $font__heading );
 945              font-weight: bold;
 946  
 947              .wp-block-latest-comments__comment-date {
 948                  font-weight: normal;
 949              }
 950          }
 951  
 952          .wp-block-latest-comments__comment,
 953          .wp-block-latest-comments__comment-date,
 954          .wp-block-latest-comments__comment-excerpt p {
 955              font-size: inherit;
 956          }
 957  
 958          &.has-dates {
 959  
 960              .wp-block-latest-comments__comment-date {
 961                  font-size: $font__size-xs;
 962              }
 963          }
 964      }
 965  
 966      //! Font Sizes
 967      .has-small-font-size {
 968          font-size: $font__size-sm;
 969      }
 970  
 971      .has-normal-font-size {
 972          font-size: $font__size-md;
 973      }
 974  
 975      .has-large-font-size {
 976          font-size: $font__size-lg;
 977      }
 978  
 979      .has-huge-font-size {
 980          font-size: $font__size-xl;
 981      }
 982  
 983      //! Custom background colors
 984      .has-primary-background-color,
 985      .has-secondary-background-color,
 986      .has-dark-gray-background-color,
 987      .has-light-gray-background-color {
 988  
 989          // Use white text against these backgrounds by default.
 990          color: $color__background-body;
 991  
 992          > p,
 993          > h1,
 994          > h2,
 995          > h3,
 996          > h4,
 997          > h5,
 998          > h6,
 999          > a {
1000              color: $color__background-body;
1001          }
1002      }
1003  
1004      .has-white-background-color {
1005          color: $color__text-main;
1006  
1007          // Use dark gray text against this background by default.
1008          > p,
1009          > h1,
1010          > h2,
1011          > h3,
1012          > h4,
1013          > h5,
1014          > h6,
1015          > a {
1016              color: $color__text-main;
1017          }
1018      }
1019  
1020      .has-primary-background-color,
1021      .wp-block-pullquote.is-style-solid-color.has-primary-background-color {
1022          background-color: $color__link;
1023      }
1024  
1025      .has-secondary-background-color,
1026      .wp-block-pullquote.is-style-solid-color.has-secondary-background-color {
1027          background-color: $color__border-link-hover;
1028      }
1029  
1030      .has-dark-gray-background-color,
1031      .wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color {
1032          background-color: $color__text-main;
1033      }
1034  
1035      .has-light-gray-background-color,
1036      .wp-block-pullquote.is-style-solid-color.has-light-gray-background-color {
1037          background-color: $color__text-light;
1038      }
1039  
1040      .has-white-background-color,
1041      .wp-block-pullquote.is-style-solid-color.has-white-background-color {
1042          background-color: #FFF;
1043      }
1044  
1045      //! Custom foreground colors
1046      .has-primary-color,
1047      .wp-block-pullquote blockquote.has-primary-color,
1048      .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color,
1049      .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color > p {
1050          color: $color__link;
1051      }
1052  
1053      .has-secondary-color,
1054      .wp-block-pullquote blockquote.has-secondary-color,
1055      .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color,
1056      .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color > p {
1057          color: $color__border-link-hover;
1058      }
1059  
1060      .has-dark-gray-color,
1061      .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color,
1062      .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color > p {
1063          color: $color__text-main;
1064      }
1065  
1066      .has-light-gray-color,
1067      .wp-block-pullquote blockquote.has-light-gray-color,
1068      .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color,
1069      .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color > p {
1070          color: $color__text-light;
1071      }
1072  
1073      .has-white-color,
1074      .wp-block-pullquote blockquote.has-white-color,
1075      .wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
1076          color: #FFF;
1077      }
1078  }