@use "sass:math"
@use "../vars" as *

#readabler-ai-visual-interface

  .readabler-ai-section

    > div

      .readabler-ai-spinner
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        width: 100%
        min-height: 100px
        border-radius: 8px
        column-gap: 4px
        row-gap: 4px
        overflow: hidden
        transition: all ease-in-out 0.3s
        outline-color: transparent
        position: relative
        gap: $spacing

        &.size-full
          width: 100%

        &.size-half
          width: calc(50% - #{math.div($spacing, 2)})

        &.size-third
          width: calc((100% - 2*$spacing) / 3)

        &:hover,
        &:focus

          .readabler-ai-tooltip
            opacity: 1

        &:hover
          transition: all ease-in-out 0.3s

        &:focus-within
          transition: all ease-in-out 0.3s
          outline-width: 2px
          outline-style: solid
          outline-offset: 2px

      .readabler-ai-spinner-form
        display: flex
        flex-direction: row
        justify-content: center
        align-items: center
        column-gap: 4px
        row-gap: 4px
        margin-bottom: $spacing

        input
          border: none
          padding: 0
          margin: 0
          box-shadow: none
          opacity: 1
          background: transparent
          text-align: center
          font-size: 16px
          font-weight: 600
          line-height: 28px
          max-width: 43%
          height: 28px