/* Application styles */

/* Prevent modal scroll-through */
html:has(dialog#modal-dialog[open]) {
  overflow: hidden;
}

input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

#tooltip {
  /* Float on top of the UI */
  position: absolute;

  /* Avoid layout interference */
  width: max-content;
  top: 0;
  left: 0;
}

.bg-gradient {
  background: linear-gradient(185deg, #f0f9ff, #fef3f2, #ecfdf3, #fffaeb, #fdf2fa);
  background-size: 1000% 1000%;

  animation: bg-animation 240s ease infinite;
}

@keyframes bg-animation {
  0% {
    background-position: 79% 0%
  }

  50% {
    background-position: 22% 100%
  }

  100% {
    background-position: 79% 0%
  }
}

.item-new {
  animation: fade-in 0.5s both;
}

.item-updated {
  animation: pulse 2s both;
}

.item-destroyed,
.quick-fade-out {
  animation: fade-out 0.2s both;
}

.slow-fade-out {
  animation: fade-out 2s both;
}

.autoremove {
  animation: appear-then-fade 4s both;
}

.item:hover .actions {
  display: flex;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes appear-then-fade {

  0%,
  100% {
    opacity: 0
  }

  5%,
  60% {
    opacity: 1
  }
}

@keyframes fade-out {

  100% {
    opacity: 0
  }
}


@keyframes pulse {
  0% {
    background-color: #ffc;
  }

  100% {
    background-color: none;
  }
}

/* turbo-frame[busy]:not(.no-spinner)>.loading-ring {
  opacity: 80%;
} */

turbo-frame[busy]:not(.no-spinner)~.loader {
  display: inline-block;
}

.fixed-center-block {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: auto;
  position: absolute;
  inset: 0px 0px 0px 0px;
}

.show-when-disabled {
  display: none;
}

[disabled] .show-when-disabled {
  display: initial;
}

.show-when-enabled {
  display: initial;
}

[disabled] .show-when-enabled {
  display: none;
}

.text-segment {
  position: relative;
}

.text-segment mark.highlight {
  position: relative;
  background-color: #ffc;
}

.text-segment mark.highlight-service {
  position: relative;
  background-color: #e6e0f3;
  /* Soft purple */
}

.sticky {
  z-index: 10;
}

.dotty-loading::after {
  display: inline-block;
  animation: dotty steps(1, end) 1s infinite;
  content: '';
}

@keyframes dotty {
  0% {
    content: '';
  }

  25% {
    content: '.';
  }

  50% {
    content: '..';
  }

  75% {
    content: '...';
  }

  100% {
    content: '';
  }
}