<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">

<dom-module id="viewer-page-selector">
  <template>
    <style>
      :host {
        color: #fff;
        font-size: 0.81rem;
      }

      :host ::selection {
        background: rgba(255, 255, 255, 0.3);
      }

      #pageselector {
        --cr-input-focus-color: transparent;
        --cr-input-container: {
          overflow: initial;
        }
        --cr-input-error-display: none;
        --cr-input-background-color: transparent;
        --cr-input-color: white;
        --cr-input-input: {
          -webkit-margin-start: -3px;
          -webkit-padding-end: 3px;
          -webkit-padding-start: 3px;
          padding-bottom: 0;
          padding-top: 0;
          text-align: end;
          caret-color: #fff;
          border-radius: 2px;
          box-sizing: content-box;
        }
        -webkit-margin-start: -3px;
        height: 100%;
        width: 1ch;
      }

      #pageselector[focused_],
      #pageselector:hover {
        --cr-input-background-color: rgba(0, 0, 0, 0.5);
      }

      #slash {
        padding: 0 3px;
      }

      #pagelength-spacer {
        -webkit-margin-start: -2px;
        text-align: start;
      }

      #pageselector,
      #slash,
      #pagelength-spacer {
        display: inline-block;
      }
    </style>
    <cr-input id="pageselector" value="[[pageNo]]" on-mouseup="select"
        on-value-changed="onInputValueChange_" on-change="pageNoCommitted"
        aria-label$="{{strings.labelPageNumber}}">
    </cr-input>
    <span id="slash"> / </span>
    <span id="pagelength-spacer">
      <span id="pagelength">{{docLength}}</span>
    </span>
  </template>
  <script src="viewer-page-selector.js"></script>
</dom-module>
