/*
 * 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.
 */

/* Animated hand-drawn circle around emphasized button */
.emphasized {
  --circle-color: #ff6b47;
  --circle-padding: -0.75rem;
}

.emphasized::before,
.emphasized::after {
  content: "";
  position: absolute;
  inset: var(--circle-padding);
  border: 3px solid var(--circle-color);
  pointer-events: none;
}

.emphasized::before {
  border-inline-end: none;
  border-radius: 100% 0 0 75% / 50% 0 0 50%;
  inset-block-start: calc(var(--circle-padding) / 2);
  inset-inline-end: 50%;
}

.emphasized::after {
  border-inline-start: none;
  border-radius: 0 100% 75% 0 / 0 50% 50% 0;
  inset-inline-start: 30%;
}

@media (prefers-color-scheme: dark) {
  .emphasized::before,
  .emphasized::after {
    mix-blend-mode: screen;
  }
}