html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
a,
ol,
ul,
li,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

ul,
ol {
    padding-left: var(--space-xl);
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

*::selection {
    background-color: var(--color-typo-ghost);
    opacity: 1;
}

.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}
.align-center {
    text-align: center;
}
.align-justify {
    text-align: justify;
}

img {
    max-width: 100%;
    height: auto;
}

img.align-right {
    display: block;
    margin-left: auto;
}

img.align-center {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

blockquote {
    display: block;
    padding: var(--space-m, 16px);
    white-space: pre-wrap;
    border: 1px solid var(--color-control-bg-border-disable);
    border-radius: var(--control-radius);
    background: var(--color-control-bg-disable);
}

a {
    display: inline;
    background-image: linear-gradient(180deg, #a6a9ae, #a6a9ae);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    color: inherit;
    text-decoration: none;
}

a[rel='nofollow'] {
    background-image: linear-gradient(180deg, #a6a9ae, #a6a9ae),
        linear-gradient(
            45deg,
            #eee 25%,
            rgba(238, 238, 238, 0) 25%,
            rgba(238, 238, 238, 0) 75%,
            #eee 75%,
            #eee 100%
        ),
        linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
    background-position: 0 100%, 0px 0px, 5px 5px;
    background-size: 100% 1px, 10px 10px, 10px 10px;
    background-repeat: no-repeat, repeat, repeat;
}

body.editor-body {
    --editor-body-pt: var(--control-space-m);
    --editor-body-pr: calc(var(--control-space-m) / 2);
    --editor-body-pb: var(--control-space-m);
    --editor-body-pl: calc(var(--control-space-m) / 2);
    padding: var(--editor-body-pt) var(--editor-body-pr) var(--editor-body-pb) var(--editor-body-pl);
    font-family: var(--font-primary);
    font-size: var(--editor-body-fz, var(--control-text-size-m));
    color: var(--editor-body-color, var(--color-control-typo-default));
    line-height: 1.2;
    background: transparent;
    scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-bg);
    scrollbar-width: thin;
}

body::-webkit-scrollbar {
    background-color: var(--color-scroll-bg);
    width: 8px;
    height: 8px;
    border-radius: 0;
}

body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--color-scroll-thumb);
}

.editor-body--size-l {
    --editor-body-pr: calc(var(--control-space-l) / 2);
    --editor-body-pl: calc(var(--control-space-l) / 2);
    --editor-body-fz: var(--control-text-size-l);
}

.editor-body--size-s {
    --editor-body-pr: calc(var(--control-space-s) / 2);
    --editor-body-pl: calc(var(--control-space-s) / 2);
    --editor-body-fz: var(--control-text-size-s);
}

.editor-body--size-xs {
    --editor-body-pr: calc(var(--control-space-xs) / 2);
    --editor-body-pl: calc(var(--control-space-xs) / 2);
    --editor-body-fz: var(--control-text-size-xs);
}

.mce-content-body img[data-mce-selected],
.mce-content-body table[data-mce-selected] {
    outline: 3px solid var(--color-control-bg-focus);
}

.mce-content-body div.mce-resizehandle {
    background-color: var(--color-control-bg-primary);
    border-color: var(--color-control-bg-primary);
}

.mce-content-body [data-mce-selected='inline-boundary'] {
    background-color: var(--color-typo-ghost);
}

.ephox-snooker-resizer-bar {
    background-color: var(--color-control-bg-active);
}
