// -----------------------------------------------------------------------------
// Global Helpers
// -----------------------------------------------------------------------------
// This stylesheet is for placeholder selectors (for extends) and mixins only.
// Anything other than placeholders will result in duplication of styles
// in every stylesheet that imports this file.

// Global Container
%container {
    margin: 0 auto;
    max-width: 1130px;
    padding-left: 10px;
    padding-right: 10px;
    @media screen and (max-width: 450px) {
        padding-left: 10px;
        padding-right: 10px;
    }
}

// Clearfix
%clearfix {
    &:after {
        clear: both;
        content: '';
        display: block;
    }
}

// Image Replacement
%ir {
    display: block;
    height: 0;
    overflow: hidden;
    text-indent: 100%;
    width: 0;
}

// Extended background
// Use to create a background that extends beyond the bounds of a parent element container
@mixin bg-extended($color) {
    @media screen and (min-width: 1025px) {
        clear: both;
        position: relative;
        &:before {
            background: $color;
            content: '';
            margin-left: -200%;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 400%;
        }
        // All child elements need position: relative. Uncomment below or add manually
        > * {
            // position: relative;
        }
    }
}

//Retina
$mq-retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx)';

@mixin retina {
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx) {
        @content;
    }
}

// DO Sprites
%do-sprite {
    background-image: url(../images/do-sprites.png);
    content: '';
}
// render retina sprite file at 200%
// background-size needs to be updated whenever the sprite sheet changes size
// retina background size is 50% of actual sprite sheet dimensions
@media #{$mq-retina} {
    %do-sprite {
        background-image: url(../images/do-sprites@2x.png);
        background-size: 139px 225px;
    }
}

// Branded lists
%ul-branded {
    list-style: none;
    li {
        margin-left: 15px;
        position: relative;
        &:before {
            content: '\2022';
            color: $link-blue;
            position: absolute;
            left: -15px;
        }
    }
}

%dl-branded {
    list-style: none;
    dt {
        margin-left: 0;
        &:before {
            content: '\2022';
            color: $link-blue;
            margin-right: 5px;
        }
    }
    dd {
        margin-left: 13px;
    }
}