@use '../../styles/utils' as *

.notify_container
  position: fixed 
  z-index: 6
  top: 5%
  left: 50%
  transform: translate(-50%, 0)
  display: grid
  grid-template-columns: 1fr 9fr 1fr
  gap: $size-12px
  padding: $size-16px
  border-left: $size-8px solid
  background-color: $white
  width: fit-content
  border-radius: $size-4px
  border-color: $primary
  animation-delay: 300ms
  animation-timing-function: ease-in-out
  animation-name: toggle-up

  &[data-type="success"]
    border-color: $alert-green

  &[data-type="error"]
    border-color: $alert-danger

  &[data-animate="true"]
    animation-name: toggle-down

  @keyframes toggle-up
    0%
      transform: translate(-50%, 0)

    50%
      transform: translate(-50%, 100%)

    90%
      transform: translate(-50%, -100%)

    100%
      transform: translate(-50%, -100%)

  @keyframes toggle-down
    0%
      transform: translate(-50%, -100%)

    60%
      transform: translate(-50%, 50%)

    100%
      transform: translate(-50%, 0)

  .alert_logo
    align-items: flex-start

  .alert_content
    gap: $size-8px

  h6
    color: $darker-grey

  .undo_btn
    border: none
    padding: 0
    background: transparent
    color: $primary

  .description_wrapper
    gap: $size-12px

  @include mixin-responsive
    width: 80%

    .alert_content
      justify-content: center

    .alert_logo
      align-items: center

    .notify_container
      h6
        color: $primary
        font-size: $size-16px

    &[data-type="success"]
      color: $alert-green

    &[data-type="error"]
      color: $alert-danger