//
// Util
// -----------------------------------------------------------------------------
//
// ### Usage:
// Common utilities.
//
// ### Example:
// .some-floats-inside {
//     .clearfix();
// };

@import "variables.less";

// clearfix via http://h5bp.com/q
.clearfix() {
    &:before,
    &:after {
        display: table;
        content: "";
    }
    &:after {
        clear: both;
    }
}
.clearfix() when (@support-ie-version < 8) {
    *zoom: 1;
}

// size settings
.size(@size) {
    width: @size;
    height: @size;
}
.size(@wdith, @height) {
    width: @wdith;
    height: @height;
}


//
// .no-bullet
// .no-bullets
//
// "Unstyle" lists, `.no-bullet()` for `<li>`s and `.no-bullets()` for `<ul>` & `<ol>`
// [deprecated]

.no-bullet() {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0;
}

.no-bullets() {
    list-style: none;
    li {
        .no-bullet();
    }
}



//
// .margin-em
// .margin-top-em
// .margin-bottom-em
// .margin-left-em
// .margin-right-em
// .padding-em
// .padding-top-em
// .padding-bottom-em
// .padding-left-em
// .padding-right-em
//
// Helps calculating `margin` and `padding` in `em`.

.margin-em(@target-px-size, @context-px-size: @default-font-size) {
    @margin-top: ~`Number('@{target-px-size}'.match(/(\d+|\d*\.\d+)+/g)[0])`;
    @margin-right: ~`Number('@{target-px-size}'.match(/(\d+|\d*\.\d+)+/g)[1]) || @{margin-top}`;
    @margin-bottom: ~`Number('@{target-px-size}'.match(/(\d+|\d*\.\d+)+/g)[2]) || @{margin-top}`;
    @margin-left: ~`Number('@{target-px-size}'.match(/(\d+|\d*\.\d+)+/g)[3]) || @{margin-right} || @{margin-top}`;
    margin-top: (@margin-top / @context-px-size) * 1em;
    margin-right: (@margin-right / @context-px-size) * 1em;
    margin-bottom: (@margin-bottom / @context-px-size) * 1em;
    margin-left: (@margin-left / @context-px-size) * 1em;
}

.margin-top-em(@target-px-size, @context-px-size: @default-font-size) {
    margin-top: (unit(@target-px-size) / unit(@context-px-size)) * 1em;
}

.margin-bottom-em(@target-px-size, @context-px-size: @default-font-size) {
    margin-bottom: (unit(@target-px-size) / unit(@context-px-size)) * 1em;
}

.margin-left-em(@target-px-size, @context-px-size: @default-font-size) {
    margin-left: (unit(@target-px-size) / unit(@context-px-size)) * 1em;
}

.margin-right-em(@target-px-size, @context-px-size: @default-font-size) {
    margin-right: (unit(@target-px-size) / unit(@context-px-size)) * 1em;
}

.padding-em(@target-px-size, @context-px-size: @default-font-size) {
    @padding-top: ~`Number('@{target-px-size}'.match(/(\d+|\d*\.\d+)+/g)[0])`;
    @padding-right: ~`Number('@{target-px-size}'.match(/(\d+|\d*\.\d+)+/g)[1]) || @{padding-top}`;
    @padding-bottom: ~`Number('@{target-px-size}'.match(/(\d+|\d*\.\d+)+/g)[2]) || @{padding-top}`;
    @padding-left: ~`Number('@{target-px-size}'.match(/(\d+|\d*\.\d+)+/g)[3]) || @{padding-right} || @{padding-top}`;
    padding-top: (@padding-top / @context-px-size) * 1em;
    padding-right: (@padding-right / @context-px-size) * 1em;
    padding-bottom: (@padding-bottom / @context-px-size) * 1em;
    padding-left: (@padding-left / @context-px-size) * 1em;
}

.padding-top-em(@target-px-size, @context-px-size: @default-font-size) {
    padding-top: (unit(@target-px-size) / unit(@context-px-size)) * 1em;
}

.padding-bottom-em(@target-px-size, @context-px-size: @default-font-size) {
    padding-bottom: (unit(@target-px-size) / unit(@context-px-size)) * 1em;
}

.padding-left-em(@target-px-size, @context-px-size: @default-font-size) {
    padding-left: (unit(@target-px-size) / unit(@context-px-size)) * 1em;
}

.padding-right-em(@target-px-size, @context-px-size: @default-font-size) {
    padding-right: (unit(@target-px-size) / unit(@context-px-size)) * 1em;
}


