/*
*
* @copyright Copyright (c) Open-Xchange GmbH, Germany <info@open-xchange.com>
* @license AGPL-3.0
*
* This code is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.

* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public License
* along with OX App Suite. If not, see <https://www.gnu.org/licenses/agpl-3.0.txt>.
*
* Any use of the work other than as authorized under this license or copyright law is prohibited.
*
*/

.border-radius(@radius: 0) {
    // Deprecated: This mixin is useless now, as vendor prefixes are not needed anymore.
    // All supported browsers have border-radius support
    border-radius: @radius;
}

.vertical-gradient(@startColor: #888888, @endColor: #333333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(top, @startColor, @endColor);
    background-image: -o-linear-gradient(top, @startColor, @endColor);
    background-image: linear-gradient(to bottom, @startColor, @endColor);
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor)));
}

.radial-gradient(@color1: #000000, @color2: #555555, @color3: #ffffff) {
    background: mix(@color1, @color3, 60%); /* Old browsers */
    background: -moz-radial-gradient(center, circle cover, @color1 0, @color2 40%, @color3 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,@color1), color-stop(31%,@color2), color-stop(100%,@color3)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  @color1 0,@color2 31%,@color3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  @color1 0,@color2 31%,@color3 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  @color1 0,@color2 31%,@color3 100%); /* IE10+ */
    background: radial-gradient(center, ellipse cover,  @color1 0,@color2 31%,@color3 100%); /* W3C */
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@color1),argb(@color3)));
}

.picture(@width: 64px, @height: 64px) {
    width: @width;
    height: @height;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: @contact-picture-radius;
}

.ellipsis() {
    .text-overflow();
}

.placeholder(@color, @weight: normal) {
    &::-webkit-input-placeholder {
        color: @color;
        font-weight: @weight;
    }
    &:-moz-placeholder{
        color: @color;
        font-weight: @weight;
    }
    &::-moz-placeholder {
        color: @color;
        font-weight: @weight;
    }
    &:-ms-input-placeholder {
        color: @color;
        font-weight: @weight;
    }
}

.overflow(@type: auto) {
    overflow: @type;
    -webkit-overflow-scrolling: touch;
}

.overflow-x(@type: auto) {
    overflow-x: @type;
    -webkit-overflow-scrolling: touch;
}

.overflow-y(@type: auto) {
    overflow-y: @type;
    -webkit-overflow-scrolling: touch;
}

.backface-visibility(@type: hidden) {
   .touch & {
        backface-visibility: @type;
        -webkit-backface-visibility: @type;
        -moz-backface-visibility: @type;
    }
}

//used in files module
.image-effect(@opacity: 1) {
    img, .preview-cover, .fa {
        opacity: @opacity;
    }
}

.align-self(@align: auto) {
    -webkit-align-self: @align;
    -moz-align-self: @align;
    -ms-align-self: @align;
    align-self: @align;
}

.flex-center(@direction: column) {
    display: flex;
    flex-direction: @direction;
    justify-content: center;
    align-items: center;
}