felixarntz/theme-boilerplate

.wp-block-quote {
    cite,
    footer {
        @include font-size(0.85);

        margin-top: 1em;
        color: $color__text-quote-footer;
        font-style: normal;
    }
}

.wp-block-pullquote {
    padding: ($padding_horizontal * 3);
    border-top: 4px solid $color__border-quote;
    border-bottom: 4px solid $color__border-quote;
    border-left: none;
    color: $color__text-quote;
    text-align: center;

    > p {
        @include font-size(1.5);

        line-height: 1.6;
        font-weight: 900;
    }

    cite,
    footer {
        @include font-size(0.8);

        position: relative;
        color: $color__text-quote-footer;
        font-weight: 900;
        text-transform: uppercase;
    }
}

.wp-block-separator {
    border: 0;
    border-bottom: 2px solid $color__border-separator;
    max-width: 8rem;

    &.is-style-wide {
        max-width: none;
    }

    &.is-style-dots {
        max-width: none;
        border-bottom: 0;

        &:before {
            color: $color__border-separator;
        }
    }
}

.wp-block-button {
    margin-bottom: $spacing_vertical;

    .wp-block-button__link {
        padding: $padding_vertical $padding_horizontal;
        color: $color__text-button;
        background-color: $color__background-button;
        border-radius: $border-radius;
        border: 0;
        text-decoration: none;
        appearance: none;

        &:hover,
        &:focus {
            color: $color__text-button;
            background-color: $color__background-button-hover;
        }
    }

    &.is-style-primary {
        .wp-block-button__link {
            color: $color__text-button-primary;
            background-color: $color__background-button-primary;

            &:hover,
            &:focus {
                color: $color__text-button-primary;
                background-color: $color__background-button-primary-hover;
            }
        }
    }
}

.wp-block-gallery {
    padding-left: 0;
    list-style: none;

    &.aligncenter .blocks-gallery-image,
    &.aligncenter .blocks-gallery-item,
    &.alignleft .blocks-gallery-image,
    &.alignleft .blocks-gallery-item,
    &.alignright .blocks-gallery-image,
    &.alignright .blocks-gallery-item,
    .blocks-gallery-image,
    .blocks-gallery-item {
        margin: ($spacing_vertical * 0.5);
    }
}

.wp-block-cover-image {
    width: auto;
    height: 25rem;
    margin-bottom: $spacing_vertical;
}

.wp-block-image,
.wp-block-embed {
    &.alignwide,
    &.alignfull {
        text-align: center;
    }
}

.wp-block-image img {
    display: block;
    width: 100%;
}

html:not(.amp) .wp-block-embed {
    position: relative;
    height: 0;
    padding-top: 56.25%;

    &.alignwide {
        body.no-sidebar .entry-header &,
        body.no-sidebar .entry-content &,
        body.no-sidebar .entry-footer &,
        body.mce-content-body & {
            @media (min-width: ($site_maxwidth-text + $padding_horizontal * 2)) {
                padding-top: calc((100vw - #{$padding_horizontal} * 2) * 0.5625);
            }

            @media (min-width: ($site_maxwidth)) {
                padding-top: calc((#{$site_maxwidth} - #{$padding_horizontal} * 2) * 0.5625);
            }
        }
    }

    &.alignfull {
        body.no-sidebar .entry-header &,
        body.no-sidebar .entry-content &,
        body.no-sidebar .entry-footer &,
        body.mce-content-body & {
            @media (min-width: ($site_maxwidth-text + $padding_horizontal * 2)) {
                padding-top: calc(100vw * 0.5625);
            }
        }

        body.wrapped-layout.no-sidebar .entry-header &,
        body.wrapped-layout.no-sidebar .entry-content &,
        body.wrapped-layout.no-sidebar .entry-footer & {
            @media (min-width: ($site_maxwidth-text + $padding_horizontal * 2)) {
                padding-top: calc(#{$site_maxwidth} * 0.5625);
            }
        }
    }

    > iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

p.wp-block-subhead {
    @include font-size(1.1);

    font-style: italic;
    opacity: 1;
    color: $color__text-subhead;
}