@import "normalize";

// colors
$action-default-color: black;
$action-background-color: #DDD;
$action-hover-background-color: #BBB;
$action-active-color: white;
$action-active-background-color: #2B8CD2;

// spacing
$footer-height: 28px;

// fonts
$default-font: 'Open Sans', sans-serif;
$monospace-font: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#container {
  height: 100%;
  width: 100%;
}

main {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: row;
}

aside {
  font-family: $default-font;
  height: 100%;
}

#editor {
  height: calc(100vh - #{$footer-height});
  margin-left: 10px;

  .CodeMirror {
    width: 600px;
    height: 100%;

    font-family: $monospace-font;
    font-size: 14px;
    // explicitly set the line height, otherwise the cursor position may be wrong
    line-height: 18px;
  }
}

footer {
  height: $footer-height;
  background-color: rgba(85, 170, 255, 0.2);

  p {
    color: #666;
    margin: 0 0 0 10px;
    font-size: 14px;
    line-height: $footer-height;
  }
}


#resizer {
  width: 5px;
  height: 100%;
  background-color: #DDDDDD;
  cursor: col-resize;
}

#preview {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: scroll;

  iframe {
    border: none;
    width: 100%;
    height: 100%;
  }

  pre {
    height: 100%;
    overflow: scroll;
    padding: 20px;
    margin: 0;
  }
}

#actions {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 16px;

  list-style: none;

  li {
    display: inline-block;
    cursor: pointer;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    color: $action-default-color;
    background-color: $action-background-color;
    &:hover {
      background-color: $action-hover-background-color;
    }
    &.on {
      color: $action-active-color;
      background-color: $action-active-background-color;
    }
  }

  li + li {
    margin-left: 4px;
  }

  i {
    text-align: center;
    line-height: 40px;
    width: 40px;
  }

  #download {
    a {
      pointer-events: none;
      display: none;
    }
  }
}

.message {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #a94442;
  padding: 10px;
  background-color: #f2dede;
  border: 1px solid #ebccd1;
  border-radius: 4px;
}


@media print {
  main {
    height: 100%;
  }
  footer, #editor, .CodeMirror, #actions {
    display: none;
  }
}

// page style from resume
@page {
  size: A4 portrait;
  margin: 1.5cm 1.5cm;
}
