/*================
   text properties   
==================*/

.txt-bold {
    font-weight: bold;
}
.txt-italic {
    font-style: italic;
}
.txt-underline {
    text-decoration: underline;
}
.txt-underdots {
    text-decoration: underline;
    text-decoration-style: dotted;
}
.txt-lowercase {
    text-transform: lowercase;
}
.txt-uppercase {
    text-transform: uppercase;
}

.txt-strike {
    text-decoration: line-through;
}

.no-underline {
    text-decoration: none;
}
a.no-underline:hover {
    text-decoration: underline;
}

.align-center {
    text-align: center;
    text-indent: 0 !important;
}
.align-left {
    text-align: left !important;
}
.align-right {
    text-align: right !important;
}
.align-justify {
    text-align: justify;
}

.line-height-0 {
    line-height: 0;
}
.line-height-0p5 {
    line-height: 0.5;
}
.line-height-1 {
    line-height: 1;
}
.line-height-1p5 {
    line-height: 1.5;
}
.line-height-2 {
    line-height: 2;
}

.font-size-em-0p5 {
    font-size: 0.5em;
}

.font-size-em-0p8 {
    font-size: 0.8em;
}
.font-size-rem-0p8 {
    font-size: 0.8rem;
}

.font-size-rem-0p5 {
    font-size: 0.5rem;
}

.font-size-rem-0p75 {
    font-size: 0.75rem;
}

.font-size-rem-1 {
    font-size: 1rem;
}

.font-size-rem-1p2 {
    font-size: 1.2rem;
}
.font-size-em-1p2 {
    font-size: 1.2em;
}
.font-size-rem-1p5 {
    font-size: 1.5rem;
}
.font-size-rem-2 {
    font-size: 2rem;
}

.no-indent {
    text-indent: 0;
}

.letter-spacing-01 {
    letter-spacing: 0.1rem;
}

.no-letter-spacing {
    letter-spacing: normal;
}

.no-select {
    user-select: none;
}

/*==============
  - faux headings   
================*/

.faux-heading {
    display: block;
    font-weight: bold;

    &.h1 {
        font-size: 2em;
    }
    &.h2 {
        font-size: 1.5em;
    }
    &.h3 {
        font-size: 1.17em;
    }
    &.h4 {
        font-size: 1em;
    }
    &.h5 {
        font-size: 0.83em;
    }
    &.h6 {
        font-size: 0.67em;
    }

    &.normal-case {
        text-transform: unset !important;
    }
}

/*=================
   block properties   
===================*/
.display-block {
    display: block;
}
.display-inline {
    display: inline;
}
.display-inlineblock {
    display: inline-block;
}
.display-flex {
    display: flex;
}
.display-grid {
    display: grid;
}

.no-border {
    border: 0;
}

