@import url('./../variables.css');
@import '@fortawesome/fontawesome-free/css/all.css';

/* Анимация таймера popup, по истечению которого он скроется */
@keyframes popupTimer {
  from{
    width: 100%;
  }
  to {
    width: 0;
  }
}

.magic-popup-container{
  padding: 5px;
  margin-bottom: 15px;
  border-radius: 5px;
  display: flex;
  box-shadow: 0px 3px 4px 1px #918787;
  background: var(--color_graphite_main);
  width: 500px;
  transition: 0.3s;
  opacity: 0;
  transform: translateY(-10px);

  &.hide{
    opacity: 0;
  }

  &.show{
    opacity: 1;
    transform: translateY(0px);
  }

  &.hidePopup{
    transform: translateY(10px);
    opacity: 0;
  }

  &>.popup__icon-block{
    flex-basis: 10%;
    align-self: center;

    &>i{
      font-size: 4rem;
      color: var(--color_purple_main);

      &.fa-circle-check{
        color: var(--color_emerald_main);
      }
      &.fa-circle-xmark{
        color: var(--color_ruby_main);
      }
      &.fa-circle-exclamation{
        color: orange;
      }
    }
  }

  &>.popup__content-block{
    flex-basis: 90%;
    border-left: 2px solid white;

    &>.popup__content__text-block{
      color: white;
      padding: 5px;
      text-align: center;
      font-size: 1.2rem;
    }

    &>.popup__button-block{
      margin: 10px 0;

      &>button{
        font-size: 1rem;
        margin: auto;
        opacity: 0.5;
        background: var(--color_purple_main);
        transition: 0.3s;

        &:hover{
          opacity: 1;
        }
      }
    }

    .popup__timer-block__timer{

      &.popup__timer-block__timer {
        height: 5px;
        margin: 0 5px;
        border-radius: 10px;

        &.timerProgress{
          background: #63707a;
          animation: popupTimer;
          animation-duration: 3s;
          animation-fill-mode: forwards;
          animation-timing-function: linear;
        }
      }
    }
  }
}