.n-notice
  position fixed
  top 48px
  right 0
  height 0
  z-index 2000
  &-position
    padding-top 8px
    margin-right 16px
  &-item
    width 480px
    background-color #FFF
    box-shadow 0 2px 8px 0 rgba(22, 22, 22, 0.25)
    border-radius 4px
  &-header
    display flex
    align-items center
    height 56px
    padding 0 16px
  &-icon
    margin-right 8px
    flex-shrink 0
  &-title
    flex auto
    n-font-m()
    font-weight bold
    margin-right 8px
  .n-circle
    flex-shrink 0
  &-hidden-circle .n-circle svg
    visibility hidden
  &-content
    word-break break-all
    white-space pre-wrap
    n-font-m()
    padding 0 16px 16px
    max-height 60vh
    overflow auto
  &-footer
    text-align right
    padding 16px

.n-notice-notify
  .n-notice-content
    color $n-color-3
  &.n-notice-has-icon .n-notice-content
    padding-left 40px

.n-notice-notification
  .n-notice-header
    border-radius 4px
    background linear-gradient(180deg, #FFFFFF 0%, #F0F3F6 100%)
  .n-notice-content
    color $n-color-1
    padding-top 16px
  &.n-notice-has-icon .n-notice-content
    padding-left 44px


.n-notice-type-info .n-notice-icon
  color $primary-color
.n-notice-type-success .n-notice-icon
  color $success-color
.n-notice-type-warning .n-notice-icon
  color $warning-color
.n-notice-type-error .n-notice-icon
  color $danger-color


.n-notice-enter-active
  transition all 0.2s ease
.n-notice-enter
  opacity 0.5
  transform translateX(100%)

.n-notice-leave-active
  transition all 0.2s linear
  padding-top 0
  position relative
  .n-notice-item
    overflow hidden
    n-absolute(8px, 0, 0, 0)
.n-notice-leave-to
  opacity 0.5
  height 0 !important