@import "variables";

#results {
  overflow: hidden;
  margin-top: $padding-lg;

  > .close {
    color: $dark;
    opacity: 1;
    text-shadow: none;
    outline: none;
  }

  // Successful results
  > .nav-tabs {
    border-color: $results-tab-border;

    > li.active {
      > a,
      > a:hover,
      > a:focus,
      > a:active {
        border-color: $results-tab-border;
        border-bottom-color: $results-tab-bg;
        background-color: $results-tab-bg;
      }
    }
  }

  > .tab-content {
    border-color: $results-tab-border;
  }

  // Onoes! Error!
  &.error {
    > .nav-tabs {
      border-color: $error-tab-border;

      > li.active {
        > a,
        > a:hover,
        > a:focus,
        > a:active {
          border-color: $error-tab-border;
          border-bottom-color: $error-tab-bg;
          background-color: $error-tab-bg;
        }
      }
    }

    > .tab-content {
      border-color: $error-tab-border;
    }
  }

  &.animated {
    position: relative;
    z-index: 100;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: shake;
    animation-name: shake;
  }
}

// Shake animation from Animate.css
// https://daneden.github.io/animate.css/
@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
