/*

 */

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

@font-face {
  font-family: 'IBM Plex Mono';
  src: url(https://downlow.app/assets/IBMPlexMono-Regular-da9ffd7c6a6125571e875a48a15e94af06da0d9fc3810894dfdec4d5107a4687.ttf);
}

.stretched-link::after {
  @apply absolute bg-transparent inset-0 pointer-events-auto z-10;
  content: '';
}

.slash {
  @apply
    -skew-x-12
    bg-stone-400
    h-7
    w-0.5
}

.flash {
  @apply text-center p-4 text-white text-sm uppercase;
}
.flash--alert {
  @apply bg-red-500;
}
.flash--notice {
  @apply bg-blue-500;
}

[contenteditable=true],
[multiple],
[type=date],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
select,
textarea,
.input
{
  @apply
    bg-white
    border
    border-stone-500
    focus:border-yellow-500
    focus:outline-none
    focus:ring-1
    focus:ring-yellow-500
    px-3
    py-2;
}

.remirror-editor-wrapper [contenteditable=true] {
  padding-top: 2.5rem;
  min-height: 10rem;
}

#post_reply .remirror-editor-wrapper [contenteditable=true] {
  min-height: inherit;
}

.placeholder {
  @apply text-stone-300;
}

.field--error [contenteditable=true],
.field--error [multiple],
.field--error [type=date],
.field--error [type=datetime-local],
.field--error [type=email],
.field--error [type=month],
.field--error [type=number],
.field--error [type=password],
.field--error [type=search],
.field--error [type=tel],
.field--error [type=text],
.field--error [type=time],
.field--error [type=url],
.field--error [type=week],
.field--error select,
.field--error textarea
{
  @apply
    border-red-300
    focus:border-red-500
    focus:ring-red-500;
}

.prose blockquote {
  @apply font-normal;
}

.ProseMirror p.remirror-is-empty:first-child::before {
  @apply float-left h-0 pointer-events-none text-stone-300;
  content: attr(data-placeholder);
}

@layer utilities {
  .stack-sm > * + * { @apply mt-4; }
  .stack > * + * { @apply mt-6; }
  .no-stack > * { @apply mt-0; }

  turbo-frame:empty + li {
    @apply mt-0;
  }
}

@layer components {
  .btn {
    @apply
      bg-blue-500
      cursor-pointer
      font-display
      px-2
      py-1
      relative
      rounded
      shadow-md
      text-white
      active:left-0.5
      active:shadow-none
      active:top-0.5
      hover:bg-blue-400;
  }

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

  .btn--text {
    @apply bg-transparent hover:bg-transparent link px-0 shadow-none;
  }

  .btn-bar {
    @apply divide-x divide-stone-100 flex;
  }

  .btn-bar button {
    @apply
      active:bg-stone-400
      bg-stone-200
      duration-150
      ease-in-out
      first:rounded-l
      focus:bg-stone-400 focus:outline-none focus:ring-0
      hover:bg-stone-300
      last:rounded-r
      px-2
      py-1
      text-stone-500
      transition;
  }

  .btn-bar button.active {
    @apply bg-stone-400 text-stone-100;
  }

  .link {
    @apply
      decoration-stone-400
      text-black
      underline-offset-2
      hover:underline
    ;
  }

  form .link {
    @apply
      decoration-blue-300
      hover:text-blue-600
      text-blue-500
      underline
      ;
  }

  input[type="submit"] {
    @apply btn;
  }

  .or {
    @apply
      font-display
      text-stone-400
      after:content-['–']
      after:ml-1
      before:content-['–']
      before:mr-1;
  }

  .blank-slate {
    @apply
      bg-stone-200/10
      font-bold
      font-display
      py-4
      text-center
      text-sm
      text-stone-300
      rounded
      shadow-inner
      uppercase;
  }

  .row-spaced {
    @apply flex flex-row gap-x-4 items-center;
  }

  .row-white {
    @apply bg-white border mb-4 last:mb-0 p-2;
  }

  .row-link {
    @apply row-white relative hover:bg-amber-100;
  }

  .box {
    @apply bg-stone-50 shadow-lg p-4 rounded;
  }
  .box-link {
    @apply
      border
      border-transparent
      hover:bg-white
      hover:border-stone-300
      relative;
  }

  .avatar {
    @apply
      h-5
      leading-5
      rounded-full
      text-center
      text-stone-100
      text-base
      uppercase
      w-5
      ;
  }

  .badge {
    @apply
      flex
      font-display
      items-center
      px-2
      relative
      text-sm
      text-white
      z-0
      after:-skew-x-12
      after:absolute
      after:bg-stone-700
      after:h-full
      after:left-0
      after:top-0
      after:w-full
      after:z-[-1]
      ;
  }

  .author {
    @apply badge after:bg-stone-700;
  }

  .anonymous {
    @apply badge italic after:bg-stone-500;
  }
}
/*


 */