/*
 * These styles are outputted both of the frontend and backend of the site - they are used specifically for styles set in the formatter menu
 * Please note any changes you do make may also make changes to the WP backend default styles.
 * Edit with caution
 */


/* WYSIWYG Formats */
ul.toast-boxed-list { background: var(--brand-8); padding: 2rem 2rem 1rem 2rem; list-style: inside; border-radius: var(--border-radius); }
p.toast-alert-paragraph { display: flex; align-items: top; background: var(--brand-1); color: #fff; padding: 2rem; margin: 4rem 0; position: relative; border-radius: var(--border-radius); }
p.toast-alert-paragraph:before { content: ""; display: block; background: transparent url('/wp-content/themes/toast/assets/images/warning.svg') center center no-repeat; background-size: contain; height: 5rem; width: 10rem; margin-right: 2rem; border-radius: var(--border-radius); animation: shake 2.5s ease-in-out infinite; }
@keyframes shake {
    0%, 20%, 100% { transform: translateX(0); }
    2%, 6% { transform: translateX(-3px); }
    4%, 8% { transform: translateX(3px); }
}
img.toast-round-image { border-radius: 100%; }
p.small-para { font-size: 80%; }
img.toast-image-shadow { box-shadow: rgba(0, 0, 0, 0.25) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; }

.highlight {
    display: inline;
    background: var(--brand-1);
    color: #fff;
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: 1rem 0 0 var(--brand-1), -1rem 0 0 var(--brand-1);
    padding-bottom: 1rem;
    padding-top: .75rem;
    box-sizing: border-box;
    border-radius: 1rem 0;
}

.highlight + p {
    margin-top: 2rem;
}