@import './_mixin.styl'

$line-high-color = #B2B2B2
$body-padding-vertical = r(16)
$line-color = #d9d9d9

//======== 【cell】 ========
$cell-title-fontsize = .3rem
$cell-title-color = #888
$cell-left-color = #333
$cell-left-fontsize = r(15)
$cell-right-color = #999
$cell-right-fontsize = r(13)
$cell-input-color = #555
$cell-input-fontsize = .3rem
$cell-icon-fontsize = .42rem
$cell-select-color = #A9A9A9
$cell-select-fontsize = $cell-left-fontsize
$cell-arrow-color = #C9C9C9
$cell-arrow-fontsize = .34rem


.tn
  &-cell
    position relative
    z-index 5

  &-cell-item
    box-sizing border-box
    background-color #fff
    min-height: r(50)
    display flex
    position relative
    padding-left $body-padding-vertical - r(5)
    overflow hidden
    &:not(:last-child):after
      line-1px(bottom, $line-color)
      left $body-padding-vertical
      right $body-padding-vertical

  &-cell-left
    color $cell-left-color
    font-size $cell-left-fontsize
    white-space nowrap
    display flex
    align-items center

  &-cell-right
    flex 1
    width 100%
    color $cell-right-color
    text-align right
    font-size $cell-right-fontsize
    padding-right $body-padding-vertical
    display flex
    align-items center
    justify-content flex-end
    input[type="datetime-local"],
    input[type="date"],
    input[type="radio"],
    input[type="checkbox"]:not(.tn-switch)
      position absolute
      left -99vw
      & + .tn-cell-checkbox-icon,
      & + .tn-cell-radio-icon
        width r(20)
        height r(20)
        background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA5UExURUdwTHOEo3WDqHSEo3ODo3OEo3OGpXSEo3uPpnSEonODov////n6/IqXsZ+pv8zR3djc5bO7zOvt8lWrGlMAAAAKdFJOUwDoI7/z1lJ9D6ikgYsWAAAA8ElEQVQ4y5VV2xaDIAzzggK2Avr/H7uWsTN1IlnehBxC2hK77oTB+nEyZhq9HboqnJ2WAybrKjSzXGDuqHOf90JMO/OeYsif/XzlWV1eE9MXadU1e5b1Sot0QVSqP8orLzD9gPUC/qy70S22o/pc572ZxZETv4GqEPXefYRXrhN5LeJO6hzpAVEq78qB9IhypPQ3PROT9F3mRVzxM5GFMqhyoAaCavuGlWLHd2PzivmSo3rZW8Rd3Ziml+zG4ERYGjYDlwcuONBCyi2EhwIfM3hw4aeAPy74ueIBgEcKHlJ3scd3sfdHkOLRjId94/fxAgCeNf+zuizIAAAAAElFTkSuQmCC') no-repeat
        background-size cover
      &:checked
        & + .tn-cell-checkbox-icon,
        & + .tn-cell-radio-icon
          background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAzUExURUdwTACD/wCD/wCH/wCD/wCQ/wCD/wCD/wCC/wCC/wCD/wCG/wCE/wCF/wCD/wCE/wCC/+WxOooAAAAQdFJOUwB/qRbVCsJy5vSbIU5AYCw+C2+yAAABGUlEQVQ4y5VVYZfEEAwkIoRS///XHrt7d6K0dj6079W8jkxGKCVgcgD0niBko5awjkoHcnZB82WAn1HThfaippHnygJOyoayROjlb3iVuaE7qB/lAcdng/6J6O2O8J+44Wcit37qsgFdibhDRKVi2UJcl0Ipc18OrMSsaBgoWvBand0aLWrxcTAY1dRFPisviy89kXN6i3G6JIB76Zoni78hSDwYKTZcG1oTkuv7HLZEwp7W+9O3ZxwTBdLw9q/mi8FrfkQL+X3oLE5aKI18+WJpFoohZs1pmMdsCK4PtAjuTnL1d4dr+7g+iuv/UQF3POiH1A0T5IzUG7qfiuaD9JiMZn0JO+v5FDda9B31zcUQHRAyI4GLcuUHhWNICJ5ISJIAAAAASUVORK5CYII=')
    &:active
      background none /* for firefox */

  &-cell-right
    & input[type="text"],
    input[type="number"]:not(.tn-spinner-input),
    input[type="tel"],
    input[type="url"],
    input[type="email"],
    input[type="password"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="time"],
    .tn-datetime-input
      width 1%
      flex 1
      border none
      font-size $cell-input-fontsize
      background transparent
      color $cell-input-color
      display flex
      justify-content flex-start
      align-items center
      text-align left /* fuck UC */
    select
      flex 1
      border none
      display block
      color $cell-select-color
      font-size $cell-select-fontsize
      margin-left r(-4) /* 去除select默认缩进 */

  &-cell-more
    display flex
    align-items center
    margin-right $body-padding-vertical
  &-cell-icon
    display block
    margin-right r(5)
    img
      height r(20)

  &-cell-arrow
    &:after
      margin-left r(10)
      display block
      content ' '
      background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUBAMAAABL3sEiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURUdwTJqgq5mgqp2krZqgqpqgq5qgq6SttpqgrKGpsZqirJqgq5uirJmgq5qgq5mfqhiS9wwAAAAPdFJOUwDR9R3DkXUHXA9EpC7lrwDvtf0AAABRSURBVAjXY9howAAC8nfA1NlPC0AUs/wPMHfK/wQQxb7/K5jL+v85mM7/MgFEcegLg7mLviBRHP+FEUpK/28HaX//FWEYs7wGkkVQa7eAHQEAQYMd9rPB8ewAAAAASUVORK5CYII=') no-repeat
      background-size cover
      width: r(6)
      height: r(10)

  &-cell-title
    color #333
    font-size r(16)
    height r(44)
    line-height r(44)
    padding 0 r(12)