// Utilities
// -------------------------

// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
.clearfix() {
    &:before,
    &:after {
        content: " "; // 1
        display: table; // 2
    }
    &:after {
        clear: both;
    }
}

// WebKit-style focus
.tab-focus() {
    // Default
    outline: thin dotted;
    // WebKit
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

// Center-align a block level element
.center-block() {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

// Sizing shortcuts
.size(@width; @height) {
    width: @width;
    height: @height;
}
.square(@size) {
    .size(@size; @size);
}

// Placeholder text
.placeholder(@color: @input-color-placeholder) {
    &::-moz-placeholder           { color: @color;   // Firefox
                                                                    opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
    &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
    &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

// Text overflow
// Requires inline-block or block for proper styling
.text-overflow() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
// that we cannot chain the mixins together in Less, so they are repeated.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757

// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() {
    font: ~"0/0" a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
    .hide-text();
}

// Retina images
//
// Short retina mixin for setting background-image and -size

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
    background-image: url("@{file-1x}");

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) {
        background-image: url("@{file-2x}");
        background-size: @width-1x @height-1x;
    }
}


// Responsive image
//
// Keep images from scaling beyond the width of their parents.

.img-responsive(@display: block;) {
    display: @display;
    max-width: 100%; // Part 1: Set a maximum relative to the parent
    height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}

// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
    display: block !important;
    table&  { display: table; }
    tr&     { display: table-row !important; }
    th&,
    td&     { display: table-cell !important; }
}

.responsive-invisibility() {
    display: none !important;
}