// ------------------------------------------------------------------
// Margin
// ------------------------------------------------------------------
.utils-margin-loop(@index) when (@index < 256) {
    .o-mt@{index} {margin-top: @index px;}
    .o-mb@{index} {margin-bottom: @index px;}
    .o-mr@{index} {margin-right: @index px;}
    .o-ml@{index} {margin-left: @index px;}

    .utils-margin-loop(@index * 2);
}
.utils-margin-loop(2);

// ------------------------------------------------------------------
// Padding
// ------------------------------------------------------------------
.o-webclient-padding(@top: 0px, @right: @odoo-horizontal-padding, @bottom: 0px, @left: @odoo-horizontal-padding) {
    padding-top: @top;
    padding-right: @right;
    padding-bottom: @bottom;
    padding-left: @left;
}

// ------------------------------------------------------------------
// Caret
// ------------------------------------------------------------------
.utils-caret-boilerplate() {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
}
.o-caret-down(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: 0;
    border-left: @caret-width solid transparent;
    border-right: @caret-width solid transparent;
    border-top: @caret-width solid;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-up(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: @caret-width solid;
    border-left: @caret-width solid transparent;
    border-right: @caret-width solid transparent;
    border-top: 0;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-left(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: @caret-width solid transparent;
    border-left: 0;
    border-right: @caret-width solid;
    border-top: @caret-width solid transparent;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-right(@caret-width: @caret-width-base) {
    .utils-caret-boilerplate;
    border-bottom: @caret-width solid transparent;
    border-left: @caret-width solid;
    border-right: 0;
    border-top: @caret-width solid transparent;
    -moz-transform: scale(0.9999); // Smooth the caret on firefox
}

// ------------------------------------------------------------------
// Vendor prefixes
// ------------------------------------------------------------------
// Flex
.o-flex-display() {
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;

    display: flex;
}
.o-inline-flex-display() {
    display: -ms-inline-flexbox;
    display: -moz-inline-box;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;

    display: inline-flex;
}
.o-flex-flow(@direction, @wrap) {
    -ms-flex-flow: @direction @wrap;
    -moz-flex-flow: @direction @wrap;
    -webkit-flex-flow: @direction @wrap;

    flex-flow: @direction @wrap;
}
.o-flex(@grow, @schrink, @basis) {
    -ms-flex: @grow @schrink @basis;
    -moz-flex: @grow @schrink @basis;
    -webkit-box-flex: @grow;
    -webkit-flex: @grow @schrink @basis;
    
    flex: @grow @schrink @basis;
}
.o-justify-content(@justify) {
    -moz-justify-content: @justify;
    -webkit-justify-content: @justify;

    justify-content: @justify;
}
.o-align-content(@align) {
    -webkit-align-content: @align;

    align-content: @align;
}
.o-align-items(@align) {
    -webkit-align-items: @align;

    align-items: @align;
}
.o-align-self(@align) {
    -webkit-align-self: @align;

    align-self: @align;
}

// Background-size
// https://css-tricks.com/perfect-full-page-background-image/
.o-background-size(@size) {
    -webkit-background-size: @size;
    -moz-background-size: @size;
    -o-background-size: @size;
    background-size: @size;
}

// ------------------------------------------------------------------
// Dropdowns
// ------------------------------------------------------------------
.o-selected-li() {
    li {
        position: relative;
        > a {
            color: @odoo-main-text-color;
            &:hover {
                color: darken(@odoo-main-text-color, 10%);
            }
        }
        &.selected {
            > a {
                color: darken(@odoo-main-text-color, 10%);
                font-weight: bold;
                &:before {
                    font-family: FontAwesome;
                    position: absolute;
                    left: 6px;
                    content: "\f00c";
                }
            }
        }
    }
}

// ------------------------------------------------------------------
// Select Appearance
// ------------------------------------------------------------------
.o-appearance(@value) {
    -webkit-appearance: @value;
    -moz-appearance: @value;
    appearance: @value;
}

// ------------------------------------------------------------------
// Transform
// ------------------------------------------------------------------
.o-transform-origin(@x: 50%, @y: 50%, @z: 0) {
    -ms-transform-origin: @x @y @z;
    -webkit-transform-origin: @x @y @z;
    -moz-transform-origin: @x @y @z;
    transform-origin: @x @y @z;
}

// ------------------------------------------------------------------
// Animation
// ------------------------------------------------------------------
.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) {
    -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
    -moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
    -o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
    animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
}

// ------------------------------------------------------------------
// Transition
// ------------------------------------------------------------------
.o-transition(@property: all, @duration: 0s, @timing-function: ease, @transition-delay: 0s) {
    -webkit-transition: @property @duration @timing-function @transition-delay;
    -moz-transition: @property @duration @timing-function @transition-delay;
    -o-transition: @property @duration @timing-function @transition-delay;
    transition: @property @duration @timing-function @transition-delay;
}

// ------------------------------------------------------------------
// Animation
// ------------------------------------------------------------------
.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) {
    -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
    -moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
    -o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
    animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
}

// ------------------------------------------------------------------
// Transition
// ------------------------------------------------------------------
.o-transition(@property: all, @duration: 0s, @timing-function: easy, @transition-delay: 0s) {
    -webkit-transition: @property @duration @timing-function @transition-delay;
    -moz-transition: @property @duration @timing-function @transition-delay;
    -o-transition: @property @duration @timing-function @transition-delay;
    transition: @property @duration @timing-function @transition-delay;
}

// ------------------------------------------------------------------
// Columns
// ------------------------------------------------------------------
.o-columns(@width: auto, @col: auto) {
    -webkit-columns: @width @col;
    -moz-columns: @width @col;
    columns: @width @col;
}

// ------------------------------------------------------------------
// Position absolute
// ------------------------------------------------------------------
.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {
    position: absolute;
    top: @top;
    left: @left;
    bottom: @bottom;
    right: @right;
}

// ------------------------------------------------------------------
// Text overflow
// ------------------------------------------------------------------
.o-text-overflow(@display: inline-block) {
    display: @display;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top; // To update display context changed by overflow:hidden
}