.uif-notice-wrap
  position fixed
  top 14px
  right 24px
  z-index 1010

.uif-notice
  border-radius 4px
  box-shadow 0 1px 6px rgba(0,0,0,.2)
  padding 20px 0
  background-color #fff
  line-height 1
  position relative
  margin-top 10px
  width 340px
  border-left 8px solid transparent
  margin-left auto
  &-long
    width 560px
  &-info
    border-left-color $notice-color
    .uif-notice-icon
      color $notice-color
  &-success
    border-left-color $success-color
    .uif-notice-icon
      color $success-color
  &-warning
    border-left-color $warning-color
    .uif-notice-icon
      color $warning-color
  &-error
    border-left-color $error-color
    .uif-notice-icon
      color $error-color
  &-header
    display flex
    align-items center
    margin 0 20px
    & + .uif-notice-confirm
      margin-top 10px
  &-title
    flex auto
    color $title-color
    font-weight bold
    s-font-title2()
  &-icon
    margin-right 16px
    width 24px
    font-size @width
    line-height @width
  &-close .uif-i
    width 29px
    height @width
    line-height @width
    border-radius 50%
    transition all 0.2s ease
    &:hover
      background-color #eee
  &-desc
    s-font-body()
    color $text-color
    white-space pre-wrap
    margin-top 10px
    padding 0 20px
    max-height 70vh
    overflow auto
  &-confirm
    padding 0 20px
    text-align right

.uif-notice-enter-active
.uif-notice-leave-active
  overflow hidden
  transition all 0.3s linear

.uif-notice-enter
  opacity 0.5
  transform-origin 0 0
  transform translateX(100%)

.uif-notice-leave-to
  opacity 0.5
  height 0 !important