/**
 * 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/animations/fade"

@import "tippy/backdrop"
@import "tippy/border"
@import "tippy/svg-arrow"

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

@import "usage-analytics/vars"

body
  --readabler-analyzer-critical: #ff0000
  --readabler-analyzer-serious: #d54e21
  --readabler-analyzer-moderate: #f1c40f
  --readabler-analyzer-minor: #3498db

.tippy-box[data-theme="readabler"]

  .tippy-content
    padding: 0
    margin: 0
    border-radius: 8px
    border-color: #2e2e2e
    background: white
    color: #2e2e2e
    display: flex
    flex-direction: column
    overflow: hidden

  .tippy-arrow
    border-color: white

.mdp-readabler-analyzer-tooltip-trigger
  cursor: help
  font-size: 20px
  justify-content: center
  color: white
  width: 32px
  height: 32px
  display: flex

.mdp-readabler-analyzer-violation
  position: absolute
  top: 0
  left: 0
  z-index: 999

.mdp-readabler-analyzer-tooltip
  border-top-style: solid
  border-top-width: 4px
  padding: 12px 20px
  display: flex
  flex-direction: column
  column-gap: 8px

  p
    font-size: 14px
    margin: 4px 0
    align-items: baseline
    line-height: 1.45

    code
      color: black
      font-weight: 600
      font-size: 12px
      font-family: monospace
      background: yellow
      padding: 1px 5px
      border-radius: 4px

    strong
      font-size: 16px

    i
      display: inline-flex
      color: #085b9c

    a
      color: #085b9c
      display: inline-flex

      &:hover
        color: #085b9c

  &.mdp-readabler-analyzer-impact-critical
    border-top-color: var(--readabler-analyzer-critical)

  &.mdp-readabler-analyzer-impact-serious
    border-top-color: var(--readabler-analyzer-serious)

  &.mdp-readabler-analyzer-impact-moderate
    border-top-color: var(--readabler-analyzer-moderate)

  &.mdp-readabler-analyzer-impact-minor
    border-top-color: var(--readabler-analyzer-minor)

  .mdp-readabler-analyzer-violation-footer
    display: flex
    column-gap: 12px

  .mdp-readabler-analyzer-violation-link,
  .mdp-readabler-analyzer-violation-selector,
  .mdp-readabler-analyzer-violation-content
    display: inline-flex
    align-items: center
    height: 20px
    column-gap: 8px

  .mdp-readabler-analyzer-violation-selector,
  .mdp-readabler-analyzer-violation-content
    width: 30%
    max-width: 30%
    overflow: hidden
    position: relative

    span
      text-wrap: nowrap

    &:after
      content: ''
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75) 50%)
      height: 100%
      width: 30px
      position: absolute
      right: 0

  .mdp-readabler-analyzer-violation-title
    margin-bottom: 0

  .mdp-readabler-analyzer-violation-tags
    display: flex
    align-items: center
    column-gap: 8px
    row-gap: 8px
    flex-wrap: wrap

  .mdp-readabler-analyzer-violation-tag
    background: $readablerColorAlpha10
    padding: 2px 5px
    border-radius: 4px
    margin: 0
    font-size: 11px
    font-weight: 600
    color: $wpAdminColor
    text-transform: uppercase
    text-wrap: nowrap

@import "analyzer/analyzer-admin-bar"

// Loader
.mdp-readabler-analyzer-ongoing
  animation: readabler-analyzer-ongoing .25s ease-in-out infinite alternate

@keyframes readabler-analyzer-aura
    0%
        box-shadow: 0 0 0 0 $readablerColorAlpha25, 0 0 0 0 $readablerColorAlpha25
    100%
        box-shadow: 0 0 0 20px $readablerColorAlpha25, 0 0 0 10px $readablerColorAlpha25

@keyframes readabler-analyzer-ongoing
  0%
    opacity: .65
  100%
    opacity: 1