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

@import "tippy/tippy"

@import "usage-analytics/vars"

@import "usage-analytics/data-attributes"

@import "readabler-kit/fontawesome"
@import "readabler-kit/custom-icons"
@import "readabler-kit/regular"
@import "readabler-kit/solid"

.readabler.column-readabler
  display: flex
  align-items: center
  justify-content: center
  column-gap: 12px

  &:nth-of-type(2)

    .mdp-readabler-usage-analytics
      border: none

.mdp-readabler-table-header
  display: flex
  align-items: center
  justify-content: center
  column-gap: 4px

  img
    width: 18px
    height: 18px

.mdp-readabler-table-content
  text-align: center

  i
    font-style: normal

.mdp-readabler-usage-analytics
  box-sizing: border-box
  border: 1px solid #c3c4c7
  margin: 0
  background: #fff
  border-radius: 8px
  color: #646970
  line-height: 1
  display: inline-flex
  align-items: center
  transition: all 0.1s ease-in-out
  min-height: 26px
  overflow: hidden

  .mdp-readabler-number
    display: flex
    min-width: 24px
    height: 24px
    align-items: center

    i
      color: #646970
      padding: 0 4px
      justify-content: center

      &:last-of-type
        padding-left: 0

      &:not(.fa-solid)
        font-weight: 600

    &[data-readabler-loading]
      background: transparent !important

      i:not(.fa-solid)
        display: none

      i.fa-solid
        animation: readabler-spinner 1s linear infinite

    &[data-readabler-key-loaded]

      i
        color: $readablerColor

      i.fa-solid
        padding-left: 5px
        animation: none

.mdp-readabler-tooltip
  font-size: 14px
  display: inline-flex
  margin: 0
  align-items: inherit
  opacity: 0.25
  color: inherit
  transition: all 0.5s ease-in-out
  cursor: help

.wp-list-table

  @for $i from 1 through 20
    tr:nth-child(#{$i})

      td.readabler.column-readabler

        [data-readabler-loading]
          animation-delay: $i * .033s

  &:hover

    .mdp-readabler-tooltip
      opacity: 1
      color: $wpAdminColor

[data-readabler-loading]

  i
    display: inline-flex
    align-items: center
    min-width: 1rem


@import "analyzer/analyzer-score"

@keyframes readabler-spinner
    0%
        transform: rotate(0deg)
    100%
        transform: rotate(360deg)