/*
*
* @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.
*
*/

.fadein {
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    -webkit-animation: fadein 300ms;

    &.fast {
        -webkit-animation: fadein 150ms;
    }
}

.fadeout {
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    -webkit-animation: fadeout 300ms;

    &.fast {
        -webkit-animation: fadeout 150ms;
    }
}

@-webkit-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}

.legacy-chrome .animate-moveleft {
    -webkit-transform: none;
    -webkit-transition-property: none;
    -webkit-transition-duration: none;
    left:0;
}

.legacy-chrome .animate-moveright {
    -webkit-transform: none;
    -webkit-transition-property: none;
    -webkit-transition-duration: none;
    left:90%;
}

/* special fix for broken spin animation for Firefox on windows */
/* see http://stackoverflow.com/questions/19661001/firefox-bug-font-is-sloppy-when-transformed#19684395 */
.fix-spin .fa-spin {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'1\'/></filter></svg>#grayscale");
}

// small screens (mobile)
// note that we have to target max-width and max-device-width
// to target all devices which don't support the max-device-width
// property
@media(max-width: @smartphone-breakpoint) and (orientation: portrait), (max-height: @smartphone-breakpoint) and (orientation: landscape) {
    .animate-moveright {
        -webkit-transform: translateX(90%);
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 300ms;
    }

    .animate-moveleft {
        -webkit-transform: translateX(0%);
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 300ms;
    }
}