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

@layer components {
  .badge {
    @apply inline-flex items-center px-1.5 rounded-full text-xs font-medium;
  }

  .page-panel {
    @apply bg-white dark:bg-black rounded px-4 pt-3 pb-3;
  }

  .page-header {
    @apply pb-2 border-b dark:border-zinc-700 justify-between items-center;
  }

  .track-card {
    @apply bg-white dark:bg-zinc-800 mb-3 leading-4 flex items-center rounded border dark:border-zinc-700 shadow;
  }

  .folder-card {
    @apply rounded-lg border dark:border-zinc-700 mb-3 active:scale-95 transition-transform;
  }

  .popover-panel {
    @apply bg-white dark:bg-zinc-700 dark:text-zinc-200 dark:border-zinc-600 shadow rounded border;
  }

  .popover-menu {
    @apply z-50 rounded-md shadow-lg bg-white dark:bg-zinc-900 ring-1 ring-black ring-opacity-5 focus:outline-none;
  }

  .sort-menu-item {
    @apply block p-3 hover:bg-zinc-100 active:bg-zinc-200 dark:hover:bg-zinc-800 dark:active:bg-zinc-900;
  }

  .nav-link {
    @apply hover:bg-gradient-to-r hover:from-cyan-500 hover:to-blue-500 active:scale-95 transition-transform text-zinc-300 hover:bg-zinc-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium;
  }

  .mobile-nav-link {
    @apply text-zinc-300 hover:bg-zinc-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium;
  }

  .mobile-menu-button {
    @apply inline-flex items-center justify-center p-2 rounded-md text-zinc-400 hover:text-white hover:bg-zinc-700 focus:ring-2 focus:ring-inset focus:ring-white;
  }

  .user-menu-button {
    @apply text-white flex px-2 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-zinc-800 focus:ring-white;
  }

  .modal-container {
    @apply fixed inset-0 overflow-y-auto transition-opacity ease-out duration-300;
  }

  .modal-panel {
    @apply inline-block align-bottom bg-white dark:bg-zinc-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle max-w-lg w-full;
  }

  .modal-body {
    @apply bg-white dark:bg-zinc-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4;
  }

  .form-primary-button {
    @apply mt-3 w-full inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm;
  }

  .btn {
    @apply transition-transform active:scale-95 px-3 py-1 shadow-sm rounded border bg-zinc-100 dark:bg-zinc-600 dark:border-0 dark:text-zinc-200 text-center;
  }

  .btn-primary {
    @apply bg-blue-700 text-white border-0;
  }

  .btn-danger {
    @apply bg-red-700 text-white border-0;
  }

  .dark .btn-primary {
    @apply bg-blue-700;
  }

  .menu-item {
    @apply block w-full text-left hover:bg-zinc-100 active:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800 dark:active:bg-zinc-700 block px-4 py-2 text-sm text-zinc-700;
  }

  .text-input {
    @apply shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 dark:border-gray-700 rounded-md dark:bg-black dark:text-white;
  }
}
.square {
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;
}

.square .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 0.2s ease-in-out;
}

.square .content button {
  opacity: 0;
  transition: color 0.2s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.square:hover .content {
  background-color: rgba(0, 0, 0, 0.2);
}

.square:hover .content button {
  opacity: 1;
  color: white;
}

input[type="range"][orient="vertical"] {
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical; /* WebKit */
}

input[type="range"] {
  -webkit-appearance: none;
  background: rgba(0, 0, 0, 0.5);
}

.dark input[type="range"] {
  background: rgba(255, 255, 255, 0.5);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track,
input[type="range"]::-ms-track {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
  height: 1px;
}

.arrow,
.arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.arrow {
  visibility: hidden;
}

.arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}

[data-popover-content] {
  z-index: 999;
}

[data-popper-placement^="top"] > .arrow {
  bottom: -4px;
}

[data-popper-placement^="bottom"] > .arrow {
  top: -4px;
}

[data-popper-placement^="left"] > .arrow {
  right: -4px;
}

[data-popper-placement^="right"] > .arrow {
  left: -4px;
}
/*


 */