@media (prefers-color-scheme: light)

  $readablerColorBackground: var(--readabler-popup-background-color-light)
  $readablerColorText: var(--readabler-popup-text-color-light)
  $readablerColor: var(--readabler-popup-key-color-light)
  $readablerColorAlpha10: var(--readabler-color-transparent-15, rgba(33, 150, 243, .1))
  $readablerColorAlpha25: var(--readabler-color-transparent-25, rgba(33, 150, 243, .25))
  $readablerColorAlpha50: var(--readabler-color-transparent-50, rgba(33, 150, 243, .5))

  $readablerRed: rgba(255, 37, 43, 1)

  #mdp-readabler-trigger-button
    color: var(--readabler-button-icon-color-light)
    background: var(--readabler-button-background-color-light)

    svg
      fill: var(--readabler-button-icon-color-light)

    &:hover

      color: var(--readabler-button-icon-color-hover-light)
      background: var(--readabler-button-background-color-hover-light)

      svg
        fill: var(--readabler-button-icon-color-hover-light)

    &:focus,
    &:active,
    &:focus-visible

      color: var(--readabler-button-icon-color-focus-light)
      background: var(--readabler-button-background-color-focus-light)
      box-shadow: 0 0 0 3px var(--readabler-button-background-color-focus-light)

      svg
        fill: var(--readabler-button-icon-color-focus-light)

  #readabler-ai

    &.readabler-ai-overlay[aria-hidden="false"]
      background: var(--readabler-overlay-color-light)

    .readabler-ai-assistant
      color: $readablerColorText

    .readabler-ai-button

      path
        fill: $readablerColorText

      &:hover
        background: $readablerColorAlpha10

      &:focus
        outline-color: $readablerColor

      &:hover,
      &:focus

        path
          fill: $readablerColor

      &#readabler-ai-statement-collapse,
      &#readabler-ai-help-collapse
        background-image: linear-gradient(180deg, $readablerColorBackground, $readablerColorBackground, transparent)
        color: $readablerColorText

        svg
          fill: $readablerColorText

        &:hover,
        &:focus
          color: $readablerColor

    .readabler-ai-popup
      background: $readablerColorBackground
      backdrop-filter: blur(4px)

    .readabler-ai-reveal

      &:before
        background: #cdcdcd

      &:hover

        &:before
          background: $readablerColorText

    #readabler-ai-content

      label[for="readabler-ai-textarea"]
        color: $readablerColorBackground
        background: rgba(89, 89, 89, .2)

      #readabler-ai-textarea
        color: $readablerColorText

    // readabler-ai/resources/sass/tool-bar/_language-select.sass
    .readabler-ai-language-code
      color: $readablerColorText

    .choices__list.choices__list--dropdown
      scrollbar-width: thin
      scrollbar-color: $readablerColorAlpha10 $readablerColorBackground
      background: $readablerColorBackground

    // readabler-ai/resources/sass/visual-interface/index.sass
    #readabler-ai-visual-interface

      &::-webkit-scrollbar-thumb
        background-color: $readablerColorAlpha10

      &:focus,
      &:focus-within,
      &:focus-visible

        &::-webkit-scrollbar-track
          background-color: $readablerColorAlpha10

        &::-webkit-scrollbar-thumb
          background-color: $readablerColor

      .readabler-ai-section
        color: $readablerColorText

        &:after
          background-color: $readablerColorAlpha25

      .readabler-ai-icon
        background-color: $readablerColor

      .readabler-ai-action-toggle[data-status="true"]

        .readabler-ai-icon
          background-color: $readablerColorBackground

    // readabler-ai/resources/sass/visual-interface/_spinner.sass
    .readabler-ai-spinner
      border: 2px solid $readablerColorAlpha10

      &:hover
        background-color: $readablerColorAlpha10
        border: 2px solid $readablerColor

        input
          color: $readablerColor

      &:focus-within
        background-color: $readablerColorAlpha10
        border: 2px dotted $readablerColor
        outline-color: $readablerColor

        input
          color: $readablerColor

    .readabler-ai-spinner-form

      input
        color: $readablerColorText

    // readabler-ai/resources/sass/visual-interface/_links.sass
    .readabler-ai-links-form
      border: 2px solid $readablerColorAlpha10

      select
        border: 2px solid $readablerColorAlpha10
        color: $readablerColorText

        &:hover
          background-color: $readablerColorAlpha10
          border: 2px solid $readablerColor

        &:focus
          border: 2px dotted $readablerColor
          outline-color: $readablerColor

        option
          color: $readablerColorText

    // readabler-ai/resources/sass/visual-interface/_buttons.sass

    button

      &:focus
        outline-color: $readablerColor
        color: $readablerColor

      &.readabler-ai-action-toggle
        border: 2px solid $readablerColorAlpha10

        &:hover
          background-color: $readablerColorAlpha10
          border: 2px solid $readablerColor
          color: $readablerColor

        &:focus
          background-color: $readablerColorAlpha10
          border: 2px dotted $readablerColor

        &[data-status="true"]
          background-color: $readablerColor
          border: 2px solid $readablerColor
          color: $readablerColorBackground

          .readabler-ai-icon
            background-color: $readablerColorBackground

          &:after
            background: $readablerColorBackground

      &.readabler-ai-tooltip
        color: $readablerColor
        background: $readablerColorBackground

      &.readabler-ai-spinner-plus,
      &.readabler-ai-spinner-minus
        color: $readablerColor

        &:hover,
        &:focus
          background: $readablerColor
          color: $readablerColorBackground

    // readabler-ai/resources/sass/tool-bar/_choices.sass
    .choices

      &:hover
        color: $readablerColor

      &:focus
        outline-color: $readablerColor

      &.is-open
        color: $readablerColor

      &.is-disabled
        .choices__inner,
        .choices__input
          background-color: #f9f9f9

      .choices__inner

        &:hover
          background: $readablerColorAlpha10

      %choices-dropdown
        background: $readablerColorBackground

      .choices__item--selectable

        &.is-highlighted
          background-color: $readablerColorAlpha10

      .choices__input
        background-color: #f9f9f9

  // readabler-ai/resources/sass/tippy/themes/_readabler-ai.sass
  .tippy-box[data-theme~='readabler-ai']
    background-color: $readablerColorBackground
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
    color: $readablerColorText

  .tippy-box[data-theme~='readabler-ai-menu']
    background-color: $readablerColorBackground
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
    color: $readablerColorText