/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

.animate-job-in {
  animation: fade-in 0.25s ease-out, slide-in 0.25s ease-out;
}

.animate-job-out {
  animation: fade-out 0.25s ease-out, slide-out 0.25s ease-out;
}

.animate-fade-in {
  animation: fade-in 0.25s ease-out;
}

.animate-fade-out {
  animation: fade-out 0.25s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-in {
  from {
    transform: translateX(4rem);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(4rem);
  }
}

.animate-job-item-in {
  overflow: hidden;
  animation: slide-down 0.5s ease-out;
}

.animate-job-item-out {
  overflow: hidden;
  animation: slide-up 0.5s ease-out;
}

/* "max-height: auto" unfortunately does not work here, so we set
   to a fixed height that is greater than the expected height. */
@keyframes slide-down {
  from {
    max-height: 0;
  }
  to {
    max-height: 3rem;
  }
}

@keyframes slide-up {
  from {
    max-height: 3rem;
  }
  to {
    max-height: 0;
  }
}

.animate-flash-increase {
  animation: flash-green 0.5s ease-in-out;
}

.animate-flash-decrease {
  animation: flash-red 0.5s ease-in-out;
}

@keyframes flash-green {
  from {
    background-color: #a7f3d0;
  }
  to {
    background-color: transparent;
  }
}

@keyframes flash-red {
  from {
    background-color: #fecaca;
  }
  to {
    background-color: transparent;
  }
}