/**************************************
 * Typography
 **************************************/

html,
a {
    @include font-aliasing;

    text-shadow: 1px 1px 1px rgb(0 0 0 / 0.4%);
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    @include common-typography;
}

body.is-deja-blue {
    @include bdl-commonTypography-dejaBlue;
}

p {
    margin: 0 0 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 8px 0;
    color: inherit;
    font-weight: normal;
    font-family: inherit;
    line-height: 20px;
    text-rendering: optimizelegibility;
}

h1 {
    font-size: 30px;
    line-height: 36px;
}

h2 {
    font-size: 24px;
    line-height: 30px;
}

h3 {
    font-size: 20px;
    line-height: 24px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 14px;
}

h6 {
    font-size: 12px;
}

.strong,
strong {
    font-weight: bold;
}

.em,
em {
    font-style: italic;
}

small {
    font-size: 85%;
}

ul,
ol,
dl {
    margin: 0 0 10px 25px;
    padding: 0;
}

ul ul,
ul ol,
ol ol,
ol ul,
ul dl,
ol dl,
dl ul,
dl ol,
dl dl {
    margin-bottom: 0;
}

li {
    line-height: 20px;
}

input,
button,
select,
div[contentEditable='true'],
textarea {
    @include font-family;

    font-size: 99%;
}

.txt-small {
    font-size: 12px;
}

.txt-medium {
    font-size: 14px;
}

.txt-large {
    font-size: 16px;
}

.txt-x-large {
    font-size: 30px;
}

.txt-normal {
    font-weight: normal;
}

.txt-bold {
    font-weight: bold;
}

.txt-break-all {
    word-break: break-all;
}

.txt-ellipsis {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
