<link rel="import" href="../../../../packages/polymer/polymer.html">

<polymer-element name="sliding-checkbox">
  <template>
    <style>
      .switch {
        position: relative;
        width: 121px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
      }
      .hide {
        display: none;
      }
      .label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #999999;
        border-radius: 15px;
      }
      .content {
        width: 200%;
        margin-left: -100%;
        -moz-transition: margin 0.3s ease-in 0s;
        -webkit-transition: margin 0.3s ease-in 0s;
        -o-transition: margin 0.3s ease-in 0s;
        transition: margin 0.3s ease-in 0s;
      }
      .content:before, .content:after {
        float: left;
        width: 50%;
        height: 30px;
        padding: 0;
        line-height: 30px;
        color: white;
        font: 400 14px 'Montserrat', sans-serif;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      .content:before {
        content: {{ checkedText }};
        padding-left: 10px;
        background-color: #0489C3;
      }
      .content:after {
        content: {{ uncheckedText }};
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
      }
      .dot {
        width: 14px;
        margin: 8px;
        background: #FFFFFF;
        border: 2px solid #999999;
        border-radius: 15px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 87px;
        -moz-transition: all 0.3s ease-in 0s;
        -webkit-transition: all 0.3s ease-in 0s;
        -o-transition: all 0.3s ease-in 0s;
        transition: all 0.3s ease-in 0s;
      }
      :checked + .label .content {
        margin-left: 0;
      }
      :checked + .label .dot {
        right: 0px;
      }
    </style>
    <div class="switch">
      <input type="checkbox"
             class="hide"
             id="slide-switch"
             on-change="{{ change }}">
      <label class="label" for="slide-switch">
        <div class="content"></div>
        <div class="dot"></div>
      </label>
    </div>
  </template>
</polymer-element>

<script type="application/dart" src="sliding_checkbox.dart"></script>