.message-container
  position fixed
  top 20px
  left 50%
  transform translateX(-50%)
  z-index 10000
  pointer-events none

.message-item
  pointer-events all
  margin-bottom 16px
  padding 8px 16px
  border-radius 4px
  background var(--main-lighter)
  color var(--text)
  box-shadow 0 4px 12px rgba(0,0,0,0.15)
  display flex
  align-items center
  animation message-fade-in 0.3s ease
  position relative
  justify-content center
  &:hover
    .message-close
      opacity 1

.message-content-wrap
  display flex
  align-items center

.msg-icon
  margin-right 8px
  font-size 16px
  &.info
    color var(--info)
  &.success
    color var(--success)
  &.warning
    color var(--warn)
  &.error
    color var(--error)

.message-close
  margin-left 8px
  cursor pointer
  font-size 12px
  color var(--text)
  &:hover
    font-weight bold

@keyframes message-fade-in
  from
    opacity 0
    transform translateY(-20px)
  to
    opacity 1
    transform translateY(0)
