<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">

<dom-module id="viewer-pen-options">
  <template>
    <style>
    #colors,
    #sizes {
      display: grid;
      grid-gap: 20px 10px;
      grid-template-columns: repeat(8, 1fr);
      margin: 10px;
    }
    #colors {
      overflow: hidden;
    }
    input,
    #expand {
      height: 32px;
      width: 32px;
    }
    #expand {
      grid-column: 8;
      grid-row: 1 / 4;
    }
    input {
      -webkit-appearance: none;
      border-radius: 16px;
      margin: 0;
      padding: 0;

    }
    #sizes input {
      background: black;
      border: calc(15px - 13px * var(--item-size)) solid white;
      position: relative;
    }
    #sizes input:hover {
      box-shadow: 0 0 0 1px silver;
    }
    #sizes input[checked] {
      box-shadow: 0 0 0 1px black;
    }
    #colors input {
      background: var(--item-color, magenta);
      transition: transform 300ms;
      transform: scale(0.625)
    }
    #colors input:hover {
      transform: scale(0.8125);
    }
    #colors input[checked] {
      transform: scale(1);
    }
    #colors input[outline] {
      border: 1px solid silver;
    }
    #separator {
      background: silver;
      height: 1px;
    }
    </style>
    <div id="colors" on-change="colorChanged_" expanded$="[[expanded_]]">
      <template is="dom-repeat" items="[[colors_]]">
        <input type="radio" name="color" value="[[item.color]]"
            outline$="[[item.outline]]"
            checked$="[[equal_(selectedColor, item.color)]]"
            tabindex="1" style="--item-color: [[item.color]]"
            title$="[[lookup_(strings, item.name)]]"
            aria-label$="[[lookup_(strings, item.name)]]"
            on-pointerdown="blurOnPointerDown">
      </template>
      <paper-icon-button id="expand" icon="cr:expand-more"
          tabindex="3"
          on-click="toggleExpanded_"
          aria-label$="[[strings.tooltipExpand]]"
          title$="[[strings.tooltipExpand]]">
      </paper-icon-button>
    </div>
    <div id="separator"></div>
    <div id="sizes" on-change="sizeChanged_">
      <template is="dom-repeat" items="[[sizes_]]">
        <input type="radio" name="size" value="[[item.size]]"
            checked$="[[equal_(selectedSize, item.size)]]"
            tabindex="2" style="--item-size: [[item.size]]"
            title$="{{lookup_(strings, item.name)}}"
            aria-label$="[[lookup_(strings, item.name)]]"
            on-pointerdown="blurOnPointerDown">
      </template>
    </div>
    </paper-icon-button>
  </template>
  <script src="viewer-pen-options.js"></script>
</dom-module>