.text-styles {
    .flexample {
        flex: 1 0 0%;
        .flexbox {
            border: none;
        }
        &.t-align {
            p {
                @include p-box;
                &.text-align {
                    &-left {
                        text-align: left;
                    }
                    &-right {
                        text-align: right;
                    }
                    &-center {
                        text-align: center;
                    }
                    &-justify {
                        text-align: justify;
                    }
                }
            }
        }
        &.v-align {
            .vertical-align {
                &-baseline {
                    vertical-align: baseline;
                }
                &-sub {
                    vertical-align: sub;
                }
                &-super {
                    vertical-align: super;
                }
                &-top {
                    vertical-align: top;
                }
                &-text-top {
                    vertical-align: text-top;
                }
                &-middle {
                    vertical-align: middle;
                }
                &-bottom {
                    vertical-align: bottom;
                }
                &-text-bottom {
                    vertical-align: text-bottom;
                }
            }
            p {
                @include p-box;
                line-height: 250%;
                font-size: 1.5rem;
                text-decoration: underline;
                font-family: 'Roboto Condensed', sans-serif;
            }
            img {
                width: 1em;
                height: auto;
            }
        } 
        &.w-space {
            p {
                @include p-box;
            }
            .word-spacing {
                &.positive {
                    word-spacing: 50px;
                }
                &.negative {
                    word-spacing: -5px;
                }
            }
        }
        &.l-space {
            p {
                @include p-box;
            }
            .letter-spacing {
                &.positive {
                    letter-spacing: 10px;
                }
                &.negative {
                    letter-spacing: -2px;
                }
            }
        }
        &.t-decoration {
            p {
                @include p-box;
            }
            .t-deco {
                &.none {
                    text-decoration: none;
                }
                &.underline {
                    text-decoration: underline;
                }
                &.overline {
                    text-decoration: overline;
                }
                &.line-through {
                    text-decoration: line-through;
                }
            }
        }
        &.t-transform {
            p {
                @include p-box;
            }
            .t-trans {
                &.none {
                    text-transform: none;
                }
                &.capitalize {
                    text-transform: capitalize;
                }
                &.uppercase {
                    text-transform: uppercase;
                }
                &.lowercase {
                    text-transform: lowercase;
                }
            }
        }
        &.t-shadow {
            p {
                @include p-box;
                font-size: 1.5rem;
                line-height: 150%;
            }
            .ts-right {
                text-shadow: #cdcdcd 4px 0;
            }
            .ts-bottom {
                text-shadow: #cdcdcd 0 4px;
            }
            .ts-xy {
                text-shadow: #cdcdcd 4px 4px;
            }
            .ts-blur {
                text-shadow: #333 0 0 4px;
            }
            .ts-blur-xy {
                text-shadow: #333 4px 4px 4px;
            }
            .ts-blur-2 {
                text-shadow: #333 4px 4px 2px, #333 -4px -4px 2px;
            }
        }
        &.white-space {
            .ws{
                border: 1px solid #cdcdcd;
                width: 200px;
                height: 200px;
                overflow: auto;
                margin: $padding-div;
                &.normal {
                    white-space: normal;
                }
                &.pre {
                    white-space: pre;
                }
                &.nowrap {
                    white-space: nowrap;
                }
                &.pre-wrap {
                    white-space: pre-wrap;
                }
                &.pre-line {
                    white-space: pre-line;
                }
                .ellipsis {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .table-ws {
                margin: $padding-div;
                table {
                    border-collapse: collapse;
                }
                thead, th, tbody, tr, td {
                    border: 1px solid #cdcdcd;
                    @include p-base;
                }
                td {
                    text-transform: uppercase;
                    code {
                        text-transform: lowercase;
                    }
                }
            }
        }
    }
}
