body[data-view="text"]
{
    .extra-large-heading
    {
        @include extra-large-heading;
    }

    .large-heading
    {
        @include large-heading;
    }

    .normal-heading
    {
        @include normal-heading;
    }

    .color
    {
        @mixin color($color)
        {
            .swatch
            {
                background: $color;
            }

            code::after
            {
                content: ": #{$color};";
            }
        }

        padding-left: 0;

        &::before
        {
            content: none;
        }

        p
        {
            margin: 0;
        }

        .swatch
        {
            position: relative;
            top: 2px;
            
            display: inline-block;
            width: steps(3);
            height: steps(3);
            margin-right: steps(1);

            vertical-align: top;
        }

        code
        {
            max-width: 84%;

            white-space: normal;
        }

        &.background-lightest { @include color($color-background-lightest); }
        &.background-lighter  { @include color($color-background-lighter); }
        &.background-normal   { @include color($color-background-normal); }
        &.background-darker   { @include color($color-background-darker); }

        &.text-darker   { @include color($color-text-darker); }
        &.text-normal   { @include color($color-text-normal); }
        &.text-lighter  { @include color($color-text-lighter); }
        &.text-lightest { @include color($color-text-lightest); }

        &.border-normal { @include color($color-border-normal); }
        &.border-darker { @include color($color-border-darker); }

        &.brand-normal { @include color($color-brand-normal); }
        &.brand-darker { @include color($color-brand-darker); }

        &.link-normal { @include color($color-link-normal); }
        &.link-active { @include color($color-link-active); }

        &.alert   { @include color($color-alert); }
        &.success { @include color($color-success); }

        &.background-inverted-normal { @include color($color-background-inverted-normal); }

        &.text-inverted-darker  { @include color($color-text-inverted-darker); }
        &.text-inverted-normal  { @include color($color-text-inverted-normal); }
        &.text-inverted-lighter { @include color($color-text-inverted-lighter); }
    }
}
