@import "assets/bulma.min"

html
  overflow-y: auto

$header-height: 64px
$sidebar-width: 250px
$edit-sidebar-width: 300px

#app
  display: grid
  min-height: 100vh
  grid-template-rows: $header-height auto
  grid-template-columns: $sidebar-width auto $edit-sidebar-width

  #main-navbar
    grid-column-start: 1
    grid-column-end: -1
    box-shadow: 0 0 5px rgba(0,0,0,0.3)
    .title, .subtitle
      margin: 0
    .subtitle
      margin-left: 1.25em

  #main
    grid-column-start: 2

    .thoughts ul li
      cursor: pointer
      margin-bottom: 0.3em
      padding-left: 0.5em
      border-radius: 0.3em
      &:hover
        background: #eee

    .error-message
      border-radius: 0.3em
      margin: 0.3em
      color: #f14668
      background-color: #fee
      padding: 0.5em
      font-size: 0.875rem

  #edit-sidebar
    grid-column-start: 3
    border-left: 1px solid #ddd
    padding: 0.5em

    input
      border: none
      border-radius: 0
      border-bottom: 1px solid transparent
      box-shadow: none
      padding: 0.2em 0

      &:focus
        border-bottom: 1px solid #ddd

  #main-sidebar
    grid-column-start: 1
    padding: 2em 0.5em 0px
    border-right: 1px solid #ddd

    .menu-label
      .button
        color: #aaa
        float: right
        margin-top: -0.75em
        border-color: transparent

        &:hover
          color: #000
          border-color: #b5b5b5

    .menu-list.aol
      margin-top: 1em
      margin-left: 1em

      li
        font-size: 0.9em
        margin-bottom: 1em
        padding-bottom: 0.3em
        cursor: pointer
        color: #777

        &.active
          color: #222
          border-bottom: 2px solid #b5b5b5

        &:hover
          color: #000

  #main-sidebar, #edit-sidebar, #main
    transition: all 0.2s ease-out 0s
