@import '../../../utils'

#root
  --notification-bg: var(--s-popup-bg, var(--frame-bg))
  --notification-fg: var(--s-popup-fg, var(--frame-fg))
  --notification-border-radius: 4px
  --notification-margin: 4px
#root[data-density="compact"]
  --notification-border-radius: 3px
  --notification-margin: 2px

.Notifications
  position: absolute
  display: flex
  bottom: 0
  left: 0
  width: 100%
  height: 0
  flex-direction: column
  justify-content: flex-end
  z-index: 4000

.Notifications .notification
  position: relative
  display: flex
  flex-direction: column
  flex-shrink: 0
  margin: var(--notification-margin)
  padding: 2px 0 0
  background-color: var(--notification-bg)
  border-radius: var(--notification-border-radius)
  overflow: hidden
  z-index: 100
  box-shadow: 0 0 0 1px #00000024,
              inset 0 0 0 1px #ffffff12,
              0 1px 8px 0 #00000032

  &:after
    content: ''
    position: absolute
    width: 5px
    height: 5px
    top: 3px
    right: 3px
    border-radius: 3px
    background-color: var(--status-notice)
    z-index: 1

  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: var(--notification-fg)
    opacity: 0
    transition: opacity var(--d-fast)

  &[data-timeout="true"]:after
    animation: notif-timeout var(--timeout) linear

  &[data-lvl="err"]:after
    background-color: var(--status-err)

  &[data-lvl="progress"]
    cursor: progress

  &[data-lvl="progress"]:after
    animation: notif-progress 1.7s linear infinite
  
  &:hover
    box-shadow: 0 0 0 1px #00000032,
                inset 0 0 0 1px #ffffff16,
                0 1px 8px 0 #00000036
    &:before
      opacity: .03

.Notifications .header
  position: relative
  display: inline-block
  align-items: flex-start
  padding: 4px 8px 6px
  opacity: .8
  transition: opacity var(--d-fast)
.Notifications .notification:hover .header
  opacity: 1

.Notifications .header .icon
  position: absolute
  width: 16px
  height: 16px
  margin: 3px 5px 1px 0
  > img
  > svg
    position: absolute
    width: 16px
    height: 16px
    fill: var(--notification-fg)
    opacity: .7
.Notifications .notification[data-lvl="info"] .header .icon > svg
.Notifications .notification[data-lvl="progress"] .header .icon > svg
  fill: var(--status-active)
.Notifications .notification[data-lvl="warn"] .header .icon > svg
  fill: #ffcb00
.Notifications .notification[data-lvl="err"] .header .icon > svg
  fill: var(--status-err)

.Notifications .title
  position: relative
  display: inline
  font-size: rem(14)
  font-weight: 600
  line-height: 21px
  color: var(--notification-fg)
  word-break: break-word
.Notifications .notification[data-lvl="err"] .title
  color: var(--status-err)

.Notifications .notification .header .icon + .title
  padding-left: 22px

.Notifications .details
  position: relative
  width: 100%
  font-size: rem(13)
  color: var(--notification-fg)
  padding: 0 8px 6px
  white-space: pre-wrap
  overflow-wrap: anywhere
  opacity: .7
  transition: opacity var(--d-fast)
.Notifications .notification:hover .details
  opacity: .8

.Notifications .details-list
  position: relative
  width: 100%
  padding: 0 8px 6px

.Notifications .details-msg
  position: relative
  font-size: rem(13)
  color: var(--notification-fg)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  opacity: .7

.Notifications .progress
  position: relative
  display: flex
  justify-content: center
  align-items: center

.Notifications .progress-bar
  position: relative
  width: calc(100% - 16px)
  height: 5px
  border-radius: 3px
  margin: 2px 0 8px
  background-color: #00000032
  box-shadow: inset 0 0 0 1px #00000016
  overflow: hidden

.Notifications .progress-bar-value
  position: absolute
  top: 0
  left: -100%
  width: 100%
  height: 100%
  background-color: var(--status-notice)
  transform: translateX(var(--percent))

.Notifications .progress[data-progress-unknown="true"] .progress-bar
  background-color: var(--status-notice)
  &:before
    content: ''
    position: absolute
    top: 0
    left: -32px
    width: calc(100% + 32px)
    height: 100%
    background-image: repeating-linear-gradient(-45deg, #000, #000 8px, #fff 8px, #fff 16px)
    opacity: .3
    animation: unknown-progress .3s linear infinite

@keyframes unknown-progress
  0%
    transform: translateX(0)
  100%
    transform: translateX(23px)

.Notifications .ctrls
  position: relative
  display: flex
  width: 100%
  height: 27px
  max-height: 30px
  z-index: 2
  padding: 1px
  overflow: hidden
  opacity: 1
  border-bottom-right-radius: 3px
  border-bottom-left-radius: 3px
  transition: opacity var(--d-fast)
  background-color: #00000016
  &:after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 1px
    background-color: #00000016

.Notifications .ctrls .separator
  display: none

.Notifications .ctrl
  position: relative
  display: flex
  height: 25px
  justify-content: center
  align-items: center
  flex-grow: 1
  padding: 0 5px
  text-align: center
  overflow: hidden
  cursor: pointer
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: var(--notification-fg)
    opacity: 0
    transition: opacity var(--d-fast)
  .label
    position: relative
    font-size: rem(13)
    font-weight: 600
    color: var(--notification-fg)
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis
    flex-shrink: 1
    opacity: .7
  > svg
    position: relative
    width: 16px
    height: 16px
    fill: var(--notification-fg)
    flex-shrink: 0
    opacity: .7
  > svg.-close
    width: 11px
    height: 11px
  &:hover:before
    opacity: .08
  &:hover .label
  &:hover svg
    opacity: 1
  &:active:before
    opacity: .06
  &:active .label
  &:active svg
    opacity: .7
  &[data-icon="true"]
    flex-grow: 0
    width: 30px

.Notifications .indicators
  position: relative
  height: 7px
  width: 100%
  padding: 0 calc(var(--notification-border-radius) + var(--notification-margin))
  display: flex
  justify-content: flex-end
  align-items: flex-start
  flex-shrink: 0
  grid-gap: var(--notification-margin)
  z-index: 100

.Notifications .indicators .indicator
  position: relative
  height: 5px
  width: 5px
  border-radius: var(--notification-border-radius)
  background-color: var(--notification-bg)
  overflow: clip
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    opacity: .3
    background-color: var(--notification-fg)

#root .notification-enter-active
#root .notification-leave-active
  transition: transform var(--d-fast), opacity var(--d-fast), z-index var(--d-fast)
#root .notification.notification-leave-active
  position: absolute
  width: calc(100% - var(--notification-margin) * 2)
#root .notification-move
  transition: transform var(--d-fast), opacity var(--d-fast), z-index var(--d-fast)
#root .notification-enter-from
  opacity: 0
  transform: translateY(16px)
  z-index: 0
#root .notification-leave-to
  opacity: 0
  z-index: 0
  transform: translateY(8px)

@keyframes notif-timeout
  0%
    opacity: 1
  90%
    opacity: 0
  100%
    opacity: 0

@keyframes notif-progress
  0%
    opacity: 1
  50%
    opacity: .3
  100%
    opacity: 1
