// -----------------------------------------------------------------------------
// Global Extends
// -----------------------------------------------------------------------------

// This stylesheet is for placeholder selectors only.

// Anything other than placeholders will result in duplication of styles
// in every stylesheet that imports this file.

%container {
    margin: 0 auto;
    max-width: 1190px;
    padding-left: 30px;
    padding-right: 30px;
    @media screen and (max-width: 770px) {
        padding: 0 10px;
    }
    // @media screen and (max-width: 479px) {
    //     padding-left: 15px;
    //     padding-right: 15px;
    // }
}
%clearfix {
    &:after {
        clear: both;
        content: '';
        display: block;
    }
}
// image replacement
%ir {
    display: block;
    height: 0;
    overflow: hidden;
    text-indent: 100%;
    width: 0;
}

// -----------------------------------------------------------------------------
// Not a button
// -----------------------------------------------------------------------------
%not-btn {
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    transition: color .2s ease;
    &:active,
    &:focus,
    &:hover {
        background-color: transparent;
        background-image: none;
        border: none;
    }
}

// -----------------------------------------------------------------------------
// Extended Background
// -----------------------------------------------------------------------------
// Use to create a background that extends beyond the bounds of a parent element container
%bg-extended {
    position: relative;
    &:before {
        background-color: $bg-title;
        content: '';
        margin-left: -200%;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 400%;
    }
}

// -----------------------------------------------------------------------------
// Block Title Background
// -----------------------------------------------------------------------------
%bg-block-title {
    &:before {
        content: '//';
        color: $t-accent;
        margin-right: 5px;
    }
    small {
        color: $t-accent;
        font-weight: 700;
    }
}
@media screen and (max-width: 770px) {
    %bg-block-title-770 {
        &:before {
            content: '//';
            color: $t-accent;
            margin-right: 5px;
        }
        small {
            color: $t-accent;
            font-weight: 700;
        }
    }
}

// -----------------------------------------------------------------------------
// Custom HR
// -----------------------------------------------------------------------------
%hr-dark {
    border-top: 1px solid #272727;
    border-bottom: 1px solid #181818;
}
@mixin hr-dark {
    border-top: 1px solid #272727;
    border-bottom: 1px solid #181818;
}
%hr-light {
    border-top: 1px solid #fff;
    border-bottom: 1px solid $mercury;
}