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

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("fonts/IBMPlexSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* a:hover {
  text-decoration-color: #ff4400;
  color: rgb(254, 185, 160);
  transition: all 0.2s ease-out;
} */

form label {
  @apply dark:text-slate-400;
}

.responsive-table {
  @apply dark:text-white mx-auto table-fixed;
}

.responsive-table tr:nth-child(even) {
  @apply bg-slate-800
}

.responsive-table tbody tr:nth-child(odd) {
  @apply bg-slate-900
}

.responsive-table thead th {
  @apply text-left border-b-2 border-b-slate-500 text-xl;
}

.responsive-table thead th:not(:first-child),
.responsive-table td:not(:first-child) {
  @apply border-l border-l-slate-500;
}

@layer utilities {
  .max-w-20char {
    max-width: 20ch;
  }
  .max-w-30char {
    max-width: 30ch;
  }
  .max-w-35char {
    max-width: 35ch;
  }
  .max-w-40char {
    max-width: 40ch;
  }
}

form input,
select,
textarea {
  @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
}

form input:disabled,
select:disabled,
textarea:disabled {
  @apply dark:bg-slate-700 dark:text-slate-400;
}

.errorlist {
  @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
}

@media screen and (min-width: 768px) {
  form input,
  select,
  textarea {
    width: 300px;
  }
}

@media screen and (max-width: 768px) {
  form input,
  select,
  textarea {
    width: 150px;
  }
}

#button-container button {
  @apply mx-1;
}

th {
  @apply text-right;
}

th label {
  @apply mr-4;
}

.basic-button-container {
  @apply flex space-x-2 justify-center;
}

.basic-button {
  @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out;
}

.markdown-content ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1em;
}

.markdown-content ol {
  list-style-type: decimal;
  list-style-position: inside;
  padding-left: 1em;
}

.markdown-content ul, 
.markdown-content ol {
    list-style-position: outside;
    padding-left: 1em;
}

.markdown-content ul ul, 
.markdown-content ul ol, 
.markdown-content ol ul, 
.markdown-content ol ol {
    list-style-type: circle;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 1em;
}

.truncate-container {
  @apply inline-block relative transition-all;
  a {
    @apply inline-block truncate max-w-20char;
    &:hover {
      @apply absolute max-w-none -top-8 -left-6 min-w-60 px-6 py-3.5 bg-purple-600 rounded-sm outline-dashed outline-purple-400 outline-4;
    }
  }  
}