@import (less) "../node_modules/webmaker-app-icons/css/ionicons.css";
@import "normalize";
@import "variables";
@import "mixins";
@import "fonts";

body, html {
    margin: 0;
    padding: 0;
    background-color: @background;
    height: 100%;
    overflow: hidden;
    font-family: "FiraSans", "Fira Sans", "Fira Sans OT", sans-serif;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
}

// http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

#app {
    height: 100%;
    position: relative;
    overflow: auto;
}

main {
    padding-bottom: 20px;
}

.main {
    .header-space;
    .footer-space;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: fade(@black, 70%);
    z-index: @modal-overlay-z-index;

    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 2s linear;
    &.on {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.2s linear;
    }
}


// TODO maybe find/create a more appropriate less file for this
.app-preview {
  border-radius: 4px;
  background: @white;
  box-shadow: 0 2px 0 0 #C9D0D4;
}

/*********************************************************
* Generic components
*/
@import "helpers";
@import "animations";
@import "typography";
@import "forms";
@import "colors";
@import "buttons";
@import "lists";
@import "tips";
@import "alerts";
@import "loader";
@import "missing";
@import "published-app";


/**
 * Temp file
 * Generated & recycled by the build script
 */
@import "./build/styles/bundle";