#glyphs {
    span[class*="glyph-"] {
        font-size: 2em;
    }
}

.color {
    height: 0;
    padding-bottom: 39px;
    margin: spacing(xxs) 0 0;
}

.line {
    border-width: 4px;
    border-style: solid;
    padding-bottom: 29px;
}

code {
    .tag {
        color: #008080;

        .title {
            color: #800000;
        }
    }

    .value, .string {
        color: #0451A5;
    }

    .attribute {
        color: red;
    }

    .comment {
        color: #008000;
        font-style: italic;
    }

    .number {
        color: #09885A;
    }
}

.caption-style-example {
    font-size: 6.67vh;
    background: rgba(black, .5) !important;
    color: white;
}

//make it possible to see alt colors in docs
#alt-colors > .col-sm-6 {
    background-color: $color-type-primary;
}


.nav a, .section-title a {
    text-decoration: none;
}

.example-dark-image-bg {
    background-image: url('../images/example_dark.jpg');
    background-position: top left;
    background-size: cover;
}

.example-light-image-bg {
    background-image: url('../images/example_light.jpg');
    background-position: top right;
    background-size: cover;
}

.guidance {
    border-left: 5px solid;
    
    ul {
        padding-left: spacing(md, -8);
    }

    &.guidance-example:before {
        position: absolute;
        top: spacing(xxs, -2);
        left: spacing(xxs, +1);
    }

    // Deal with repetitive content here instead of in the markup
    // so if these ever change it's really easy to update
    &.guidance-usage:before
	{
        content: "Options";
        padding-left: spacing(xs, -3);
        @include type(t7, set-line-height, responsive);
        font-weight: 500;
        font-family: $font-family-semibold;
    }

    
    

    //
    // Colors
    //
    &.guidance-usage {
        border-color: $color-dim-mid;
    }

}