.float-left {
    float: left;
}
.float-right {
    float: right;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.list-reset {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/*========
   margins   
==========*/

.margin-0 {
    margin: 0;
}

.margin-block-0 {
    margin-block: 0rem;
}
.margin-inline-0 {
    margin-inline: 0rem;
}

.margin-bottom-0 {
    margin-bottom: 0;
}
.margin-top-0 {
    margin-top: 0;
}
.margin-right-0 {
    margin-right: 0;
}
.margin-left-0 {
    margin-left: 0;
}

.margin-block-0p5 {
    margin-block: 0.5rem;
}
.margin-inline-0p5 {
    margin-inline: 0.5rem;
}

.margin-top-0p5 {
    margin-top: 0.5rem;
}
.margin-bottom-0p5 {
    margin-bottom: 0.5rem;
}
.margin-left-0p5 {
    margin-left: 0.5rem;
}
.margin-right-0p5 {
    margin-right: 0.5rem;
}

.margin-block-0p75 {
    margin-block: 0.75rem;
}
.margin-inline-0p75 {
    margin-inline: 0.75rem;
}

.margin-top-0p75 {
    margin-top: 0.75rem;
}
.margin-bottom-0p75 {
    margin-bottom: 0.75rem;
}
.margin-left-0p75 {
    margin-left: 0.75rem;
}
.margin-right-0p75 {
    margin-right: 0.75rem;
}

.margin-block-1 {
    margin-block: 1rem;
}
.margin-inline-1 {
    margin-inline: 1rem;
}

.margin-top-1 {
    margin-top: 1rem;
}
.margin-bottom-1 {
    margin-bottom: 1rem;
}
.margin-left-1 {
    margin-left: 1rem;
}
.margin-right-1 {
    margin-right: 1rem;
}

.margin-block-1p5 {
    margin-block: 1.5rem;
}
.margin-inline-1p5 {
    margin-inline: 1.5rem;
}

.margin-top-1p5 {
    margin-top: 1.5rem;
}
.margin-bottom-1p5 {
    margin-bottom: 1.5rem;
}
.margin-left-1p5 {
    margin-left: 1.5rem;
}
.margin-right-1p5 {
    margin-right: 1.5rem;
}

.margin-block-1p75 {
    margin-block: 1.75rem;
}
.margin-inline-1p75 {
    margin-inline: 1.75rem;
}

.margin-top-1p75 {
    margin-top: 1.75rem;
}
.margin-bottom-1p75 {
    margin-bottom: 1.75rem;
}
.margin-left-1p75 {
    margin-left: 1.75rem;
}
.margin-right-1p75 {
    margin-right: 1.75rem;
}

.margin-block-2 {
    margin-block: 2rem;
}

.margin-top-2 {
    margin-top: 2rem;
}
.margin-bottom-2 {
    margin-bottom: 2rem;
}
.margin-left-2 {
    margin-left: 2rem;
}
.margin-right-2 {
    margin-right: 2rem;
}


.margin-top-0p5-em {
    margin-top: 0.5em;
}
.margin-bottom-0p5-em {
    margin-bottom: 0.5em;
}

/*========
   presets   
==========*/

.drop-cap::first-letter {
    font-size: 1.25em;
    font-weight: bold;
    display: block;
    /* float: left; */
    /* font-size: 2.5rem; */
    /* line-height: 0.48; */
    /* margin: 0.26em 0.15rem 0 0; */
}

.related-link {
    display: block;
    margin-block: 1rem;
    .txt-bold {
        text-transform: uppercase;
    }
}

.a-hover-underline {
    text-decoration: none;
}
.a-hover-underline:hover {
    text-decoration: underline;
}

a[target="_blank"].no-newtab-indicator::after,
.no-newtab-indicator a[target="_blank"]::after {
    content: none !important;
}



/*========
   flexbox   
==========*/
.display-flex {
    display: flex;
}
.display-inlineflex {
    display: inline-flex !important;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex--jc-space-between {
    justify-content: space-between;
}

.flex--ai-baseline {
    align-items: baseline;
}

.flex--direction-row {
    flex-direction: row;
}
.flex--direction-column {
    flex-direction: column;
}

.flex--wrap {
    flex-wrap: wrap;
}

.flex--grow-children > * {
    flex-grow: 1;
}


.cursor-pointer {
    cursor: pointer;
}


.div-table {
    border: 1px solid #000;
}
.div-table > .div-table__row > .div-table__cell,
.div-table__row.th {
    padding: 0.25rem;
}

.div-table__row {
    display: flex;
    flex-wrap: wrap;
}
.div-table__row > .div-table__cell {
    width: 50%;
}

.div-table__row:not(.div-table__row:last-of-type) {
    border-bottom: 1px solid #000;
}
.div-table__cell ~ .div-table__cell {
    border-left: 1px solid #000;
}

.div-table__row.th {
    justify-content: center;
}

.div-table__cell.th {
    font-weight: bold;
}

/*===============
   decor elements   
=================*/
.hr {
    border-color: var(--global_color-foreground);
    border-bottom: 0;
    border-width: 0.1rem 0 0 0;
    margin: 0;
}
.hr.hr--thick {
    border-width: 0.2rem 0 0 0;
}

.hr.solid {
    border-style: solid;
}

.hr.dashed {
    border-style: dashed;
}

.hr.dotted {
    border-style: dotted;
}



.decor-tilde {
    &::before, 
    &::after {
        content: ' ~ ';
    }
}