html body {
    font-family: var(--theme-body-font-family);
    font-size: 15px;
}

small {
    font-size: $small-font-size;
}

// Ionicon size inside <small> tags - need to work on a way of removing the !important
small ion-icon {
    font-size: 0.9rem;
    vertical-align: sub;
}

// Ionicon size modifiers
ion-icon {
    font-size: 1.4rem;
    pointer-events: none;

    &.icon-xs {
        font-size: 0.5rem;
    }

    &.icon-sm {
        font-size: 0.8rem;
    }

    &.icon-lg {
        font-size: 2rem;
    }

    &.icon-xl {
        font-size: 2.5rem;
    }
    &.icon-xxl {
        font-size: 3.5rem;
    }
}

//monospace font
.text-monospace {
    font-family: var(--font-family-monospace);
}

//code + pre blocks
code, pre {
    color: $gray-800;
    background-color: $gray-200;
    font-size: 90%;
}

code {
    padding: 2px 4px;
}

pre {
    display: block;
    padding: 10px 5px;
    margin: 0 0 10.5px;
    font-size: 13px;
    word-break: break-all;
    word-wrap: break-word;
    border: 1px solid $gray-400;
    border-radius: 5px;
}

.trace {
    code, pre {
        background-color: inherit;
        color: inherit;
    }
}

//blockquote
blockquote {
    padding: 10.5px 21px;
    margin: 0 0 21px;
    font-size: inherit;
    border-left: 5px solid $gray-200;
}
