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

/* Pagination styles */
.pagy {
  @apply flex items-center justify-between px-1;
}
.pagy.info b {
  @apply px-1;
}
.pagy.nav a {
  @apply inline-flex items-center border-t-2 border-transparent px-4 py-2 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 transition-all ease-in duration-100;
}
.pagy.nav a.current {
  @apply border-sky-blue text-sky-blue;
}
.pagy.nav a[aria-disabled="true"] {
  @apply text-gray-300 cursor-default;
}

/* DateRangePickerComponent styles */
.date-range-picker-component .calendar table th {
  @apply px-1 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider;
}
.date-range-picker-component .calendar table td {
  @apply w-10 h-10 text-center text-xs;
}
.date-range-picker-component .calendar table td button {
  @apply w-10 h-10 hover:bg-gray-200 focus:outline-none
}
.date-range-picker-component .calendar table td.selected button {
  @apply bg-gray-100 hover:bg-gray-200;
}
.date-range-picker-component .calendar table td.start-date button,
.date-range-picker-component .calendar table td.end-date button {
  @apply font-semibold text-white bg-sky-blue hover:bg-sky-blue-hover;
}
.date-range-picker-component .calendar table td.start-date button {
  @apply rounded-l-md;
}
.date-range-picker-component .calendar table td.end-date button {
  @apply rounded-r-md;
}
.date-range-picker-component .calendar table td.other-month {
  @apply text-gray-400;
}

@layer components {
    .prose {
        @apply max-w-none font-sans text-black;
    }

    .prose h1 {
        @apply text-lg font-bold tracking-tight sm:text-4xl mb-4 text-black;
    }

    .prose h2 {
        @apply text-lg font-bold tracking-tight sm:text-3xl mb-4 text-black/90;
    }

    .prose h3 {
        @apply text-lg font-bold sm:text-2xl mb-3 text-black/80;
        font-size: 1.125rem !important;
    }

    .prose h4 {
        @apply text-lg font-bold mb-2 text-black/70;
    }

    .prose p {
        @apply mb-4 leading-relaxed;
    }

    .prose a {
        @apply cursor-pointer text-sky-600 hover:text-sky-700 hover:underline transition duration-150 ease-in-out;
    }

    .prose ul {
        @apply list-disc pl-5 mb-4;
    }

    .prose ol {
        @apply list-decimal pl-5 mb-4;
    }

    .prose li {
        @apply mb-1;
    }

    .prose blockquote {
        @apply border-l-4 border-gray-300 pl-4 italic my-4 text-black/80;
    }

    .prose code {
        @apply px-1 py-0.5 bg-gray-100 rounded text-sm text-black/90;
    }

    .prose pre {
        @apply bg-gray-100 p-4 rounded mb-4 overflow-x-auto;
    }

    .prose pre code {
        @apply bg-transparent p-0;
    }

    .prose img {
        @apply max-w-full h-auto my-4 rounded;
    }

    .prose hr {
        @apply my-8 border-t border-gray-300;
    }

    .prose table {
        @apply w-full mb-4 border-collapse;
    }

    .prose th,
    .prose td {
        @apply border border-gray-300 p-2;
    }

    .prose th {
        @apply bg-gray-100 font-bold;
    }

    .prose strong {
        @apply font-bold text-black;
    }

    .prose em {
        @apply italic text-black;
    }
}
/*
 * 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.
 *


 */


html {
  scroll-behavior: smooth;
}

/**
 * Copy to clipboard button, used by UI::CopyToClipboardButton
 */
.copy-to-clipboard-button {
  position: relative;
  display: inline-block;
  background: none;
  cursor: pointer;
}

.copy-to-clipboard-button.button-click,
.copy-to-clipboard-button:focus {
  outline: none;
}

.copy-to-clipboard-button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -35px 0 0 -35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0;
  background: rgba(111, 148, 182, 0.1);
}

.copy-to-clipboard-button.button-click:after {
  -webkit-animation: anim-effect-a 0.3s forwards;
}

@-webkit-keyframes anim-effect-a {
  0% {
    -webkit-transform: scale3d(0.3, 0.3, 1);
  }

  25%,
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
  }
}