@import './assets/default.sass'

.canto
  background: $white
  //用于viewer
  .canto-row
    width: 100%
    padding: 20rpx 4vw

    &.image
      padding: 40rpx 0
    &.image+.image
      padding-top: 0
      margin-top: -40rpx


  //用于编辑器
  .canto-wrapper
    position: relative
    background: $white
    padding: 20rpx 4vw
    border-left: 8rpx $white solid
    border-right: 8rpx $white solid
    width: 100%
    background: $white
    overflow: visible

    &.cursor
      border-left: 8rpx $red solid
      &::after
        content: ''
        width: 30%
        height: 8rpx
        bottom: -4rpx
        left: 35%

        background: $primary
        position: absolute
        z-index: 50
        animation: bling 600ms infinite ease-in-out

  .canto-bar
    box-shadow: 0 0 20rpx rgba(0,0,0,.1)
    z-index: 100
    position: fixed
    display: flex
    flex-direction: row
    bottom: 0
    left: 0
    width: 100vw
    background: $white
    height: 128rpx
    transition: bottom 200ms ease-in-out
    .canto-bar-item
      flex:1
    &.hide
      bottom: -128rpx

  .canto-text
      display: block

  .canto-image
      display: block
      width: 100%

  /**
   * helpers
   */
  .touchOpacity
    opacity: .6
  .center
    text-align: center
  .right
    text-align: right
  .bg-white
    background: $white!important
  .bg-silver
    background: $silver!important
  .bg-primary
    background: $primary!important
  .bg-red
    background: $red!important
  .red
    color: $red!important
  .blue
    color: $blue!important
  .yellow
    color: $yellow!important
  .block
    display: block
  .ab-tl
    position: absolute
    left: 0
    top: 0
    z-index: 10

@-webkit-keyframes bling
  0%
    opacity: 1
  40%
    opacity: 1
  100%
    transform: scale(.9)
    opacity: 0