/**
 * 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
 **/

// Import language table styles
@import "includes/language-table"

.mdp-key-file-fld
  display: block
  overflow: hidden
  height: 0
  transition: all 0.5s ease-in-out

  .mdp-show-btn
    position: absolute
    text-decoration: none
    font-size: 12px
    text-transform: uppercase
    border-bottom: 1px dashed

  &.active
    height: 60px

    .mdp-show-btn
      display: none


// Below are styles by MD
.mdp-speaker-lite-helper-padding
  padding-bottom: 14px

table.form-table

  td
    position: relative

.mdp-upload

  div
    display: flex
    align-items: center

    .mdp-key-file-name
      margin-left: 16px
      font-weight: bold

  button
    height: 54px
    padding: 0 16px
    font-size: .9rem
    border-radius: 8px

.mdp-key-error
  background: #fff1f0
  color: #d85030
  border: 1px solid rgba(216, 80, 48, .3)
  padding: 10px
  border-radius: 4px
  text-shadow: 0 1px 0 #fff

.mdp-lang-name
  padding: 1.25rem 1rem !important

.mdp-plugin-version
  font-size: 0.8rem
  padding-left: 20px

.mdp-activation

  .mdp-info-box
    border: 1px solid #b9b9b9
    padding: 20px
    box-sizing: border-box
    width: 100%
    max-width: 300px
    margin-top: 10px
    border-radius: 8px

  .mdp-title
    font-weight: bold
    line-height: 2
    font-size: 16px

.mdp-speaker-lite-server .mdc-system-requirements-table .mdc-system-value
  display: inline-block

/* License */
.mdp-activation
  display: flex
  justify-content: space-between

  h3
    margin-bottom: 24px !important

  .mdp-activation-form
    width: 300px
    position: relative
    padding-bottom: 30px

    .mdp-activate-license-btn
      height: 52px
      width: 52px
      padding: 0
      border-radius: 0 8px 8px 0
      font-size: .75rem
      position: absolute
      right: 2px
      top: 54px
      background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1), rgba( 255, 255, 255, 1), rgba( 255, 255, 255, 1) )

      i
        font-size: 18px

      &:hover,
      &:focus
        background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1), rgba( 255, 255, 255, 1), rgba( 255, 255, 255, 1) )

    .mdc-ripple-upgraded:hover::before
      opacity: 0

  .mdp-activation-faq
    width: calc( 100% - 330px )


/** Tab: Post Types */
.mdp-tab-name-post_types

  // Chosen for custom post types
  .chosen-container

    ul

      &:not(.chosen-results)
        border-radius: 8px
        border: 1px solid #d3d7db

      &.chosen-results
        padding: 10px

        li
          border-radius: 4px
          font-size: 14px

          &:not(.result-selected):hover,
          &.highlighted
            background: #e1effc
            color: #0274e6

  .chosen-container-multi

    .chosen-choices
      padding: 8px 12px

  .chosen-container-multi

    .chosen-choices
      flex-wrap: wrap

      li.search-choice
        color: #0274e6
        background: #e1effc
        //background: #0274e6
        font-size: 14px
        flex-direction: row-reverse
        border-radius: 5px
        box-shadow: none

        a
          width: 0
          transition: .4s

        &:hover
          background: #ff495c
          color: white

        span
          padding-right: 2px
          white-space: nowrap

        .search-choice-close
          margin-top: 1px

        &:hover

          a
            width: 14px
            transition: .4s

  .mdc-data-table
    overflow: visible
    width: 100%

    th
      font-weight: bold
      padding-top: 20px

    .mdc-data-table__cell,
    .mdc-data-table__header-cell
      padding-right: 16px
      padding-left: 16px

    .mdp-post-type
      span span
        font-size: .75rem
        color: rgba(10,33,56,.6)

  .mdc-select .mdc-floating-label
    background: transparent

  #mdp-custom-posts-tbl
    .mdc-data-table__cell
      overflow: visible

/* Responsiveness */
@media screen and (max-width: 1080px)

  .mdp-activation
    flex-direction: column

    .mdp-activation-form,
    .mdp-activation-faq,
    .mdc-input-width
      width: 100%
      max-width: 100% !important

.mdp-tab-name-voice

  table.form-table

    > tbody

      > tr:nth-last-child(2),
      > tr:nth-last-child(3)

          th
            padding: 20px 0

          td
            padding: 20px 0

            .mdc-text-field-helper-line
              padding-left: 52px

// Drag & Drop JSON KEY
#mdp-api-key-drop-zone
  border: 2px dashed #d3d7db
  border-radius: 8px
  text-align: center
  color: #a5a5a5
  cursor: pointer
  position: relative
  display: flex
  flex-wrap: wrap
  align-items: center
  align-content: center
  justify-content: center
  height: 80px
  transition: 1s

  &:hover
    height: 160px
    transition: 1s
    border: 2px dashed lighten( #0274e6, 20% )

  &.mdp-key-uploaded
    width: 100%
    height: 80px
    padding: 0
    border: 1px solid #d3d7db
    transition: 1s
    color: #0274e6
    -webkit-font-smoothing: antialiased

    .mdp-drop-zone-hover
      display: none
      opacity: 0
      color: rgb(170, 170, 170)
      width: 100%
      font-size: 13px
      margin-top: 12px
      transition: 1s

    &:hover,
    &:focus
      width: 100%
      height: 160px
      border: 2px dashed lighten( #0274e6, 20% )
      justify-content: center
      justify-items: center
      color: rgb(170, 170, 170)

      .mdp-drop-zone-hover
        display: block
        opacity: 1

  &.mdp-hover
    width: 100%
    height: 200px
    border: 2px dashed #d3d7db
    transition: 1s
    color: rgb(170, 170, 170)
    align-items: center
    justify-content: center

    .mdp-drop-zone-hover
      display: block
      opacity: 1

  &.mdp-busy
    pointer-events: none

    &:before
      content: ''
      display: block
      position: absolute
      left: -2px
      top: -2px
      bottom: -2px
      right: -2px
      background: #fff
      opacity: 0.7
      z-index: 1

    &:after
      content: 'refresh'
      font-size: 22px
      color: rgba(10,33,56,.6)
      font-family: 'Material Icons'
      font-weight: normal
      font-style: normal
      line-height: 1
      letter-spacing: normal
      text-transform: none
      display: block
      position: absolute
      top: 50%
      left: 50%
      width: 22px
      height: 22px
      margin-left: -11px
      margin-top: -11px
      z-index: 1
      animation: mdp-rotate 2s infinite linear

.mdp-dnd

  .material-icons
    margin: 0 8px 0 16px
    font-size: 18px

  .mdp-messages
    font-size: 12px

    &.mdp-error
      color: #ff495c

    &.mdc-text-field-helper-line
      display: block

// Reset button spin animation.
.mdp-spin
  .material-icons
    animation: mdp-rotate 2s infinite linear

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

.mdc-system-requirements-table
  width: 100%
  max-width: 600px

@import "includes/go-pro"
@import "includes/subscription"