@use "../vars" as *

#readabler-ai-visual-interface
  margin: $spacing 0 $spacing $spacing - 4px
  position: relative
  max-height: 220px
  overflow-y: auto

  &[aria-hidden="true"]
    display: none

  &::-webkit-scrollbar-track
    border-radius: 2px
    background-color: transparent

  &::-webkit-scrollbar
    width: $spacing

  &::-webkit-scrollbar-thumb
    border-radius: 2px

  &:focus,
  &:focus-within,
  &:focus-visible
    outline: none

  .readabler-ai-section
    display: flex
    flex-direction: column
    gap: $spacing

    &:after
      content: ''
      display: block
      height: 1px
      margin: $spacing $spacing + 4px $spacing 4px

    &:last-of-type:after
      display: none

    .readabler-ai-section-header
      display: flex
      flex-direction: row
      margin: 4px 0 0 0
      line-height: 1.5

      span
        font-size: 20px
        font-weight: 600

    &:first-of-type

      .readabler-ai-section-header
        margin-top: 0

    > div
      display: flex
      flex-direction: row
      flex-wrap: wrap
      column-gap: $spacing
      row-gap: $spacing
      margin: 0 $spacing 0 0
      padding: 0 4px

  .readabler-ai-icon
    display: flex
    margin-top: 4px
    width: 24px
    height: 24px
    mask-position: center
    mask-repeat: no-repeat
    mask-size: contain

  .readabler-ai-label
    //display: flex
    width: 100%
    text-align: center
    font-size: 16px
    line-height: 1.5
    font-weight: 500
    padding: 0 $spacing