@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    label {
      @apply h-6 relative;
    }

    [type="checkbox"] {
      @apply w-11 h-0 cursor-pointer inline-block;
      @apply focus:outline-0 dark:focus:outline-0;
      @apply border-0 dark:border-0;
      @apply focus:ring-offset-transparent dark:focus:ring-offset-transparent;
      @apply focus:ring-transparent dark:focus:ring-transparent;
      @apply focus-within:ring-0 dark:focus-within:ring-0;
      @apply focus:shadow-none dark:focus:shadow-none;

      @apply after:absolute before:absolute;
      @apply after:top-0 before:top-0;
      @apply after:block before:inline-block;
      @apply before:rounded-full after:rounded-full;

      @apply after:content-[''] after:w-5 after:h-5 after:mt-0.5 after:ml-0.5;
      @apply after:shadow-md after:duration-100;

      @apply before:content-[''] before:w-10 before:h-full;
      @apply before:shadow-[inset_0_0_#000];

      @apply after:bg-white;
      @apply before:bg-gray-300;
      @apply before:checked:bg-lime-700;
      @apply checked:after:duration-300 checked:after:translate-x-4;

      @apply disabled:after:bg-opacity-75 disabled:cursor-not-allowed;
      @apply disabled:checked:before:bg-opacity-40;
    }
}

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
    to { opacity: 0; }
}

/* define animations for the old and new content */
::view-transition-old(smooth-fade) {
    animation: 0ms ease-out both fade-out;
}
::view-transition-new(smooth-fade) {
    animation: 250ms ease-out 50ms both fade-in;
}
::view-transition-group(*) {
  animation: none;
}

#main {
    view-transition-name: smooth-fade;
}

@media (min-width: 768px) {
    .park-photo {
        height: 550px;
    }
}

.blaze-slider {
    --slides-to-show: 1;
    --slide-gap: 20px;
    direction: ltr
}

.blaze-container {
    position: relative
}

.blaze-track-container {
    overflow: hidden
}

.blaze-track {
    will-change: transform;
    touch-action: pan-y;
    display: flex;
    gap: var(--slide-gap);
    --slide-width: calc( (100% - (var(--slides-to-show) - 1) * var(--slide-gap)) / var(--slides-to-show) );
    box-sizing: border-box
}

.blaze-track>* {
    box-sizing: border-box;
    width: var(--slide-width);
    flex-shrink: 0
}

.blaze-pagination {
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }

.blaze-pagination button {
    font-size: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    outline: none;
    border: none;
    background: #365314;
    cursor: pointer;
    transition: transform 200ms ease, background-color 300ms ease;
}

.blaze-pagination button.active {
    background: #a3e635;
    transform: scale(1.3);
}

.blaze-slider.start .blaze-prev,
.blaze-slider.end .blaze-next {
    opacity: 0.5;
    cursor: not-allowed;
}

.mapboxgl-scroll-zoom-blocker, .mapboxgl-touch-pan-blocker {
    transition-delay: 0s !important;
    transition: opacity 0.25s ease-in-out !important;
}

.sedan-sc-regular {
    font-family: "Sedan SC", serif;
    font-weight: 500;
    font-style: normal;
}

.loading-bar {
    z-index: 100;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.75rem;
    background: linear-gradient(90deg, transparent,
    #067f0a, transparent,
    #7cd23b, transparent
    );
}
.htmx-request.loading-bar {
    opacity: 1;
    animation: fadeIn 0.2s linear forwards, slide 1.75s ease-in-out infinite;
}
@keyframes slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX( 100%); }
}
@keyframes fadeIn {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

.geocoder {
    min-width: 240px;
    height: 50px;
}

@media screen and (min-width: 640px) {
    .geocoder {
        height: 36px;
        max-width: 360px;
    }
}
