@import 'variables';
@import 'functions';

// VARIABLES
$bg: #fff;
$fontColor: #000;

.twofas-rate-plugin-prompt {
  animation: slide-in .5s ease-in-out 3s 1 both;
  background: $bg;
  border-radius: 4px;
  color: $fontColor;
  left: 50%;
  margin-left: 80px;
  max-width: 95%;
  padding: 30px;
  position: fixed;
  text-align: center;
  top: 40px;
  transform: translateX(-50%) translateY(-100%);
  transition: visibility 0s 0s;
  visibility: visible;
  width: 550px;
  z-index: 9999;

  @media all and (max-width: 960px) {
    margin-left: 18px;
  }

  @media all and (max-width: 782px) {
    margin-left: 0;
    top: 46px;
  }

  &.closed {
    animation: slide-out .5s ease-in-out 1 both;
    transition: visibility 0s .5s;
    visibility: hidden;
  }

  &-header {
    margin-bottom: 15px;

    h6 {
      font-size: px-to-rem(20);
      font-weight: 700;
      line-height: px-to-rem(24);
      margin-bottom: 6px;
      margin-top: 0;
    }
  }

  &-content {
    margin-bottom: 15px;

    p {
      font-size: px-to-rem(14);
      font-weight: 400;
      line-height: px-to-rem(18);
      margin: 0;
    }
  }

  &-buttons {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;

    a,
    button {
      margin-bottom: 6px;
    }
  }
}

@keyframes slide-in {
  from {
    -webkit-box-shadow: 0 0 20px 0 rgba($tf-rate-plugin-prompt-shadow, 0);
    box-shadow: 0 0 20px 0 rgba($tf-rate-plugin-prompt-shadow, 0);
    transform: translateX(-50%) translateY(-100%);
  }

  to {
    -webkit-box-shadow: 0 0 20px 0 $tf-rate-plugin-prompt-shadow;
    box-shadow: 0 0 20px 0 $tf-rate-plugin-prompt-shadow;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slide-out {
  from {
    -webkit-box-shadow: 0 0 20px 0 $tf-rate-plugin-prompt-shadow;
    box-shadow: 0 0 20px 0 $tf-rate-plugin-prompt-shadow;
    transform: translateX(-50%) translateY(0);
  }

  to {
    -webkit-box-shadow: 0 0 20px 0 rgba($tf-rate-plugin-prompt-shadow, 0);
    box-shadow: 0 0 20px 0 rgba($tf-rate-plugin-prompt-shadow, 0);
    transform: translateX(-50%) translateY(-100%);
  }
}