@use "../vars" as *

#readabler-ai-visual-interface

  .readabler-ai-section

    > div

      .readabler-ai-links
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        width: 100%
        min-height: 48px

      .readabler-ai-links-form
        display: flex
        flex-direction: column
        gap: $spacing
        width: calc(100% - #{$spacing * 4})
        padding: 2*$spacing
        border-radius: 8px

        label
          width: unset
          display: contents

        select
          border-radius: 8px
          box-shadow: none
          font-size: 16px
          font-weight: 600
          height: 48px
          min-height: 48px
          max-height: 48px
          margin: 0
          padding: 0 $spacing
          width: 100%
          background: transparent

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

          &:focus
            outline-width: 2px
            outline-style: solid
            outline-offset: 2px

          option
            font-family: var(--readabler-font-family), sans-serif