// Vertical Rule
vr {
    height:30px;
    border-left:1px solid $gray-light;
    margin:0 10px;
    display: inline-block;
    vertical-align:middle;
}
.rounded,
.round{
    border-radius:50%;
}
.pointer{
    cursor: pointer !important;
}
.handle{
    cursor: hand;
}
.honeypot{
    position:absolute !important;
    left:-999999px !important;
    width:1px !important;
    display:block !important;
}

//----------------------------------------------------------------
//             Layout
//----------------------------------------------------------------
.hide,
.hidden{
    display:none;
}
.right{
    float:right;
}
.text-right{
    text-align: right;
}
.text-center{
    text-align: center;
}
.clear{
    clear:both;
}
.bleed-fix{
    position:static;
    overflow:hidden;
}
.no-gutter{
    padding-left:0;
    padding-right:0;
}
.no-pad{
    padding-left:0;
    padding-right:0;
}
.less-pad{
    padding-left:5px;
    padding-right:5px;
}
.pad{
    padding:10px;
}

//----------------------------------------------------------------
//             Text
//----------------------------------------------------------------
.text-overflow{
    @include text-overflow;
}
.strong,
strong,
.bold{      font-weight: 700;}
.light,
.text-light{    font-weight: 300;}
.text-normal{    font-weight: normal;}
.italic{    font-style:italic;}
.required{  color:$red;}
.warn{
    color:lighten($gray, 20);
    &:hover{
        color:$red;
    }
}
h1, h2, h3, h4, h5, h6{
    &.no-margin{
        margin: 0;
        margin-top:10px;
    }
    &.no-margin-top{
        margin-top:0;
    }
}

p.large{
    font-size:1.5em;
    font-weight:300;
    margin-bottom:20px;
}
.nowrap{
    white-space: nowrap;
    overflow:hidden;
}

//----------------------------------------------------------------
//             Colors
//----------------------------------------------------------------
@mixin generate-color($class){
.#{$class} {            color: global-variable($class);}
.#{$class}-light {      color: global-variable("#{$class}-light");}
.#{$class}-dark {       color: global-variable("#{$class}-light");}
.#{$class}-bg {         background-color: global-variable($class);}
.#{$class}-light-bg {   background-color: global-variable("#{$class}-light");}
.#{$class}-dark-bg {    background-color: global-variable("#{$class}-dark");}
}

@include generate-color('green');
@include generate-color('blue');
@include generate-color('red');
@include generate-color('gray');
@include generate-color('yellow');