@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  .v-messages
    flex: 1 1 auto
    font-size: $messages-font-size
    min-height: $messages-min-height
    min-width: 1px // Ensure takes up space with no messages and inside of flex
    opacity: var(--v-medium-emphasis-opacity)
    position: relative

    &__message
      line-height: $messages-line-height
      word-break: break-word
      overflow-wrap: break-word
      word-wrap: break-word
      hyphens: auto
      transition-duration: $messages-transition-duration
