/**
 * Readabler
 * Web accessibility for Your WordPress site.
 * Exclusively on https://1.envato.market/readabler
 *
 * @encoding        UTF-8
 * @version         1.7.4
 * @copyright       (C) 2018 - 2024 Merkulove ( https://merkulov.design/ ). All rights reserved.
 * @license         Envato License https://1.envato.market/KYbje
 * @contributors    Nemirovskiy Vitaliy (nemirovskiyvitaliy@gmail.com), Dmitry Merkulov (dmitry@merkulov.design)
 * @support         help@merkulov.design
 * @license         Envato License https://1.envato.market/KYbje
 **/

.mdp-tab-content
  animation-name: deblocker-fade
  animation-delay: .4s
  animation-duration: .2s
  animation-fill-mode: both

@keyframes deblocker-fade
  from
    opacity: 0
  to
    opacity: 1

// Headings
.mdp-tab-content

  h5.mdc-typography--headline5
    margin-top: 16px
    font-size: 16px
    font-weight: 600

  h5.mdc-typography--headline5,
  h5.mdc-typography--headline5 + p.mdc-typography--body2
    margin-bottom: 0
    margin-top: 0
    margin-left: -210px

/** Tab: Hot Keys. */
.mdp-tab-name-hot_keys

  p.mdc-typography--body2
    line-height: 1.9

    b
      background: #fff
      padding: .2rem .4rem
      border-radius: .2rem
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.1)
      user-select: all

      &:hover
        background: rgba(2, 116, 230, 0.12)
        color: rgba(2,116,230,.87)

      &::selection
        background-color: rgba(2, 116, 230, 0.12)
        color: rgba(2,116,230,.87)

/** Tab: Text to Speech. */
$table-border: 1px solid rgba(2,116,230,.25)

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

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

.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

// Voice choice table
#mdp-readabler-settings-language-tbl
  border-collapse: separate
  border-spacing: 0 12px
  width: 100% !important
  clear: both
  max-width: none !important
  font-family: "Roboto", sans-serif

  tbody
    border: none

    tr
      border-radius: 8px
      background: white

      td
        border-top: $table-border
        border-bottom: $table-border

        &:first-of-type
          border-radius: 8px 0 0 8px
          border-left: $table-border

        &:last-of-type
          border-radius: 0 8px 8px 0
          border-right: $table-border

        span
          background: white
          border-radius: 4px
          padding: 4px 6px
          font-size: 11px
          border: 1px solid #ccc
          white-space: nowrap
          font-weight: 500
          letter-spacing: .01rem
          display: inline-block
          margin: 2px 0

          img
            margin-right: 4px
            width: 10px
            height: 10px
            vertical-align: middle
            margin-top: -2px

        &.mdp-voice-name
          white-space: nowrap

      &:hover
        box-shadow: 0 0 8px 0 rgba(2,116,230,.08)
        transition: .4s
        background: rgba(2,116,230,.08)

        td
          border-color: rgba(2,116,230,.12)

    tr.selected
      background-color: #0253ee
      color: white

      span
        background: rgba(10,33,56,.6)
        border-color: rgba(10,33,56,.6)

  thead

    background-color: rgba(0, 0, 0, .04)
    border-radius: 8px

    th
      padding: 10px 14px
      width: auto !important

      &:first-of-type
        border-radius: 8px 0 0 8px

      &:last-of-type
        border-radius: 0 8px 8px 0

      &:focus
        outline: none

table.display thead > tr > th.sorting_asc,
table.display thead > tr > th.sorting_desc,
table.display thead > tr > th.sorting,
table.display thead > tr > td.sorting_asc,
table.display thead > tr > td.sorting_desc,
table.display thead > tr > td.sorting
  padding-right: 30px

.dataTables_wrapper .dataTables_length
  margin-bottom: 10px

table.dataTable tbody

  td:first-of-type,
  th:first-of-type
    font-weight: 500
    padding-left: 1.5rem

table.dataTable tfoot td,
table.dataTable tfoot th
  padding: 10px 8px

#mdp-readabler-settings-language-tbl_wrapper
  position: relative

  #mdp-readabler-settings-language-tbl_filter
    display: none

  thead
    width: 100%

    tr
      width: 100%

    th
      font-size: 12px
      font-weight: 500

  tbody
    width: 100%

    *
      cursor: pointer

  .dataTables_length
    position: absolute
    bottom: 0


.mdp-now-used
  display: flex
  align-items: stretch
  background-color: #f1f3f4
  border-radius: 8px
  width: fit-content

  div
    display: flex
    align-items: center

    &:first-of-type
      background: #23282d
      border-radius: 8px 0 0 8px
      padding: 0 1.25rem

  audio:focus
    outline: none

  strong
    color: white
    font-family: "Roboto", sans-serif
    font-weight: 500

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

.mdp-tab-name-text_to_speech table > tbody > tr:nth-child(4)
  display: none

.mdp-readabler-not-activated

  .mdp-tab-name-general

    tbody

      tr:nth-of-type(2),
      tr:nth-of-type(3),
      tr:nth-of-type(4),
      tr:nth-of-type(5),
      tr:nth-of-type(6),
      tr:nth-of-type(7)
        filter: grayscale(1)
        opacity: .5


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

  #mdp-readabler-settings-language-tbl

    tbody

      tr

        td
          border-top: none
          border-bottom: none
          border-left: $table-border
          border-right: $table-border
          padding: 0 10px

          &:first-of-type
            border-top: $table-border
            border-radius: 8px 8px 0 0
            padding: 10px 10px 4px 10px !important

          &:last-of-type
            border-bottom: $table-border
            border-radius: 0 0 8px 8px
            padding: 0 10px 10px 10px