/**
 * Create an audio version of your posts, with a selection of more than 120+ voices across more than 30 languages and variants.
 * Exclusively on Envato Market: https://speaker-airy.merkulov.design/
 *
 * @encoding        UTF-8
 * @version         1.0.1
 * @copyright       Copyright (C) 2018 - 2020 Merkulove ( https://merkulov.design/ ). All rights reserved.
 * @license         (ISC OR GPL-3.0)
 * @contributors    Alexander Khmelnitskiy (info@alexander.khmelnitskiy.ua), Dmitry Merkulov (dmitry@merkulov.design)
 * @support         help@merkulov.design
 **/

.mdp-warning
  padding: 10px
  border: 1px solid rgba(226, 131, 39, .3)
  border-radius: 4px
  text-shadow: 0 1px 0 #fff
  background: #fffceb
  color: #e28327

#poststuff

  .inside
    margin: 0

#mdp_speaker_lite_box_id

  h2.hndle
    color: #191e23 !important
    font-size: 13px

  .inside
    padding: 16px

  .mdp-speaker-lite-meta-box-controls

    .mdc-select-width
      width: 100%

#mdp_speaker_lite_generate
  margin: 10px 0
  height: 30px
  line-height: 28px
  padding: 0 12px 2px
  text-align: center
  background: #0085ba
  border-color: #0073aa #006799 #006799
  box-shadow: 0 1px 0 #006799
  color: #fff
  text-decoration: none
  text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799
  vertical-align: top
  font-size: 13px
  display: inline-block
  cursor: pointer
  border-width: 1px
  border-style: solid
  -webkit-appearance: none
  border-radius: 3px
  white-space: nowrap
  box-sizing: border-box

  &.is-busy
    color: #fff
    background-size: 100px 100%
    background-image: linear-gradient(-45deg, #0085ba 28%, #005d82 0, #005d82 72%, #0085ba 0)
    border-color: #00435d
    animation: mdp-busy-animation 2.5s linear infinite

#mdp_speaker_lite_remove
  height: 30px
  margin: 10px 0
  color: #c92c2c
  box-sizing: border-box

  &.is-busy
    color: #fff
    background-size: 100px 100% !important
    background-image: linear-gradient(-45deg, #c92c2c 28%, #8e2424 0, #8e2424 72%, #c92c2c 0) !important
    border-color: #8e2424
    animation: mdp-busy-animation 2.5s linear infinite !important

@keyframes mdp-busy-animation
  0%
    background-position: 200px 0

//Import the player skins
@import "speaker"

// Speaker player
.mdp-speaker-lite-box
  overflow: hidden

  .mejs-controls
    width: inherit

  .mejs-mute
    display: none

// Audio info
.mdp-speaker-lite-audio-info
  padding: 10px 0 10px 0

  .dashicons
    font-size: 16px
    line-height: 18px

[speaker-lite-break],
[data-speaker-lite-break]
  background: #fff
  border-radius: 4px
  padding: 2px 5px
  font-size: 12px
  border: 1px solid #ccc
  white-space: nowrap
  font-weight: 500
  letter-spacing: .01rem
  display: inline-block
  margin: 2px 0

/**
 * Speech Template Editor
 **/
#mdp-speaker-lite-template-speech-template-editor
  position: absolute
  display: block
  left: 0
  right: 0
  top: 0
  bottom: 0
  z-index: 99999
  transform-origin: right
  animation: mdp-show-editor
  animation-duration: .4s
  box-shadow: 0 11px 15px -7px rgba( 0, 0, 0, 0 ), 0 24px 38px 3px rgba( 0, 0, 0, 0 ), 0 9px 46px 8px rgba( 0, 0, 0, 0 )

#mdp-speaker-lite-speech-template-editor-box
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: 99999

  iframe
    position: fixed
    top: 0
    width: calc(100% - 400px)
    height: 100%
    left: 0
    background: #fff

  div.mdp-side-panel
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: auto !important
    width: 400px
    background: #fff
    border-left: 1px solid #c3c5c7

    > header
      height: 64px
      width: 100%
      background: rgba( 2, 116, 230, .87 )
      color: #fff
      box-sizing: border-box
      display: flex
      align-items: center

      .mdp-close-btn
        position: absolute
        top: 8px
        right: 10px

      .mdp-title
        text-align: left
        font-size: 16px
        font-weight: bold
        line-height: 1.3
        text-overflow: ellipsis
        white-space: nowrap
        overflow: hidden
        margin: 0
        padding: 24px

        > span
          background: #2fb8ff
          margin: 0 0 0 5px
          padding: 2px 5px
          border-radius: 4px
          font-size: 14px
          font-weight: normal

    > main
      position: absolute
      bottom: 64px
      top: 64px
      left: 0
      width: 100%
      overflow-y: auto
      padding: 24px
      box-sizing: border-box
      background: rgba( 10, 33, 56, .04 )

      .mdp-subheading
        margin: 0 0 8px 0 !important
        font-size: 14px !important
        line-height: 18px
        color: #0A2138

      * + .mdp-margin-small
        margin-top: 8px !important

      .mdp-margin-small
        margin-bottom: 8px

      .mdp-input
        height: 40px
        vertical-align: middle
        display: inline-block
        max-width: 100%
        width: 100%
        padding: 0 10px
        background: #fff
        color: rgba(10, 33, 56, 0.87)
        border: 1px solid #c3c5c7
        border-radius: 8px
        transition: .2s ease-in-out
        transition-property: color, background-color,border
        box-shadow: none
        -webkit-appearance: none

        &:invalid
          border: 1px solid #FA787E

        &:hover
          border: 1px solid #0274e6

        &:focus
          border: 1px solid #0274e6
          box-shadow: 0 0 2px rgba( 2, 116, 230, 1 )

        &::placeholder
          color: #c3c5c7

      .mdp-helper-text
        color: rgba( 10, 33, 56, 0.6 )

      .mdp-list-box

        #mdp-speaker-lite-st-list
          border-radius: 8px
          background: #fff
          padding: 2px 0

          @for $i from 0 through 50
            li:nth-child(#{$i})
              animation-delay: $i * .1s

          &:empty
            display: none

        .material-icons
          opacity: 0
          visibility: hidden

        li
          border-radius: 8px
          display: flex
          justify-content: space-between
          border: 2px solid transparent
          animation: mdp-fade
          animation-duration: .15s
          animation-fill-mode: both
          margin: 2px 4px

          &.mdc-list-item
            padding: 0

          &:hover
            background: #fff
            border-color: transparent
            box-shadow: 0 11px 15px -7px rgba( 0, 0, 0, .1 ), 0 9px 46px 8px rgba( 0, 0, 0, .06)

          &.sortable-chosen.mdp-active
            border: 2px dashed rgba(34, 134, 233, 0.75)

          // Text Element
          &[data-type="text"]
            background: rgba(10, 33, 56, 0.04)
            border-color: transparent

          // Pause
          &[data-type="pause"]
            background: rgba(10, 33, 56, 0.04)
            border-color: transparent

          &.mdp-active
            background: rgba(34, 134, 233, 0.1)
            border-color: rgba(34, 134, 233, 0.5)
            cursor: default
            transition: .4s
            margin: 0

            &:hover
              border-color: rgba(34, 134, 233, 1)

            &:focus

              &:before
                display: none

            .material-icons
              font-size: 14px

            .mdp-edit-item,
            .mdp-remove-item
              visibility: visible
              opacity: 1
              color: rgb( 10, 33, 56 )
              cursor: pointer
              margin: 20px
              color: rgba(34, 134, 233, 0.75)
              font-size: 18px

              &:hover
                color: rgba(34, 134, 233, 1)

            .mdp-edit-item
              margin-right: 16px

          .mdc-list-item__text
            flex-grow: 2
            margin-left: -4px

          .mdc-list-item__primary-text
            color: #0A2138
            font-size: 1em

          .mdc-list-item__secondary-text
            color: rgba(10, 33, 56, 0.6)
            font-size: 0.9em

            i
              color: #8D5A97

      .mdp-blue-background
        background-color: rgba(2, 116, 230, 0.3)

    > footer
      display: flex
      align-items: center
      justify-content: space-between
      position: absolute
      bottom: 0
      left: 0
      right: 0
      height: 64px
      padding: 24px
      box-sizing: border-box
      background: #e6e9ec
      box-shadow: 1px 0 2px rgba(51,51,51,.6)

      li
        margin-bottom: 0

// iFrame preloader
.mdp-iframe-preloader
    position: fixed
    left: 0
    top: 0
    width: calc(100% - 400px)
    height: 100%
    background: rgba(255, 255, 255, 0.7)
    z-index: 99999
    display: none

    > div
        left: 50%
        top: 50%
        margin-top: -25px
        margin-left: -25px
        border: 5px solid #f3f3f3
        border-top: 5px solid #0274e6
        border-radius: 50%
        width: 50px
        height: 50px
        position: absolute

    &.mdp-active
        display: block

        > div
            animation: mdp-spin 1s linear infinite

@keyframes mdp-spin
  0%
    transform: rotate(0deg)

  100%
    transform: rotate(360deg)

// Speech Template controls panel
.mdp-speaker-lite-st-controls
  margin: 0 0 10px

  .mdc-icon-button
    color: rgba(34, 134, 233, 1)
    opacity: .9
    --mdc-ripple-fg-size: 28px !important
    --mdc-ripple-fg-scale: 1.71429 !important
    --mdc-ripple-left: 10px !important
    --mdc-ripple-top: 10px !important

    &.mdp-speaker-lite-delete
      float: right
      color: rgba(0, 0, 0, .25)

      &:before
        background: #ff363f

      &:hover
        color: #ff363f

    &[disabled=disabled],
    &:disabled
      opacity: 0.3

    &:hover,
    &:focus
      opacity: 1

// Edit Element Form
@import "includes/edit-element-form"

.mdp-speaker-lite-template-name-box
  padding-bottom: 24px
  padding-top: 10px

  .mdc-floating-label--float-above
    background: transparent !important

  .mdc-input-width
    max-width: 100%

// Speech template builder info-boxes
#mdp-speaker-lite-template-speech-template-editor

  .mdp-stb-info,
  .mdp-stb-help
    font-size: .9em
    color: rgba(10, 33, 56, 0.6)
    text-align: center
    font-style: italic
    display: flex
    justify-content: center
    margin: 20px 0 -12px 0

    a
      color: rgba(34, 134, 233, 1)
      text-decoration: none

      &:hover
        text-decoration: underline

    .material-icons
      visibility: visible !important
      opacity: 1 !important
      display: inline-block
      font-size: 17px
      margin-right: 4px
      color: rgba(34, 134, 233, 1)

  .mdp-stb-subtitle
    color: rgba(10, 33, 56, 0.6)
    font-size: .9em
    padding-left: 16px