// main: ../main.scss
// -----------------------------------------------------------------------------
// This file contains all styles related to the alert component.
// -----------------------------------------------------------------------------

.dm-visitor-location-notification {
    position: fixed;
    overflow: visible;
    z-index: 99999;
    border-radius: 4px;
    padding: 12px 15px;
    right: -20px;
    -webkit-animation: fade-out-bck 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fade-out-bck 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

    background-color: #283c63;
    color: #fbe8d3;

    font-size: 15px;

    .dm-visitor-location-notification-container {
      @include flexbox;
      align-items: center;

      .dm-vln-flag {
        margin: 0 0px 0 3px;
        width: 17px;
        height: 13px;
      }

      .dm-visitor-location-notification-flags {
        @include flexbox;
        align-items: center;
      }

      .dm-vln-flag-country {
        @include flexbox;
        align-items: center;
        margin-left: 5px;
      }

      .dm-vln-flags-string {
        img {
          margin: 0 3px;
        }
      }
    }
    
    p {
        line-height: 1em;
        margin: 0;
    }

    &.dm-alert-message-position-bottom-right {
        right: 10px;
        bottom: 10px;
        -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    &.dm-alert-message-position-bottom-left {
        left: 10px;
        bottom: 10px;
        right: auto;
        -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    &.dm-alert-message-position-top-left {
        left: 10px;
        top: 10px;
        right: auto;
        -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    &.dm-alert-message-position-top-right {
        right: 10px;
        top: 10px;
        -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    .dm-visitor-location-notification-country {
        font-weight: bold;
        color: #f85f73;
        @include flexbox;
      align-items: center;

    }

    .dm-vln-number-countries,
    .dm-vln-countries-string,
    .dm-vln-flags-string {
      margin: 0 3px;
    }

    .dm-vln-country-flag-string,
    .dm-vln-country-single {
      margin: 0 6px 0 3px;
    }


}


/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  

  /**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  

  /**
 * ----------------------------------------
 * animation fade-out-bck
 * ----------------------------------------
 */
@-webkit-keyframes fade-out-bck {
    0% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(-80px);
              transform: translateZ(-80px);
      opacity: 0;
    }
  }
  @keyframes fade-out-bck {
    0% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(-80px);
              transform: translateZ(-80px);
      opacity: 0;
    }
  }