/*
 * Basic files
 */
@import '../vendor/modularscale';
@import '../mixins';
@import '../variables';
@import '../css-variables';
@import 'scrollbar';

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

html,
body {
    font-family: var(--font-base);
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
figure,
form,
fieldset,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

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

/*
 * Main rules
 */

html {
    background: var(--bg-primary);
    font-size: 14px;
    height: 100%;
    overflow-y: auto !important;
}

body#tinymce {
    color: var(--text-primary-color);
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-base);
    font-size: inherit;
    line-height: 1.6;
    padding: 1.8rem 1rem 0 1rem;

    & > :nth-child(1) {
        margin-top: 0;
    }
}

a:not(.btn) {
    @include links (var(--link-invert-color), var(--link-invert-color), var(--link-invert-color), var(--link-invert-color));
}


p,
ul,
ol,
dl,
table,
hr {
    margin-top: baseline(4);
}

blockquote,
figure {
    margin-top: baseline(4);
    margin-bottom: baseline(4);
}

pre,
table,
script {
    margin-top: baseline(4);
    margin-bottom: baseline(5);
}

figcaption {
    clear: both;
    color: var(--gray-4);
    font-size: 0.7rem;
    margin: 0.8rem 0 0;
    text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--headings-color);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing);
    line-height: 1.3;
    margin-top: baseline(5);
}

h1 {
    font-size: $h1;
}

h2 {
    font-size: $h2;
}

h3 {
    font-size: $h3;
}

h4 {
    font-size: $h4;
}

h5 {
    font-size: $h5;
}

h6 {
    font-size: $h6;
}

h2,
h3,
h4,
h5,
h6 {
    & + p {
        margin-top: baseline(3);
    }
}

b,
strong {
    font-weight: var(--font-weight-bold);
}

blockquote {
    background: var(--gray-1);
    border-left: 3px solid var(--color-primary);
    font-style: italic;
    padding: baseline(2) 0 baseline(2) baseline(8);

    & > :nth-child(1) {
        margin-top: 0;
    }
}

ul,
ol {
    margin-left: 2rem;

    & > li {
        list-style: inherit;
        padding-left: baseline(2);
    }

    ul,
    ol {
        margin-bottom: baseline(2);
        margin-top: baseline(2);
    }
}

dl {
    dt {
        font-weight: var(--font-weight-bold);
    }
}

pre {
    background-color: var(--gray-1);
    font-size: ms(-1);
    padding: baseline(6);
    white-space: pre-wrap;
    word-wrap: break-word;

    & > code {
        background: none;
        color: var(--headings-color);
        display: inline-block;
        font-size: ms(-1);
        font-weight: normal;
        padding: 0;
    }
}

code {
    background-color: rgba(var(--warning-rgb), .15);
    border-radius: 2px;
    color: var(--warning);
    font-size: ms(-1);
    font-family: var(--font-monospace);
    padding: baseline(1) baseline(2);
}

table {
    border: 1px solid var(--input-border-color);
    border-collapse: collapse;
    border-spacing: 0;
    vertical-align: top;
    text-align: left;
    width: 100%;

    th {
        font-weight: var(--font-weight-semibold);
        padding: baseline(2.5) baseline(4);
    }

    td {
        border-top: 1px solid var(--input-border-color);
        padding: baseline(2.5) baseline(4);
    }
}

kbd {
    background: var(--headings-color);
    border-radius: 2px;
    color: var(--bg-primary);
    font-family: var(--font-monospace);
    font-size: 0.8888em;
    padding: baseline(0.5) baseline(1.5);
}

sub,
sup {
    font-size: 65%;
}

small {
    font-size: ms(-2);
}

hr:not(#read-more) {
    background: none;
    border: none;
    height: auto;
    line-height: 1;
    max-width: none;
    text-align: center;

    &::before {
        content: "* * *";
        color: var(--headings-color);
        font-size: 30px;
    }
}

/*
 * Alignment
 */

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

.align-justify {
    text-align: justify;
}
