/**
* Project animations
**/

/**
 * START of slide in animation for extended toolbar.
 */
@include keyframes(slideInX) {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

@include keyframes(slideOutX) {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@include keyframes(slideInExtX) {
    0% { transform: translateX(-500%); }
    100% { transform: translateX(0%); }
}

@include keyframes(slideOutExtX) {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-500%); }
}

/**
 * END of slide out animation for extended toolbar.
 */

/**
 * START of slide in / out animation for main toolbar.
 */
@include keyframes(slideInY) {
    100% { transform: translateY(0%); }
}

@include keyframes(slideOutY) {
    0% { transform: translateY(0%); }
    100% { transform: translateY(-100%); }
}

/**
 * END of slide in / out animation for main toolbar.
 */

/**
 * START of slide in animation for extended toolbar (inner) panel.
 */

// FIX: Can't use percentage because of breaking animation when width is changed
// (100% of 0 is also zero) Extracted this to config variable.
@include keyframes(slideInExt) {
    from { left: -$sidebarWidth; }
    to   { left: 0; }
}

@include keyframes(slideOutExt) {
    from { left: 0; }
    to   { left: -$sidebarWidth; }
}

/**
 * END of slide in animation for extended toolbar (inner) panel.
 */

/**
* START of slide in animation for extended toolbar container
**/

@include keyframes(slideOutExtContainer) {
    from { width: $sidebarWidth; }
    to { width: 0; }
}

@include keyframes(slideInExtContainer) {
    from { width: 0; }
    to { width: $sidebarWidth; }
}

/**
* END of slide in animation for extended toolbar container
**/