//
// .margin-rem
// .margin-top-rem
// .margin-bottom-rem
// .margin-left-rem
// .margin-right-rem
// .padding-rem
// .padding-top-rem
// .padding-bottom-rem
// .padding-left-rem
// .padding-right-rem
//
// Helps calculating `margin` and `padding` in `rem`.

.margin-rem(@px-size) {
    @margin-top: ~`Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[0])`;
    @margin-right: ~`Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[1]) || @{margin-top}`;
    @margin-bottom: ~`Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[2]) || @{margin-top}`;
    @margin-left: ~`Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[3]) || @{margin-right} || @{margin-top}`;
    @top-rem-size: @margin-top / @default-font-size;
    margin-top: ~"@{margin-top}px";
    margin-top: ~"@{top-rem-size}rem";

    @right-rem-size: @margin-right / @default-font-size;
    margin-right: ~"@{margin-right}px";
    margin-right: ~"@{right-rem-size}rem";

    @bottom-rem-size: @margin-bottom / @default-font-size;
    margin-bottom: ~"@{margin-bottom}px";
    margin-bottom: ~"@{bottom-rem-size}rem";

    @left-rem-size: @margin-left / @default-font-size;
    margin-left: ~"@{margin-left}px";
    margin-left: ~"@{left-rem-size}rem";
}

.margin-top-rem(@px-size) {
    @rem-size: unit(@px-size) / unit(@default-font-size);
    @px-size-no-unit: unit(@px-size);
    margin-top: ~"@{px-size-no-unit}px";
    margin-top: ~"@{rem-size}rem";
}

.margin-bottom-rem(@px-size) {
    @rem-size: unit(@px-size) / unit(@default-font-size);
    @px-size-no-unit: unit(@px-size);
    margin-bottom: ~"@{px-size-no-unit}px";
    margin-bottom: ~"@{rem-size}rem";
}

.margin-left-rem(@px-size) {
    @rem-size: unit(@px-size) / unit(@default-font-size);
    @px-size-no-unit: unit(@px-size);
    margin-left: ~"@{px-size-no-unit}px";
    margin-left: ~"@{rem-size}rem";
}

.margin-right-rem(@px-size) {
    @rem-size: unit(@px-size) / unit(@default-font-size);
    @px-size-no-unit: unit(@px-size);
    margin-right: ~"@{px-size-no-unit}px";
    margin-right: ~"@{rem-size}rem";
}

.padding-rem(@px-size) {
    @padding-top: ~`Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[0])`;
    @padding-right: ~`Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[1]) || @{padding-top}`;
    @padding-bottom: ~`Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[2]) || @{padding-top}`;
    @padding-left: ~`Number('@{px-size}'.match(/(\d+|\d*\.\d+)+/g)[3]) || @{padding-right} || @{padding-top}`;
    @top-rem-size: @padding-top / @default-font-size;
    padding-top: ~"@{padding-top}px";
    padding-top: ~"@{top-rem-size}rem";

    @right-rem-size: @padding-right / @default-font-size;
    padding-right: ~"@{padding-right}px";
    padding-right: ~"@{right-rem-size}rem";

    @bottom-rem-size: @padding-bottom / @default-font-size;
    padding-bottom: ~"@{padding-bottom}px";
    padding-bottom: ~"@{bottom-rem-size}rem";

    @left-rem-size: @padding-left / @default-font-size;
    padding-left: ~"@{padding-left}px";
    padding-left: ~"@{left-rem-size}rem";
}

.padding-top-rem(@px-size) {
    @rem-size: unit(@px-size) / unit(@default-font-size);
    @px-size-no-unit: unit(@px-size);
    padding-top: ~"@{px-size-no-unit}px";
    padding-top: ~"@{rem-size}rem";
}

.padding-bottom-rem(@px-size) {
    @rem-size: unit(@px-size) / unit(@default-font-size);
    @px-size-no-unit: unit(@px-size);
    padding-bottom: ~"@{px-size-no-unit}px";
    padding-bottom: ~"@{rem-size}rem";
}

.padding-left-rem(@px-size) {
    @rem-size: unit(@px-size) / unit(@default-font-size);
    @px-size-no-unit: unit(@px-size);
    padding-left: ~"@{px-size-no-unit}px";
    padding-left: ~"@{rem-size}rem";
}

.padding-right-rem(@px-size) {
    @rem-size: unit(@px-size) / unit(@default-font-size);
    @px-size-no-unit: unit(@px-size);
    padding-right: ~"@{px-size-no-unit}px";
    padding-right: ~"@{rem-size}rem";
}