@use "./abstract/_members" as *

.cache-toggle
  cursor: pointer
.left-handed
  .side-panel
    //background-color: $dark
    left: 2%
    padding: 0.3em
    position: fixed
    top: 3.7em
    background-color: #fff
    width: 28%
    .header
      float: left
    .corpus-doc-view
      .annotated-field-wrapper
        .annotated-field-runs
          max-height: 200px
          overflow-y: scroll
      .list-group
        .list-group-item-heading
          display: inline-block
          width: 60px
.right-handed
  .side-panel
    //background-color: $dark
    left: 70%
    padding: 0.3em
    position: fixed
    top: 3.7em
    background-color: #fff
    width: 28%
    .header
      float: right
    .corpus-doc-view
      .annotated-field-wrapper
        .annotated-field-runs
          max-height: 200px
          overflow-y: scroll
      .list-group
        .list-group-item-heading
          display: inline-block
          width: 60px

.simple-layout
  height: 100%
  .license
    padding-top: 10px
  .spinner
    position: absolute
    left: 50%
    top: 50%

.table
  tr
    td
      color: #005a9aff
      .active
        font-weight: bold
        text-decoration: underline
      .ngrams-selector
        display: flex
        .ngrams-chooser
          padding: 3px
      .trash
        text-decoration: line-through

.action-search
  margin: 10px

.context-menu
  position: fixed

.search-bar
  margin: 10px

/* */
.body
  ul
    li
      color: #005a9aff
    .nav
      color: #005a9aff

.btn-primary
  color: white
  background-color: #005a9aff
  border-color: black


ul
  .nav
    color: #005a9aff
  li
    color: #005a9aff

.frame
  height: 100vh
  iframe
    border: 0

.join-button
  padding-bottom: 100px
  padding-top: 100px


#app
  width: 100%

.router-inner
  display: flex

  &.left-handed
    flex-direction: row

  &.right-handed
    flex-direction: row


.main-page
  $self: &
  $page-padding: space-x(3) space-x(4)
  $topbar-height: 56px // ~ unworthy empirical value (@TODO topbar height calculation)

  flex-grow: 1 // quick workaround, stretching block when subjected to flex API

  &__main-row
    display: flex

    &--with-y-tiles

      #{ $self }__main-route
        width: 60%
      #{ $self }__vertical-tiles
        width: 40%

    &--only-y-tiles
      // ensure minimum height, so that the border delimiting "main route" and
      // its "vertical tiles" will not end abruptly
      min-height: calc( 100vh - #{ $topbar-height })

  // main route ~ main tile
  &__main-route
    padding: $page-padding
    width: 100%

  // optional vertical tiles ~ y axis column
  &__vertical-tiles
    display: flex
    flex-direction: column

  // optional horizontal tiles ~ x axis row
  &__horizontal-tiles
    display: flex
    flex-direction: row

    // dynamic width according to number of tiles
    @for $i from 1 through 10

      &--#{ $i } .tile-block
        width: calc( 100% / #{ $i })

.tile-block
  $tile-padding: space-x(0.5) space-x(2) space-x(1.5)

  &__header
    display: flex

    @include right-handed
      justify-content: flex-end

    @include left-handed
      justify-content: flex-start

  &__body
    padding: $tile-padding
