@import "tailwindcss";

body {
  height: 100%;
  color: var(--mdninja-text);
  background-color: var(--mdninja-background);
}


@theme {
  --breakpoint-xs: 30rem;
}


@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  button:not(:disabled), [role="button"]:not(:disabled) {
    @apply cursor-pointer;
  }
}

@layer components {
  button:hover {
    opacity: 0.85;
  }
  button {
    background-color: var(--mdninja-accent);
    color: var(--mdninja-background);

    display: inline-flex;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    column-gap: 0.375rem;
    align-items: center;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); */

    /* @apply inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-xs hover:opacity-85; */
  }

  a {
    color: var(--mdninja-accent);
    text-decoration: none;
    /* text-decoration: none; */
    /* @apply no-underline hover:underline; */
  }

  a:hover {
    text-decoration: underline;
  }


  h1, h2, h3, h4, h5, h6 {
    color: var(--mdninja-headings);
  }

  main hr {
    opacity: 0.8;
    /* @apply opacity-[.8]; */
  }

  input[type="text"], input[type="email"], select {
    background-color: var(--mdninja-background);
  }

  hr {
    @apply border-gray-300;
  }

  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-xl;
  }

  h4 {
    @apply text-lg;
  }

  h1, h2, h3, h4, h5 {
    @apply font-bold;
  }

  main p, main pre, main img, main h1, main h2, main h3, main h4, main h5 {
    @apply my-4;
  }

  main p:has(+ul) {
    @apply mb-0;
  }

  main pre {
    @apply p-2.5 text-base rounded-sm overflow-x-scroll block bg-[#e9e9e9];
  }

  main img {
    @apply block mx-auto my-10;
  }

  main img, main video {
    @apply max-w-full h-auto;
  }

  :not(pre) > code {
    @apply font-normal;
  }

  code {
    @apply text-[14px] font-normal;
  }

  main p + ul {
    @apply mt-0;
  }

  main ul, main ol {
    list-style: initial;
    margin: revert;
    padding: revert;
  }
}



/*
This snippet is present because we use some classes in a website that are not present in
this theme so we need to force tailwind to include them in the bundle
*/
.mdninja-nonexistingclass {
  @apply mt-2.5 inline-flex items-center mb-1 inline-flex items-center gap-x-1.5 rounded-md bg-sky-500
    px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-sky-400 focus-visible:outline
    focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500 appearance-none
    block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs placeholder-gray-400
    focus:outline-hidden focus:ring-sky-500 focus:border-sky-500 sm:text-sm mt-1.5 mt-2.5 inline-flex
    items-center mb-1 px-4 py-2.5 border border-transparent text-sm leading-4 font-medium rounded-md
    shadow-xs text-white bg-sky-500 hover:bg-sky-400 focus:outline-hidden focus:ring-2 focus:ring-offset-2
    focus:ring-sky-500 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs
    placeholder-gray-400 focus:outline-hidden focus:ring-sky-500 focus:border-sky-500 sm:text-sm hover:ring-[var(--mdninja-accent)];
}



iframe {
  display: initial;
}

/* code {
  font-size: 15px;
} */

:not(pre) > code {
  background-color: #e9e9e9;
  padding: 1px;
  border-radius: 2px;
}


.center, .center p {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

blockquote {
  border-radius: 2px;
  padding: 5px 10px;
  border-left: 4px solid var(--mdninja-accent);
  filter: brightness(0.97);
  background-color: var(--mdninja-background);
  font-style: italic;
}

table {
  /* border-collapse: collapse; */
  width: 100%;
  border-radius: 6px;
  border: 1px solid#ddd;
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  text-align: left;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--mdninja-background);
  filter: brightness(0.95);
  /* color: #111827; */
}

thead, tbody {
  /* border: none; */
  border: 1px solid #ddd;
  /* border-radius: 6px; */
}


.alert {
  border-radius: 5px;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

.alert-info {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}


.markdown-ninja-excerpt {
  background: linear-gradient(0deg,#fff 0,hsla(0,0%,100%,0.95) 30%,hsla(0,0%,100%,0));
  /* height: 230px;
  margin-top: -230px; */
  height: 300px;
  margin-top: -300px;
  position: relative;
}

.markdown-ninja-excerpt-card {
  border: 1px solid #fff;
  height: 140px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 0 1px rgba(0,0,0,.06),0 0 5px rgba(0,0,0,.04),0 5px 22px -8px rgba(0,0,0,.1),0 12.8px 3.7px -41px rgba(0,0,0,.07),0 15.8px 9.3px -41px rgba(0,0,0,.07),0 17.4px 19px -41px rgba(0,0,0,.07),0 19.4px 39.1px -41px rgba(0,0,0,.07),0 40px 107px -41px rgba(0,0,0,.07);
}

.markdown-ninja-excerpt-card .button {
  background-color: red;
  border-color: red;
  cursor: pointer;
}

.markdown-ninja-excerpt-card .button:hover {
  background-color: #ff3737;
  border-color: #ff3737;
  text-decoration: none;
}

button.markdown-ninja-subscribe {
  margin-top: 10px;
}


/* TODO: remove either md-newsletter or mdn-newsletter */
mdn-newsletter, md-newsletter {
  display: none;
}
