@tailwind base;
@tailwind components;
@tailwind utilities;

[contenteditable].empty:before {
  content: attr(placeholder);
  position: absolute;
  color: #aaa;
}

.error {
  border-bottom: 3px rgba(255, 87, 36, 0.6) solid;
}

.error:hover {
  background-color: rgba(255, 87, 36, 0.4);
}

.active {
  border-bottom: 3px #ff5724 solid;
  background-color: rgba(255, 87, 36, 0.5);
}

.active:hover {
  background-color: rgba(255, 87, 36, 0.6);
}

.kbbi .error {
  border-bottom: 3px rgba(55, 205, 190, 0.6) solid;
}

.kbbi .error:hover {
  background-color: rgba(55, 205, 190, 0.4);
}

.kbbi .active {
  border-bottom: 3px #2aa79b solid;
  background-color: rgba(55, 205, 190, 0.5);
}

.kbbi .active:hover {
  background-color: rgba(55, 205, 190, 0.6);
}

.loader div {
  animation-duration: 0.5s;
}

.loader div:first-child {
  animation-delay: 0.1s;
}

.loader div:nth-child(2) {
  animation-delay: 0.3s;
}

.loader div:nth-child(3) {
  animation-delay: 0.5s;
}
