@use "variable";
@use "mixin_icons";
@use "mixin_admonition";
@use "mixin_links";
@use "theme_color";

:root {
    --subtle-box-shadow: 0 .2rem .5rem rgba(0,0,0,.05),0 0 .0625rem rgba(0,0,0,.1);
    --subtle-box-shadow-button: 0 .2rem .5rem rgba(0,0,0,.1),0 0 .0625rem rgba(0,0,0,.15);
    --subtle-box-shadow-hover: 0 .3rem .6rem rgba(0,0,0,.2),0 0 .085rem rgba(0,0,0,.2);
    color-scheme: light dark;
}

html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

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

body {
    @include mixin_icons.icons;
    @include mixin_admonition.admonitions;
    @include mixin_admonition.default-admonition(#651fff, "abstract");
    @include mixin_admonition.default-topic(#14B8A6, "pencil");
    @include mixin_links.links;
    @include mixin_links.default-link(#14B8A6, "adi");
}

body {
    margin: 0;
    overflow-x: hidden;
}

@media screen {
    body {
        background-color: var(--bg-color1);
        color: var(--text-color1);
    }
}

.body ol p, .body ul p {
    margin: .25em 0;
}

svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.body table {
    margin: 0 auto;
    line-height: 1.5em;
}

@media (min-width: variable.$screen-1) {
    #hdl-component-diagram svg {
        float: right;
        margin: -2.5em 0 0 1em;
        max-width: 45%;
    }
}

@media print {
    #hdl-component-diagram svg {
        float: right;
        margin: -3em 0 0 1em;
        max-width: 45%;
    }
}
