@import '~scss/variables';

.wrapper {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1;
}

.card {
  min-width: 320px;
  color: $dark;
  border-radius: $border-radius;
  box-shadow: 0 6px 16px 0 rgba(33, 43, 54, 0.2);
  background-color: $white;
  transition: all $trans-speed;
  transform-origin: top center;
  animation-duration: 0.3s;

  &.in {
    opacity: 1;
    animation-name: browseIn;
    animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
  }

  &.out {
    opacity: 0;
    animation-name: browseOut;
  }

  &Main {
    padding: 20px;
  }

  &Foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 20px;
    border-radius: 0 0 $border-radius $border-radius;
    background-color: $light;
  }
}

.title {
  display: flex;
  align-items: center;
  height: 20px;
  line-height: 20px;
  margin-bottom: 8px;

  strong {
    font-size: $size-normal;
  }

  :global {
    .icon {
      margin-right: 6px;
      svg {
        --primary-color: #{$white};
        --secondary-color: #{$green};
      }
    }
  }
}

.content {
  line-height: 1.67;
}

@-webkit-keyframes browseIn {
  0% {
    -webkit-transform: scale(0.8) translateZ(0);
    transform: scale(0.8) translateZ(0);
    z-index: -1;
  }

  10% {
    opacity: 0.7;
    -webkit-transform: scale(0.8) translateZ(0);
    transform: scale(0.8) translateZ(0);
    z-index: -1;
  }

  80% {
    opacity: 1;
    -webkit-transform: scale(1.05) translateZ(0);
    transform: scale(1.05) translateZ(0);
    z-index: 999;
  }

  to {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    z-index: 999;
  }
}

@keyframes browseIn {
  0% {
    -webkit-transform: scale(0.8) translateZ(0);
    transform: scale(0.8) translateZ(0);
    z-index: -1;
  }

  10% {
    opacity: 0.7;
    -webkit-transform: scale(0.8) translateZ(0);
    transform: scale(0.8) translateZ(0);
    z-index: -1;
  }

  80% {
    opacity: 1;
    -webkit-transform: scale(1.05) translateZ(0);
    transform: scale(1.05) translateZ(0);
    z-index: 999;
  }

  to {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    z-index: 999;
  }
}

@-webkit-keyframes browseOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    z-index: 999;
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.4) translateZ(0);
    transform: scale(0.4) translateZ(0);
    z-index: -1;
  }
}

@keyframes browseOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    z-index: 999;
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.4) translateZ(0);
    transform: scale(0.4) translateZ(0);
    z-index: -1;
  }
}
