/**
 * 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 "readabler-kit/fontawesome"
@import "readabler-kit/custom-icons"
@import "readabler-kit/regular"
@import "readabler-kit/solid"

// Metabox header
@import "usage-analytics/header"

// Metabox content
@import "usage-analytics/content"

#readabler

  .inside
    display: flex
    flex-direction: column
    row-gap: 16px

#mdp-readabler-period-select
  width: 100%
  margin: 10px 0 0 0

.block-editor-page

  #readabler

    .hndle.ui-sortable-handle
      padding-left: 16px
      font-size: 13px
      font-weight: 500

    .inside
      padding: 0 16px 16px

  .mdp-readabler-usage-analytics-row
    row-gap: 8px
    flex-wrap: wrap

    &:first-of-type
      padding: 0
      margin: 0
      border: none

  .mdp-readabler-label
    font-size: 12px !important

  #mdp-readabler-period-select
    width: calc( 100% - 32px )
    margin: 0

.mdp-readabler-period
  width: 100%
  padding: 0

@import "analyzer/analyzer-score"

.mdp-readabler-metabox-analyzer
  min-height: 32px
  font-size: 14px
  margin-top: 8px

  > a,button
    border-radius: 3px
    text-decoration: none
    min-height: 32px
    height: 32px
    padding: 0 8px

    .fa-kit
      font-size: 16px

  .mdp-readabler-no-score
    font-size: 14px
    width: calc( 100% - 16px )
    justify-content: center
    align-items: center
    color: $readablerColor
    border: 1px solid $readablerColor
    column-gap: 8px
    display: inline-flex

    &:before
      content: ''
      display: none

    &:hover,
    &:focus
      font-size: 14px
      background: $readablerColor
      color: white

.mdp-readabler-usage-analytics-title
  border-top: 1px solid $wpBorderColor

  h4
    margin: 12px 0 -8px 0

.block-editor

  .mdp-readabler-metabox-analyzer
    margin-top: 0