@import url('smart-notification-bar-font-families.css');

#ep_smart_notification_bar_root{
  line-height: 120%;
  left: 0;
  width: 100%;
  z-index: 99998;

  .ep-smart-notification-bar{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 120%;
    padding: 0 10px;
    position: relative;

    @media screen and (min-width: 768px){
      flex-direction: row;
    }

    &__body{
      &.roboto{
        font-family: 'Roboto', sans-serif;
      }
    
      &.slabo{
        font-family: 'Slabo 13px', serif;
      }
    
      &.montserrat{
        font-family: 'Montserrat', sans-serif;
      }
    
      &.lora{
        font-family: 'Lora', serif;
      }
    
      &.concert_one{
        font-family: 'Concert One', cursive;
      }
    
      &.rounded{
        font-family: 'M PLUS Rounded 1c', sans-serif;
      }
    
      &.courier{
        font-family: 'Courier Prime', monospace;
      }
    }

    &__cta{
      line-height: 1;
      margin: 20px auto;

      @media screen and (min-width: 768px){
        margin: 0 20px;
      }

      a{
        display: block;
        line-height: 120%;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;

        &:hover{
          text-decoration: none;
        }
        
        &.roboto{
          font-family: 'Roboto', sans-serif;
        }
      
        &.slabo{
          font-family: 'Slabo 13px', serif;
        }
      
        &.montserrat{
          font-family: 'Montserrat', sans-serif;
        }
      
        &.lora{
          font-family: 'Lora', serif;
        }
      
        &.concert_one{
          font-family: 'Concert One', cursive;
        }
      
        &.rounded{
          font-family: 'M PLUS Rounded 1c', sans-serif;
        }
      
        &.courier{
          font-family: 'Courier Prime', monospace;
        }
      }

      &--0{
        // default
        border: none;
        border-radius: 3px;
      }

      &--1{
        // rounded
        border: none;
        border-radius: 150px;
      }

      &--2{
        // rectangular
        border: none;
        border-radius: 0;
      }

      &--3{
        // outlined
        background: none !important;
        border-style: solid;
        border-width: 3px;
      }

      &--4{
        // outlined rounded
        background: none !important;
        border-radius: 150px;
        border-style: solid;
        border-width: 3px;
      }

      &-animation--1{
        animation-duration: 2s;
        animation-iteration-count: 3;
        animation-name: jump_inverse;
      }

      &-animation--2{
        animation-duration: 3s;
        animation-iteration-count: 1;
        animation-name: fadein;
      }

      &-animation--3{
        animation-duration: 3s;
        animation-iteration-count: 3;
        animation-name: bounce_inverse;
      }

      &-animation--4{
        animation-duration: 2s;
        animation-iteration-count: 3;
        animation-name: shake;
      }

      &-animation--5{
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-name: flip;
      }

    }

    &__close{
      background: none;
      border: none;
      color: #000000;
      cursor: pointer;
      font-size: 18px;
      font-weight: bold;
      height: 30px;
      margin: 0;
      padding: 0;
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
    }
  }
}

.ep_smart_notification_bar_root--top{
  position: absolute;
  top: 0;
  &.ep_smart_notification_bar_root--sticky{
    position: fixed;
  }
}

.ep_smart_notification_bar_root--bottom{
  position: relative;
  bottom: 0;
  &.ep_smart_notification_bar_root--sticky{
    position: fixed;
  }
}


@keyframes jump {
  0% {
    margin-top: 20px;
  }
  5% {
    margin-top: 10px;
  }
  10% {
    margin-top: 20px;
  }
}

@keyframes jump_inverse {
  0% {
    margin-top: 0px;
  }
  5% {
    margin-top: -10px;
  }
  10% {
    margin-top: 0px;
  }
}

@keyframes bounce {
  0% {
    margin-top: 5px;
  }
  5% {
    margin-top: 20px;
  }
  10% {
    margin-top: 5px;
  }
  15% {
    margin-top: 20px;
  }
  20% {
    margin-top: 10px;
  }
  25% {
    margin-top: 20px;
  }
  30% {
    margin-top: 15px;
  }
  35% {
    margin-top: 20px;
  }
}

@keyframes bounce_inverse {
  0% {
    margin-top: -15px;
  }
  5% {
    margin-top: 0px;
  }
  10% {
    margin-top: -15px;
  }
  15% {
    margin-top: 0px;
  }
  20% {
    margin-top: -10px;
  }
  25% {
    margin-top: 0px;
  }
  30% {
    margin-top: -5px;
  }
  35% {
    margin-top: 0px;
  }
}


@keyframes fadein {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}

@keyframes shake{
  0% { transform: translate(1px, 1px) rotate(0deg); }
  5% { transform: translate(-1px, -2px) rotate(-1deg); }
  10% { transform: translate(-3px, 0px) rotate(1deg); }
  15% { transform: translate(3px, 2px) rotate(0deg); }
  20% { transform: translate(1px, -1px) rotate(1deg); }
  25% { transform: translate(-1px, 2px) rotate(-1deg); }
  30% { transform: translate(-3px, 1px) rotate(0deg); }
  35% { transform: translate(3px, 1px) rotate(-1deg); }
  40% { transform: translate(-1px, -1px) rotate(1deg); }
  45% { transform: translate(1px, 2px) rotate(0deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes flip{
  0% {
    transform: rotateX(0);
  }
  20% {
    transform: rotateX(90deg);
  }
}