// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
//
// SPDX-License-Identifier: AGPL-3.0-or-later
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design

@use "../../common" as *
@use '../../icons'

.alerts
  position: fixed
  bottom: 0
  right: 5%
  z-index: 20
  text-align: right
  display: flex
  flex-direction: column

.alerts__toggler
  width: 40px
  height: 40px
  position: absolute
  top: 400px
  left: 50%
  transform: translateX(-50%)
  cursor: pointer

  &::before
    @extend .ico-nav-container-close

    content: ""
    position: absolute
    left: 50%
    top: 0
    height: 30px
    display: flex
    align-items: center
    justify-content: center
    width: 30px
    color: var(--color-grey)
    font-size: 30px
    transform: translateX(-50%)

  &:hover::before
    color: var(--color-grey-medium)

.alerts--elevated
  z-index: 1000

.alerts__toggler--visible
  top: -40px
  opacity: 1
  transition: top 0.5s cubic-bezier(0.73, 1.25, 0.61, 1), opacity 0.5s cubic-bezier(0.73, 1.25, 0.61, 1)

@media (max-width: 425px)
  .alerts
    left: 5%

.alert
  position: relative
  display: block
  background-color: var(--color-lightblack)
  font-size: 1rem
  color: var(--color-lightwhite)
  z-index: 0
  padding: 0 50px
  padding-right: 60px
  animation: slide-in-alert .2s ease-out forwards
  margin-bottom: 10px
  transition: margin-bottom .2s ease-out

.alert a
  color: var(--color-lightwhite)

  &:hover
    color: var(--color-grey)

@keyframes slide-in-alert
  from
    transform: translateY(120%)

  to
    transform: translateY(0)

@keyframes slide-out-alert
  from
    transform: translateY(0)
    max-height: 200px

  to
    transform: translateY(250%)
    opacity: 0
    max-height: 0
    overflow: hidden

@media (min-width: 425px)
  .alert
    max-width: 400px

.alert--invisible
  animation: slide-out-alert .2s ease-out forwards
  margin-bottom: 0

.alert__content
  padding: 8px 0
  min-height: 40px
  position: relative
  font-weight: 600
  align-items: center
  text-align: left
  overflow: auto

.alert__icon
  text-align: right
  position: absolute
  left: 8px
  bottom: 0
  width: 50px
  height: 100%
  max-height: 100vh
  z-index: 40

  &::before
    position: absolute
    font-size: 24px
    top: 50%
    left: 50%
    display: flex
    align-items: center
    justify-content: center
    transform: translate(-50%, -50%)
    border-radius: 50%
    width: 30px
    height: 30px

.alert__closer
  cursor: pointer
  text-align: right
  position: absolute
  right: 0px
  bottom: 0
  width: 60px
  height: 100%
  max-height: 100vh
  transition: all .3s ease
  z-index: 40

  &:hover
    transform: scale(1.05, 1.05)

    &::before
      box-shadow: 0 0 4px white
      background-color: rgba(255, 255, 255, 0.1)
      color: white

  &::before
    @extend .ico-not-ok

    content: ""
    position: absolute
    top: 50%
    left: 50%
    display: flex
    align-items: center
    justify-content: center
    transform: translate(-50%, -50%)
    border-radius: 50%
    width: 30px
    height: 30px
    transition: all .15s ease

@media (max-width: 768px)
  .alert__closer
    width: 40px

.alert-success
  background-color: var(--color-success)

  // .alert__icon::before {
  //   --alert-icon-default: '\f058';
  // }

.alert-warning
  background-color: var(--color-warning)

  // .alert__icon::before {
  //   --alert-icon-default: '\f06a';
  // }

.alert-error
  background-color: var(--color-error)

   // .alert__icon::before {
   //   --alert-icon-default: '\f071';
   // }