// this file should be imported into one that has the color definitions
@import "gruvbox_light"
$fg:			            $fg1        !default
$fg-hl:			            $fg0        !default
$fg-alt:		            $fg2        !default
$fg-alt-hl:		            $fg1        !default
$bg:			            $bg0-hard   !default
$bg-hl:			            $bg1        !default

$accent:                    $light-red  !default

$button-bg:                 $bg         !default
$button-bg-hl:              $bg-hl      !default
$button-fg:                 $fg         !default
$button-fg-hl:              $fg-hl      !default

$font-size:                 16px
$monofont:                  "UbuntuMono", monospace
$footer-height:             20px
$footer-padding-y:          2px
$footer-padding-x:          12px
$box-margin:                0.4rem
$file-height:               300px
$splash-font-size:          40px
$button-font-size:          $font-size
$button-padding:            8px
$move-button-font-size:     $font-size - 2px
$move-button-padding:       $button-padding - 2px

*
  font-family: "Ubuntu", Verdana, sans-serif
  color: $fg
  // font-size: $font-size


html, body  // fill entire screen so that footer is always on bottom
  height: 100%
  margin: 0

body
  background-color: $bg
  // have main up top and footer at bottom 
  display: flex
  flex-direction: column
  min-height: 100%

nav
  margin-top: 0.3rem
  flex-shrink: 0

main
  flex-grow: 1  // puts the statusline at the bottom of the page
  padding-bottom: $footer-height + 2 * $footer-padding-y
  *
    margin-left: auto
    margin-right: auto
    text-align: center

.main-box
  background-color: $bg1
.current-file
  width: 100%
  height: $file-height
  position: relative
  overflow: scroll
  background: $bg1

  .splash-text
    font-size: $splash-font-size
    padding-top: calc(($file-height - $splash-font-size - $button-font-size - 2 * $button-padding - 20px) / 2)
    padding-bottom: 20px
    // padding-bottom: ($file-height - $splash-font-size - $button-font-size - 2 * $button-padding) / 2
    filter: drop-shadow(0.10rem 0.10rem 0 $accent)

  img, video, audio
    max-width: 100%
    max-height: 100%
    width: auto
    height: auto
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    margin: auto

.second-box
  padding-top: $box-margin
  padding-bottom: $box-margin


footer
  padding: $footer-padding-y $footer-padding-x
  font-size: $footer-height - $footer-padding-y * 2
  background: $fg
  color: $bg
  height: $footer-height
  min-height: $footer-height  // idk why but this is required
  width: 100%
  position: fixed
  bottom: 0
  overflow-x: scroll
  overflow-y: hidden
  white-space: nowrap
  *
    color: $bg
.statusline
  font-family: $monofont
  text-align: left
  *
    font-family: $monofont


a
  color: $fg-hl

.path
  font-family: $monofont 

.key
  padding: 3px 6px
  background: $fg1
  color: $bg0
  border-style: solid 
  border-width: 1px 
  border-color: $fg0-hard
  border-radius: 4px
  font-family: $monofont

// p
//   text-align: justify

code
  color: $fg1
  font-family: $monofont
  text-align: left

hr
  color: $accent

h1, h2
  text-align: center
  filter: drop-shadow(0.04em 0.04em 0 $accent)
  padding: 0px 20px

button, input
  color: $button-fg
  background-color: $button-bg
  font-size: $button-font-size
  padding: $button-padding
  border-radius: 0
  filter: drop-shadow(0.1rem 0.1rem 0 $accent)
  font-family: $monofont
  margin: 0.2rem
.move-buttons
  margin: 0

.move-button
  font-size: $move-button-font-size
  padding: $move-button-padding

button:hover
  color: $button-fg-hl
  background-color: $button-bg-hl

#start-button
  filter: drop-shadow(0.1rem 0.1rem 0 $light-green)
#configure-button
  filter: drop-shadow(0.1rem 0.1rem 0 $light-blue)
#undo-button
  filter: drop-shadow(0.1rem 0.1rem 0 $light-gray)
#skip-button
  filter: drop-shadow(0.1rem 0.1rem 0 $light-gray)
#key
  width: 20px
  text-align: center
  // #directory
#save-button
  filter: drop-shadow(0.1rem 0.1rem 0 $light-red)
#load-button
  filter: drop-shadow(0.1rem 0.1rem 0 $light-blue)
  


.add-mapping-form
  margin: auto
  padding-bottom: $box-margin
  width: 400px
  .form-row
    text-align: left
    *
      text-align: left
    label
      display: inline-block
      width: 100px
      text-align: right
    input
      margin-left: 0
      text-align: left
    button
      margin-left: 0
      // width: 50%


.filename-input
  width: 90%
  margin: auto
  padding: 0.1rem
.file-list
  width: 90%
  margin: auto
  margin-top: 1rem
.file-list-content
  overflow: hidden
  border-color: $dark-blue
  border-style: solid
  border-width: 2px
  min-height: 0.2rem
  p
    margin: 0
    padding: 0.1rem
    text-align: left
.file-list-item:hover
  background: $dark-blue !important
  color: $bg1
  cursor: pointer

  
  
.file-list-item:nth-child(even)
  background: $bg1
.file-list-item:nth-child(odd)
  background: $bg2

.selected-file-list-item
  background: $light-blue !important
  color: $bg1


// Desktop optimierung
@media only screen and (min-width: 900px)
  main
    display: flex
    flex-direction: row
    padding-bottom: $footer-height + 2 * $footer-padding-y
  .main-box
    width: 75%
    max-height: calc(100vh - $footer-height - 2 * $footer-padding-y)
  .splash-text
    filter: drop-shadow(0.20rem 0.20rem 0 $accent)
    
  .second-box
    display: flex
    flex-direction: column
    width: 25%
    max-height: calc(100vh - $footer-height - 2 * $footer-padding-y)
    overflow: scroll
    padding-top: 0
    padding-bottom: 0

  .current-file
    height: 100%
    width: 100%