@charset "UTF-8";

/*
Icon Swatch

<div class="icon-swatch">
    <div class="icon-view"><i class="icon arrow-left-red">&nbsp;</i></div>
    <div class="icon-code"><code>.arrow-left-red</code></div>
</div>

*/

.icon-swatch {
    width: 146px;
    height: 150px;
    display: inline-block;
    vertical-align: top;
    margin: .5em;
    border: 1px solid #d6d6d6;
    background-color: #d6d6d6;
    box-sizing: border-box;

    .icon-view {
        height: 104px;
        position: relative;

        .icon {
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }

    .icon-code {
        text-align: center;
        font-size: 0.8em;
    }
}