@property --search-glow-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 72deg;
}

.app-search.app-search {
  --search-glow-angle: 72deg;
  --search-shell: #101010;
  --search-input: #151515;
  --search-border-dark: #3a1118;
  --search-glow-strong: #e11d2e;
  --search-glow-soft: #f05b66;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  width: min(100%, 560px);
  max-width: 560px;
  min-width: 0;
  min-height: 40px;
  height: 40px;
  margin: 0;
  padding: 4px 6px 4px 9px;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: var(--search-shell);
  color: var(--muted);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 5px 16px rgba(0, 0, 0, 0.2);
  transition: box-shadow 220ms ease;
}

.app-search.app-search::before,
.app-search.app-search::after {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  content: "";
}

.app-search.app-search::before {
  background: conic-gradient(
    from var(--search-glow-angle),
    transparent 0deg,
    transparent 235deg,
    var(--search-glow-strong) 280deg,
    var(--search-glow-soft) 315deg,
    transparent 350deg
  );
  opacity: 0.22;
  transition: opacity 220ms ease;
}

.app-search.app-search::after {
  inset: 1px;
  background: var(--search-shell);
}

.app-search.app-search > i {
  position: static;
  z-index: 1;
  width: 24px;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}

.app-search > input[type="search"] {
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
  min-height: 30px;
  height: 30px;
  padding: 0.28rem 0.45rem;
  border: 0;
  border-radius: 0.5rem;
  outline: 0;
  background: var(--search-input);
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.app-search > input[type="search"]::placeholder {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
  font-weight: 400;
  opacity: 1;
}

.app-search > input[type="search"]:focus,
.app-search > input[type="search"]:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.app-search:focus-within {
  --search-glow-angle: 252deg;
  box-shadow:
    inset 0 0 0 1px rgba(225, 29, 46, 0.15),
    0 7px 22px rgba(0, 0, 0, 0.24);
}

@media (hover: hover) and (pointer: fine) {
  .app-search.app-search:hover {
    --search-glow-angle: 252deg;
  }

  .app-search.app-search:hover::before,
  .app-search.app-search:focus-within::before {
    opacity: 0.54;
  }
}

.app-search > kbd {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.12rem 0.34rem;
  border: 1px solid color-mix(in srgb, var(--muted) 26%, transparent);
  border-radius: 0.35rem;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.67rem;
  line-height: 1.2;
  white-space: nowrap;
}

.app-search > input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

.server-search.panel {
  width: min(100%, 560px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-audit-search.app-search {
  margin-bottom: 0.8rem;
}

.tournament-discovery-tools {
  justify-content: flex-start;
  gap: 0.7rem;
}

.tournament-discovery-tools > .app-search.app-search {
  flex: 1 1 320px;
  min-width: min(320px, 100%);
  max-width: 560px;
}

.tournament-discovery-tools > .app-search.app-search > input[type="search"] {
  font-size: 0.86rem;
  letter-spacing: -0.01em;
}

.tournament-discovery-tools > select {
  flex: 0 0 140px;
  width: 140px;
  min-width: 140px;
  min-height: 40px;
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.35;
}

.tournament-discovery-tools > .button {
  min-height: 40px;
}

@media (max-width: 720px) {
  .app-search {
    width: 100%;
    max-width: none;
  }

  .tournament-discovery-tools > .app-search.app-search,
  .tournament-discovery-tools > select,
  .tournament-discovery-tools > .button {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-search.app-search {
    transition: box-shadow 1ms linear;
  }
}