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

dialog:not([open]), dialog[open=false] {
  display: none;
}

body {
  .show-on-connected { display: none; }
}

body.connected {
  .hide-on-connected { display: none; }
  .show-on-connected { display: block; }
}

/* Remove focus outline from inputs and buttons */
input:focus, button:focus {
  box-shadow: none !important;
}

button:focus-visible, a:focus-visible, [type=file]:focus {
  outline: none;
}

/* Ripple animation */

.ripple {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-radius: 50%;
  background-color: #F59E0B;
  position: relative;
}

.ripple:before {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  border-radius: 50%;
  position: absolute;
  top: -3px;
  left: -3px;
  border: 3px solid #F59E0B;
  animation: anim-ripple 2s infinite;
}

.spinner {
  border-width: 2px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}

@keyframes anim-ripple {
  from {
    opacity: 1;
    transform: scale3d(0.75, 0.75, 1);
 }
  to {
    opacity: 0;
    transform: scale3d(1.25, 1.25, 1);
 }
}

/* Timelock Empty State */
[data-timelock-target="selectedList"] .empty-message {
  display: none;
}

[data-timelock-target="selectedList"]:empty + .empty-message,
[data-timelock-target="selectedList"]:not(:has(*:not(.empty-message))) .empty-message {
  display: block;
}

/* Scale Animation */
@keyframes fadeOutScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.fade-out-scale {
  animation: fadeOutScale 200ms ease-out forwards;
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-1rem);
  }
}

@layer components {
  .slide-down {
    animation: slide-down 0.2s ease-out;
  }
  
  .slide-up {
    animation: slide-up 0.2s ease-out;
  }

  .utxo-filter {
    @apply rounded transition-colors;
  }

  .utxo-filter[data-filter="cardinal"] {
    @apply text-gray-300;
  }

  .utxo-filter[data-filter="inscribed"] {
    @apply text-neutral-primary;
  }

  .utxo-filter[data-filter="runes"] {
    @apply text-neutral-secondary;
  }

  .utxo-filter.active {
    @apply font-medium bg-gray-800 rounded;
  }

  .utxo-filter[data-filter="cardinal"].active {
    @apply text-gray-300;
  }

  .utxo-filter[data-filter="inscribed"].active {
    @apply text-neutral-primary;
  }

  .utxo-filter[data-filter="runes"].active {
    @apply text-neutral-secondary;
  }
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  .scrollbar-thumb-gray-700 {
    scrollbar-color: theme('colors.gray.700') transparent;
  }
  .scrollbar-track-transparent {
    scrollbar-track-color: transparent;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

dialog:not([open]), dialog[open=false] {
  display: none;
}

body {
  .show-on-connected { display: none; }
}

body.connected {
  .hide-on-connected { display: none; }
  .show-on-connected { display: block; }
}

/* Remove focus outline from inputs and buttons */
input:focus, button:focus {
  box-shadow: none !important;
}

button:focus-visible, a:focus-visible, [type=file]:focus {
  outline: none;
}

/* Ripple animation */

.ripple {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-radius: 50%;
  background-color: #53ae26;
  position: relative;
}

.ripple:before {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  border-radius: 50%;
  position: absolute;
  top: -3px;
  left: -3px;
  border: 3px solid #53ae26;
  animation: anim-ripple 2s infinite;
}

.spinner {
  border-width: 2px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}

@keyframes anim-ripple {
  from {
    opacity: 1;
    transform: scale3d(0.75, 0.75, 1);
 }
  to {
    opacity: 0;
    transform: scale3d(1.25, 1.25, 1);
 }
}