MainWindow {
  display: flex
  flex: 1
  flex-direction: column
  :not(.-fullscreen) {
    -darwin {
      div.top {
        padding-left: 70px
      }
    }
  }
  -darwin {
    div.top {
      span.appTitle {
        span.title {
          visibility: visible
        }
      }
    }
  }
  div.top {
    display: flex
    align-items: center
    padding: 6px
    position: relative
    z-index: 100
    span {
      input.search {
        padding: 4px 8px
        border-radius: 3px
        border: 0 none
        font-size: 120%
        width: 180px
        box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1)
        :focus {
          outline: 0
        }
      }
    }
    span.history {
      padding-left: 6px
      height: 26px
      display: inline-block
      a {
        cursor: pointer
        text-decoration: none !important
        display: inline-block
        width: 28px
        height: 100%
        border-radius: 5px
        background: svg(backArrow) no-repeat center
        opacity: 0.4
        -active {
          opacity: 1
        }
      }
      a + a {
        transform: rotate(180deg)
      }
      @svg backArrow {
        width: 14px
        height: 14px
        content: '<g stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 7h11M7 13L1 7l6-6"/></g>'
        path {
          stroke: #979797
        }
        -active {
          path {
            fill: #ddd
          }
        }
      }
    }
    span.nav {
      display: inline-block
      a {
        padding: 4px 10px
        border-radius: 3px
        font-size: 120%
        cursor: pointer
        margin-left: 8px
        text-decoration: none !important
        :hover {
          color: black
        }
        -selected {
          color: black
        }
        -drop {
          :after {
            background-image: svg(dropArrow)
            background-repeat: no-repeat
            background-position: center right
            width: 10px
            height: 14px
            display: inline-block
            content: ' '
            margin-left: 6px
            margin-right: -6px
            padding-left: 5px
            margin-bottom: -2px
          }
        }
        -add {
          border-color: #498849
          background-color: #255d24
          text-shadow: 1px 1px 1px #000
          color: white
          :active {
            background-color: #1f331f !important
          }
          :hover {
            background-color: #356d34
            border-color: #4cb54c
          }
        }
      }
    }
    span.appTitle {
      flex: 1
      text-align: center
      font-size: 20px
      letter-spacing: 1px
      -webkit-app-region: drag
      position: relative
      span.title {
        visibility: hidden
      }
      div.info {
        display: block
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
        margin-top: -3px
        opacity: 1
        transition: opacity 0.1s
        max-height: 25px
        padding: 0 10px
        font-size: 13px
        letter-spacing: 0
        [hidden] {
          opacity: 0
        }
      }
    }
  }
  div.info {
    a.message {
      display: block
      padding: 10px
      background: #deffde
      transition: color 0.2s, background-color 0.2s
      color: #217720
      a.ignore {
        float: right
        border-radius: 10px
        padding: 2px 5px
        margin-top: -2px
        :hover {
          text-decoration: none
          background: silver
          color: white
        }
      }
      :hover {
        text-decoration: none
        background: #c0ffae
      }
    }
    div.status {
      padding: 5px
      background: #7c7c7c
      color: white
      (svg) {
        width: 20px
        height: 20px
      }
    }
    [hidden] {
      display: block
      max-height: 0
      animation: none
    }
    max-height: 100px
    box-shadow: 0 0 3px #616161
    overflow: hidden
    transition: 0.5s max-height
    animation: 0.5s slide-in
    position: relative
    z-index: 1
  }
  div.main {
    flex: 1
    position: relative
    div.view {
      position: absolute
      top: 0
      bottom: 0
      left: 0
      right: 0
      display: flex
      flex-direction: column
      [hidden] {
        visibility: hidden
      }
      div {
        -webkit-user-select: text
      }
    }
  }
  div.bottom {
    position: relative
    box-shadow: 0 0 3px #222
    background: #222
    align-items: center
    display: flex
    padding: 5px
    audio {
      color: #eee
      width: 100%
      ::-webkit-media-controls-panel {
        background: transparent
      }
      ::-webkit-media-controls-current-time-display {
        color: inherit
      }
    }
  }
}
@keyframes slide-in {
  0% {
    max-height: 0
  }
  100% {
    max-height: 100px
  }
}
@svg dropArrow {
  width: 12px
  height: 6px
  content: "<path d='M2,0 L10,0 L6,6 Z' />"
  path {
    fill: #888
  }
  -active {
    path {
      fill: #ddd
    }
  }
}