// import milligram
@import '../node_modules/milligram/src/milligram.sass';

// import codemirror
@import '../node_modules/codemirror/lib/codemirror.css'; 
@import '../node_modules/codemirror/theme/monokai.css'; 

// import other stuff
@import '_theme.sass'; 
@import 'mixins/_all.sass'; 
@import 'comps/_all.sass'; 
  
body, code, pre
  background: $primary; 
  color: $text; 
  margin: 0; 

pre, code
  font-size: 1.5rem; 
  word-break: break-all;

input, textarea, select, button, 
.button, .cm-s-monokai.CodeMirror
  color: $text
  border: none !important; 
  border-radius: .4rem; 
  background-color: $primaryAlt !important;

button
  &[disabled], &.disabled
    cursor: default;

input, textarea
  font-size: 1.6rem;
  font-family: $fontFamily;
  font-weight: 300; 
  resize: none;
  &[disabled]
    opacity: 0.8; 
    cursor: not-allowed;  
  @include placeholder()
    opacity: 0.85; 
    color: $text; 

select
  -webkit-appearance: none;
  -moz-appearance: none;
  text-overflow: '';
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat; 

  &:focus
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')

.button.disabled
  cursor: default; 

a
  color: $link
  cursor: pointer; 
  &:visited, &:focus
    color: $link;
  &:hover
    color: $linkAct; 

.danger
  color: $danger; 

.noMargin
  margin: 0 !important; 

.float-right
  margin-left: auto;
  
.float-left
  margin-right: auto; 

.container
  display: flex;
  flex-direction: column;

.CodeMirror 
  width: 100%; 

.cm-s-monokai span.cm-comment
  color: #ccc9ba; 

.content
  min-height: calc(100vh - 55px - 50px);
  padding: 10px; 
  p, pre
    word-wrap: break-word;
    word-break: break-all;

.v-center
  min-height: calc(100vh - 55px - 50px - 20px); 
  flex-direction: row; 
  align-items: center; 

.no-mob
  display: none !important; 

.inline
  display: inline-flex !important; 
  align-items: middle; 
  
  select, input
    width: auto;
    height: 28px; 
    flex-grow: 1;
    margin-left: 5px; 
    margin-bottom: 0; 
    padding: 6px; 
    border: none; 

.Markdown
  pre
    margin-bottom: 2.5rem

@media screen and (min-width: 640px)
  .no-mob
    display: block !important;