@import "{design}/app.styl"

#cineDialog
  theme('border', '1px solid $uiBorderColor')
  theme('background', '$uiGrayDarkest')
  theme('color', '$textSecondaryColor')
  border-radius: 8px
  bottom: 3px
  box-sizing: border-box
  display: none
  height: 150px
  left: auto
  opacity: 0.95
  overflow: hidden
  padding: 10px
  position: absolute
  right: 3px
  top: auto
  width: 300px
  z-index: 1000

  h5
    font-size: 20px
    line-height: 35px
    margin: 0

  h5, label
    font-weight: 400

  .btn
    theme('background', '$uiGrayDarkest')
    theme('color', '$textSecondaryColor')

    &:hover
      theme('color', '$hoverColor')

    &:active, &.active
      theme('color', '$activeColor')

  .cine-navigation
    position: absolute
    right: 24px
    top: 4px

    .btn
      padding: 0 4px

      i
        font-size: 36px
        line-height: 36px

  .cine-controls
    display: table
    margin: 0 auto

  .cine-options
    padding: 5px 0
    overflow: auto

    .loop-section
      padding-right: 12px