@use '../utilities/main_utilities' as *;

p {
    padding: 0;
    width: 100%;
}
p+p, h1+p{ /* Para after para should space out */
    margin-top: rems(10px);
}

/* Set shorter line heights on headings and interactive elements */
h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5 h6,.h6,
button, input, label{
  line-height: 1.35;
}

/* Balance text wrapping on headings */
h1, h2, h3, h4, h5, h6{
  text-wrap: balance;
}

h1, .h1{
    font-size: rems(30px);
    margin-bottom: rems(18px);
}

mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
    padding: rems(2px);
    background: $color-highlight;

    @include color-scheme(dark) {
        background: $color-highlight--dark;
    }
}

small {
    color: $color-text;
    @include color-scheme(dark) {
        color: $color-text--dark;
    }
}

hr{
    background-color: $color-background--dark; // Dark by default so it is shown
    border: none;
    height: 1px; // Doesn't need to be rem's y'kno
    width: 100%;
    max-width: $width-content;
    margin: rems(24px) auto;
    @include color-scheme(dark) {
        color: $color-background;
    }
}