// Tres base grid and grid related settings
// ========================================

@import 'mixins';

// Resets

// Quick FontAwesome fix so icons push the sentence a bit to the right
[class^="icon-"]:before { margin-right : .5rem }
input[class^="icon-"] {
  position: relative;

  &:before {
    @include translate(0, -50%);
    position: absolute;
    top: 50%
  }
}

* {
  margin             : 0;
  padding            : 0;
  outline            : 0;
  border             : 0;
  -webkit-box-sizing : border-box;
  box-sizing: border-box;
}

ul { list-style : none }
input, button, textarea { font-size : 100% }

// ---

$spacing: .5rem;

// Structural settings for getting screens to use the whole vertical space.

html {
  min-height: 420px;
  min-width: 100%;
  font-size : 62.5%;
}
html, body { overflow: hidden; width: 100%; height: 100% }
body {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height : 2.3rem;
  -webkit-perspective      : 800;
  -webkit-text-size-adjust : none;
  -webkit-transform-style  : preserve-3d;
  -webkit-user-select      : none
}

// ---

// A base section unit. Think of this as a "screen".
.screen {
  -webkit-transition      : all 0.25s ease-out;
  -webkit-transform-style : preserve-3d;
  -webkit-transform       : translate3d(100%,0%,0);
  position       : fixed;
  top            : 0;
  right          : 0;
  bottom         : 0;
  left           : 0;
  opacity        : 0;
  overflow-y     : auto;
  pointer-events : none;

  &.current {
    opacity        : 1;
    pointer-events : auto;
    -webkit-transform : translate3d(0%,0%, 0)
  }

  &.modal { z-index: 1000 }
}

// ---

// Headers

.screen > header {
  position   : fixed;
  top        : 0;
  right      : 0;
  left       : 0;
  margin     : 0;
  text-align : center;
  overflow   : hidden;
  z-index    : 100;

  & + .content { top : 60px }

  & > * { margin: $spacing*2 0 }
  h1 {
    font-size   : 1.6rem;
    margin      : 1.1rem 0;
    white-space : nowrap
  }
  &>a, &>button {
    position: absolute;
    top             : 0;
    width           : 2.9rem;
    font-size       : 2.1rem;
    text-decoration : none;


    &.left  { left: $spacing }
    &.right { right: $spacing }
  }
  menu {
    @extend .spans-horizontally;
    a, button {
      font-size: 2.3rem
    }
  }
}

// ---

// Footers

.screen > footer {
  position: fixed;
  bottom: 0;
  right : 0;
  left: 0;
  overflow: hidden
}

// ---

// Screen content

.screen > .content {
  -webkit-overflow-scrolling: touch;
  position   : fixed;
  top        : 0;
  right      : 0;
  bottom     : 0;
  left       : 0;
  overflow-y : auto;
}

// ---

// Type margins and sizes
.screen {
  h1 { font-size: 2.9rem; margin-bottom : 1.6rem }
  h2 { font-size: 2.6rem; margin: 1.3rem 0 }
  p, input, textarea, button, li { font-size : 1.3rem }
  p { margin : 1.1rem 0 }
}

// ---

// Default form settings

form {
  margin : 1.3rem 0;
  input:not([type="checkbox"]), textarea {
    display     : block;
    padding     : 0.9rem;
    width       : 100%;
    font-family : inherit;
  }
  input[type="checkbox"] {
    width: 1rem;
    height: 1rem
  }
  input[type="checkbox"] + label {
    display: inline-block;
    margin-left: $spacing;
  }
}

// ---