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

body {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-display: block;
}


.form-label {
  @apply block;
  @apply text-sm;
  @apply font-medium;
  @apply text-gray-700;
}

.form-input {
  @apply block;
  @apply w-full;
  @apply px-3;
  @apply py-2;
  @apply placeholder-gray-400;
  @apply border;
  @apply border-gray-200;
  @apply rounded;
  @apply appearance-none;
  @apply text-base;
  @apply bg-white;
  @apply text-gray-900;
  @apply focus:ring-gray-300;
}

.form-space {
 @apply space-y-6;
}

.form-input:disabled {
  @apply cursor-not-allowed;
}

/* https://tailwindui.com/components/application-ui/forms/input-groups#component-1ef4d534fa0cbcb38331bafa5c352ff8 */
.form-input-added-on {
  @apply form-input;
  @apply flex-1;
  @apply min-w-0;
  @apply rounded-none;
  @apply rounded-r-md;

}

.form-input-added-on-parent {
  .field_with_errors {
    @apply flex-1;
  }
}

.turbo-progress-bar {
  @apply h-0.5;
  @apply bg-gray-200;
}

.hide-text {
  /* used for image loading */
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

.container {
  @apply px-6 mx-auto max-w-7xl lg:px-8;
}

.lg-container {
  @apply px-0 mx-auto max-w-7xl lg:px-8 lg:mx-auto;
}


.btn {
  @apply flex;
  @apply inline-flex;
  @apply items-center;
  @apply justify-center;
  @apply px-4;
  @apply py-2;
  @apply rounded;
  @apply font-medium;
  @apply no-underline;
  @apply cursor-pointer;
  @apply border;
  @apply border-accent;

}

.btn-big {
  @apply px-8;
  @apply py-3;
  @apply md:py-4;
  @apply md:text-lg;
  @apply font-semibold;
}

.btn-small {
  @apply px-2;
  @apply py-1;
  @apply text-sm;
}


.btn-primary {
  @apply bg-accent;
  @apply text-gray-050;
}


.btn-secondary {
  @apply text-accent;
  @apply border;
  @apply border-accent;
}


.btn-tertiary {
  @apply bg-gray-600;
  @apply text-gray-100;
  @apply hover:bg-gray-700;
}


.trix-editor {
  @apply prose;
  @apply max-w-none;
  @apply focus:outline-none;
  @apply focus:ring-gray-500;
  @apply focus:border-gray-500;
  @apply focus:ring-0 !important;
  min-height:200px;
}

.public-page-container {
  @apply max-w-3xl;
  @apply px-6;
  @apply mx-auto;
  @apply lg:px-8;
}


.dashboard-container {
  @apply px-4;
  @apply max-w-7xl;
  @apply sm:px-8;
  @apply lg:px-16;
  @apply mx-auto;
}

.dashboard-title {
  @apply text-2xl;
  @apply font-semibold;
  @apply leading-6;
  @apply text-gray-950;
}

.form-description {
  @apply text-gray-700;
  @apply text-xs;
  @apply pt-1;
}
.badge {
  @apply inline-flex;
  @apply items-center;
  @apply px-2.5;
  @apply py-0.5;
  @apply rounded-md;
  @apply text-sm;
  @apply font-medium;
  @apply bg-accent;
  @apply text-gray-050;
}

.badge-secondary {
  @apply inline-flex;
  @apply items-center;
  @apply px-2.5;
  @apply py-0.5;
  @apply rounded-md;
  @apply text-xs;
  @apply font-medium;
  @apply border;
  @apply border-accent;
  @apply text-accent;
}

.badge-secondary-gray {
  @apply inline-flex;
  @apply items-center;
  @apply px-2.5;
  @apply py-0.5;
  @apply rounded-full;
  @apply text-xs;
  @apply font-medium;
  @apply border;
  @apply border-gray-600;
  @apply text-gray-600;
}

.record {
  @apply bg-gray-050;
  @apply font-mono;
  @apply text-gray-700;
  @apply px-1;
  @apply rounded-sm;
}

.link {
  @apply text-accent;
  @apply underline;
  @apply cursor-pointer;
}

/* Type setting */

.prose {
  @apply text-gray-950;
  @apply max-w-none;
  @apply leading-relaxed;
}

.prose > div, .prose > h1, .prose > h2 {
  @apply py-3;
}

.prose:last-child > div {
  @apply pb-0;
  @apply mb-0;
}


.prose h1 {
  @apply text-lg;
  @apply font-semibold;
  @apply leading-tight;
  @apply text-gray-925;
}

.prose h2 {
  @apply text-base;
  @apply font-semibold;
  @apply leading-tight;
  @apply text-gray-925;
}

.prose blockquote {
  @apply font-normal;
  @apply !border-accent;
  @apply not-italic;
  border-left-width: 2px;
}

.prose a {
  @apply !font-normal;
}
.prose img {
  max-width: 100%;
  height: auto;
  @apply my-0;
  @apply mx-auto;
}
.prose ul {
  @apply marker:text-gray-800;
}
.prose .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
  @apply my-4;
}
.prose .attachment a {
  color: inherit;
  text-decoration: none;
}
.prose .attachment a:hover,
.prose .attachment a:visited:hover {
  color: inherit;
}
.prose .attachment__caption {
  text-align: center;
}
.prose .attachment__caption .attachment__name + .attachment__size::before {
  content: " · ";
}
.prose .attachment--preview {
  width: 100%;
  text-align: center;
}
.prose .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.prose .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.prose .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.prose .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.prose .attachment-gallery.attachment-gallery--2 .attachment,
.prose .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.flash {
  @apply text-sm;
  @apply font-semibold;
  @apply text-gray-950;
  @apply w-full;
  @apply max-w-sm;
  @apply overflow-hidden;
  @apply rounded-lg;
  @apply shadow-lg;
  @apply pointer-events-auto;
  @apply lg:mb-0;
  @apply bg-white;
  @apply border;
  @apply border-gray-200;
  @apply p-4;
}


.placeholder-center::placeholder,
.placeholder-center::-webkit-input-placeholder,
.placeholder-center:-moz-placeholder,
.placeholder-center::-moz-placeholder,
.placeholder-center:-ms-input-placeholder,
.placeholder-center::-ms-input-placeholder {
    text-align: center;
}