html {
  color-scheme: dark;
}

body {
  background-color: #020617;
}

.catalog-filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(15, 23, 42, 0.88);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  padding-right: 3rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.catalog-filter-select:hover {
  background-color: rgba(15, 23, 42, 0.96);
  border-color: rgba(255, 255, 255, 0.18);
}

.catalog-filter-select:focus {
  outline: none;
  border-color: rgba(52, 211, 153, 0.7);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}

.catalog-filter-select option {
  background-color: #0f172a;
  color: #e2e8f0;
}

.catalog-filter-select option:checked {
  background-color: #10b981;
  color: #022c22;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block !important;
}

[x-cloak] {
  display: none !important;
}

.animate-home-slide-in-right {
  animation: home-slide-in-right 650ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.animate-home-slide-in-left {
  animation: home-slide-in-left 500ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.animate-home-slide-out-left {
  animation: home-slide-out-left 500ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.animate-home-slide-out-right {
  animation: home-slide-out-right 500ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

@keyframes home-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes home-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes home-slide-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-10px);
  }
}

@keyframes home-slide-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(10px);
  }
}