/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./assets/css/blocks/custom_events_list/view.css ***!
  \***************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties;
.custom-events-list__results-wrap {
  position: relative;
}
.custom-events-list__progress {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 1;
}
.custom-events-list__progress::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background-color: var(--color-brand-royal-blue);
  animation: custom-events-list-progress 1.1s cubic-bezier(0.4, 0, 0.2, 1)
        infinite;
}
.custom-events-list[aria-busy='true'] .custom-events-list__progress {
  opacity: 1;
}
@keyframes custom-events-list-progress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .custom-events-list__progress::before {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }
}
.custom-events-list__results.is-loading {
  pointer-events: none;
  opacity: 60%;
  transition: opacity 200ms ease;
}
.custom-events-list__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background-color: color-mix(
        in oklch,
        #c76c0b 8%,
        transparent
    );
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(
        in oklch,
        var(--color-brand-orange-dark) 8%,
        transparent
    );
  }
  border: 1px solid
        color-mix(in srgb, #c76c0b 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid
        color-mix(in oklch, var(--color-brand-orange-dark) 30%, transparent);
  }
  color: var(--color-brand-black);
}
.custom-events-list__error[hidden] {
  display: none;
}
.custom-events-list__clear {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 1.5);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-brand-royal-blue, #4769d4);
  transition: opacity 150ms ease;
}
.custom-events-list__clear:hover,
.custom-events-list__clear:focus-visible {
  color: var(--color-brand-blue, #1f3366);
}
.custom-events-list__clear[hidden] {
  display: none;
}
.custom-events-list__clear::before {
  font-family: var(--font-fa-solid);
  font-weight: 900;
  content: '\f00d';
  line-height: 1;
}
.custom-events-list__time {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-brand-black, #000000);
}
.custom-events-list__time-icon {
  color: var(--color-brand-royal-blue, #4769d4);
}
.custom-events-list__chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 1);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  background-color: color-mix(
        in oklch,
        #4769d4 8%,
        transparent
    );
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(
        in oklch,
        var(--color-brand-royal-blue) 8%,
        transparent
    );
  }
  color: var(--color-brand-black);
}
.custom-events-list__chip-icon {
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  color: var(--color-brand-royal-blue, #4769d4);
}
.custom-events-list__chip--past {
  background-color: color-mix(
        in oklch,
        #ed9331 18%,
        transparent
    );
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(
        in oklch,
        var(--color-brand-orange) 18%,
        transparent
    );
  }
  color: var(--color-brand-orange-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.custom-events-list__date-callout {
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 20);
  width: calc(var(--spacing, 0.25rem) * 20);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-2xl, 1rem);
  background-color: var(--color-brand-cream, #f6f5f3);
  color: var(--color-brand-black, #000000);
  line-height: 1.1;
}
.custom-events-list__date-month {
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  --tw-tracking: var(--tracking-wide, 0.025em);
  letter-spacing: var(--tracking-wide, 0.025em);
  text-transform: uppercase;
}
.custom-events-list__date-day {
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
}
.custom-events-list__date-year {
  font-size: 11px;
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  --tw-tracking: var(--tracking-wide, 0.025em);
  letter-spacing: var(--tracking-wide, 0.025em);
  text-transform: uppercase;
  color: color-mix(in srgb, #000000 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklch, var(--color-brand-black) 50%, transparent);
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
      --tw-tracking: initial;
    }
  }
}