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

@layer base {
  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button,
  input[type='number'] {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield !important;
  }

  html {
    @apply text-neutral-700;
  }
}

@layer components {
  .ts-control {
    @apply flex w-full rounded-md border-0 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-neutral-300 sm:text-sm sm:leading-6;
  }

  .focus .ts-control {
    @apply shadow-sm ring-2 ring-indigo-600;
  }

  .ts-control input {
    @apply !pr-5 sm:text-sm sm:leading-6 placeholder:text-neutral-400 !m-0;
  }

  .ts-wrapper.multi .ts-control > div {
    @apply rounded px-1.5 py-0 mb-0 sm:text-xs sm:leading-6 text-neutral-700 bg-neutral-100;
  }

  .ts-dropdown {
    @apply rounded-md border border-solid border-t border-neutral-300;
  }

  .ts-dropdown [data-selectable].option, .ts-dropdown .no-results {
    @apply py-2;
  }
  .ts-dropdown [data-selectable].option:first-child {
    @apply rounded-t-md;
  }

  .ts-dropdown [data-selectable].option:last-child {
    @apply rounded-b-md;
  }
  .ts-dropdown .create:hover, .ts-dropdown .option:hover, .ts-dropdown .active {
    @apply bg-indigo-100 text-indigo-900;
  }

  .ts-dropdown .spinner {
    @apply h-auto w-auto;
  }

  .ts-dropdown .spinner:after {
    @apply h-5 w-5 border-2 p-0 my-0 inline-block;
  }

  .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    print-color-adjust: exact;
  }

  .video-container {
    display: none;
  }

  .video-container.visible {
    display: block;
  }

  .mobile-menu-visible #main-nav, .mobile-menu-hidden #main-nav {
    @apply flex flex-col lg:flex-row px-4 lg:px-8 lg:space-x-6 text-white border-b-4 border-neutral-900;
  }

  .mobile-menu-hidden #main-nav {
    @apply hidden lg:flex;
  }

  #main-nav a {
    @apply py-4;
  }

  .admin-workout-week-days.hidden {
    display: none;
  }

  .swiper-pagination .swiper-pagination-bullet {
    @apply bg-neutral-800;
  }

  .swiper-slide {
    overflow-y: auto;
  }
}
/*
 * 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.
 *


 */