/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.color-preset-label {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-check:checked+.color-preset-label {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #495057 !important;
  transform: scale(1.15);
}

@keyframes text_color_blink {
  0% {
    opacity: 1;
    color: #dc3545;
  }

  /* Red */
  6% {
    opacity: 0.2;
    color: #dc3545;
  }

  7% {
    opacity: 0.2;
    color: #fd7e14;
  }

  /* Orange */
  13% {
    opacity: 1;
    color: #fd7e14;
  }

  19% {
    opacity: 0.2;
    color: #fd7e14;
  }

  20% {
    opacity: 0.2;
    color: #ffc107;
  }

  /* Gold */
  26% {
    opacity: 1;
    color: #ffc107;
  }

  32% {
    opacity: 0.2;
    color: #ffc107;
  }

  33% {
    opacity: 0.2;
    color: #198754;
  }

  /* Lime Green */
  39% {
    opacity: 1;
    color: #198754;
  }

  45% {
    opacity: 0.2;
    color: #198754;
  }

  46% {
    opacity: 0.2;
    color: #20c997;
  }

  /* Teal */
  52% {
    opacity: 1;
    color: #20c997;
  }

  58% {
    opacity: 0.2;
    color: #20c997;
  }

  59% {
    opacity: 0.2;
    color: #0d6efd;
  }

  /* Blue */
  65% {
    opacity: 1;
    color: #0d6efd;
  }

  71% {
    opacity: 0.2;
    color: #0d6efd;
  }

  72% {
    opacity: 0.2;
    color: #6f42c1;
  }

  /* Purple */
  78% {
    opacity: 1;
    color: #6f42c1;
  }

  84% {
    opacity: 0.2;
    color: #6f42c1;
  }

  85% {
    opacity: 0.2;
    color: #d63384;
  }

  /* Pink */
  91% {
    opacity: 1;
    color: #d63384;
  }

  97% {
    opacity: 0.2;
    color: #d63384;
  }

  98% {
    opacity: 0.2;
    color: #dc3545;
  }

  /* Back to Red */
  100% {
    opacity: 1;
    color: #dc3545;
  }
}

.text-new-blink {
  animation: text_color_blink 12s ease-in-out infinite;
}