@import '_variables.scss';
@import '_mixins.scss';

.msk-monospace {
    font-family: $msk--monospace-font-family;
}

.msk-sr-only {
    @include msk-sr-only;
}

.msk-legible-section p,
.msk-legible-section li,
.msk-legible-section .bx--form .bx--fieldset legend.bx--label,
.msk-legible-section .bx--text-input-wrapper .bx--label,
.msk-legible-section .bx--form-item .bx--label,
.msk-legible-section .bx--radio-button-group legend.bx--label,
.msk-legible-section .bx--checkbox-label-text,
.msk-legible-section .bx--radio-button__label,
.msk-legible-section .bx--form-item .bx--label,
.msk-legible-copy {
    max-inline-size: $msk--max-width-chars;
}

.msk-legible-section {
    .bx--text-area,
    .bx--select-input__wrapper,
    .bx--select-input,
    .bx--text-input {
        max-width: msk-rem(480px);
    }
}

.msk-legible-section-off p,
.msk-legible-section-off li,
.msk-legible-copy-off {
    max-inline-size: none;
}

.msk-compact-copy p,
.msk-compact-lines {
    line-height: 1.25;
}

.msk-compact-copy-off p,
.msk-compact-lines-off {
    line-height: $msk--global-line-height;
}

.msk-margins {
    * + * {
        margin-top: 12px; // Establish vertical rhythm, https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
    }

    * + {
        blockquote,
        figure,
        table {
            margin-bottom: 32px;
            margin-top: 32px;
        }
    }

    dd,
    br,
    th,
    td,
    figcaption {
        margin-top: 0; // Remove top margins for select flow elements
    }

    * + h1,
    * + h2,
    * + h3,
    * + h4,
    * + h5,
    * + h6 {
        margin-top: 32px;
    }

    p {
        margin-top: 16px;
    }

    // Lists
    ul ul,
    ul ol,
    ol ol,
    ol ul,
    li + li,
    dd + dd {
        margin-top: 8px;
    }
}

.msk-margins-small * + * {
    margin-top: 8px;
}

.msk-margins-off * + * {
    margin-top: 0;
}

.msk--size-11 {
    font-size: $msk--size-11;
}

.msk--size-10 {
    font-size: $msk--size-10;
}

.msk--size-9 {
    font-size: $msk--size-9;
}

.msk--size-8 {
    font-size: $msk--size-8;
}

.msk--size-7 {
    font-size: $msk--size-7;
}

.msk--size-6 {
    font-size: $msk--size-6;
}

.msk--size-5 {
    font-size: $msk--size-5;
}

.msk--size-4 {
    font-size: $msk--size-4;
}

.msk--size-3 {
    font-size: $msk--size-3;
}

.msk--size-2 {
    font-size: $msk--size-2;
}

.msk--size-1 {
    font-size: $msk--size-1;
}

.msk--weight-300 {
    font-weight: 300;
}

.msk--weight-400 {
    font-weight: 400;
}

.msk--weight-500 {
    font-weight: 500;
}

.msk--weight-600 {
    font-weight: 600;
}

.msk--weight-700 {
    font-weight: 700;
}