@import '../../variables';

.hocrjs-toolbar {
  position: fixed;
  z-index: 1;
  top: 0;
  height: 100%;
  border: none;
  .toggler {
    float: left;
    position: fixed;
    left: 0;
    font-family: monospace;
    color: $color-toolbar-toggler;
    background: $color-toolbar-border;
    height: 100vh;
    width: 1em;
    .toggler-inner {
      font-size: 1.5em;
      top: 40vh;
      position: fixed;
    }
    .toggler-hide { display:none; }
    .toggler-show { display:block; }
  }
  .wrapper {
    position: fixed;
    margin-left: 1em;
    background-color: $color-toolbar-bg;
    overflow: hidden;
    left: -32em;
    transition: all 0.5s ease;
    height: 100vh;
  }
  &.expanded {
    border-right: $border-width solid $color-toolbar-border;
    .wrapper { 
      padding-left: .5em;
      padding-right: .5em;
      width: 15em;
      left: 0;
    }
    .toggler-show { display:none; }
    .toggler-hide { display:block; }
  }
  ul.features {
    list-style-type: none;
    padding: 0;
    // width: 19em;
    li {
      background-color: $color-unchecked;
      margin-bottom: 2px;
      padding: 5px 0;
      &:before { content: '✗ '; }
      &.checked {
        background-color: $color-checked;
        &:before { content: '✓ '; }
      }
      input[type='checkbox'] { display: none; }
      label { width: 100%; }
    }
  }
  input.zoom {
    // width: 19em;
  }
  summary {
    font-size: 120%;
    span.font {
      font-size: 100%;
    }
  }
  select.font {
    width: 80%;
    font-size: 110%;
  }
}