@use "../vars" as *
@use "../mixins" as *

#readabler-ai-visual-interface

  button
    cursor: pointer
    box-sizing: border-box
    display: flex
    flex-grow: 1
    flex-direction: column
    justify-content: center
    align-items: center
    transition: all ease-in-out 0.3s
    background-color: transparent
    outline-color: transparent
    font-weight: 500
    z-index: 3

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

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

    &.readabler-ai-action-toggle
      min-height: 100px
      border-radius: 8px
      column-gap: 4px
      row-gap: 4px
      overflow: hidden

      &[data-status="true"]

        &:after
          content: ''
          position: absolute
          display: flex
          top: $spacing
          right: $spacing
          width: 2*$spacing
          height: 2*$spacing
          z-index: 4
          border-radius: 50%
          box-sizing: border-box
          opacity: .5

        &:hover

          &:after
            opacity: 1

    &.readabler-ai-tooltip
      position: absolute
      line-height: 2*$spacing !important
      font-size: 14px
      font-weight: 500
      top: $spacing
      right: $spacing
      display: flex
      cursor: help
      z-index: 4
      width: 2*$spacing
      height: 2*$spacing
      border-radius: 50%

      &:hover
        opacity: 1

      &:focus
        opacity: 1

    &.readabler-ai-spinner-plus,
    &.readabler-ai-spinner-minus
      @include size(28px)
      border-radius: 50%
      background-color: transparent
      font-size: 28px
      line-height: 28px
      padding: 0
      margin: 0
      border: none

      &:focus
        outline: none