@import "tailwindcss";
@config "../../tailwind.config.ts";

/* Light mode (default) */
:root {
  --foreground-color: #4c5358; /* Netral abu gelap */
  --background-color: #f9f9fb; /* Putih kebiruan lembut */
  --container-color: #ffffff; /* Putih bersih */
  --primary-color: #c62828; /* Merah tua dari tangan */
  --primary-bg: #fce5e5; /* Merah muda soft */
  --title-color: #2d2d2d; /* Hitam soft */
  --text-color: #5e5c7f; /* Abu medium */
  --text-secondary: #6a6a6a; /* Abu sekunder */
  --stroke-color: #e2e2e2; /* Border lembut */
  --dots: url(/images/dots-light.svg);
}

/* Dark mode */
[data-theme="dark"] {
  --foreground-color: #b0bcc9; /* Abu terang */
  --background-color: #1f2428; /* Abu gelap soft */
  --container-color: #2c2f34; /* Abu tua lembut */
  --primary-color: #ff5555; /* Merah terang sedikit soft */
  --primary-bg: #3a1d1d; /* Merah gelap transparan */
  --title-color: #f0f0f0; /* Putih lembut */
  --text-color: #a4b5d0;
  --text-secondary: #9aa5b1; /* Abu medium terang */
  --stroke-color: #44484d; /* Border gelap */
  --dots: url(/images/dots-dark.svg);
}

/* Light mode (default) */
/* :root {
  --foreground-color: #59677a;
  --background-color: #f8f7fd;
  --container-color: #fff;
  --primary-color: #ff7f65;
  --primary-bg: #ff985c4d;
  --title-color: #374356;
  --text-color: #5e5c7f;
  --text-secondary: #677586;
  --stroke-color: #e7e7e7;
  --dots: url(/images/dots-light.svg);
} */

/* Dark mode */
/* [data-theme="dark"] {
  --foreground-color: #8fa2bb;
  --background-color: #222831;
  --container-color: #2e3541;
  --primary-color: #ff9f8c;
  --primary-bg: #ff985c4d;
  --title-color: #bdcee9;
  --text-color: #a4b5d0;
  --text-secondary: #7f91ab;
  --stroke-color: #3e444e;
  --dots: url(/images/dots-dark.svg);
} */

*::-webkit-scrollbar {
  width: 0.25rem;
}

*::-webkit-scrollbar-thumb {
  border-radius: 3px;
  border-width: 2px;
  border-color: var(--stroke-color);
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
}

*::-webkit-scrollbar-track {
  border-radius: 3px;
  background-color: transparent;
}

html {
  @apply bg-background;
}

body {
  @apply text-foreground bg-background;
}

/* :is([data-theme="dark"] .btn) {
  border-color: #ff77134c;
  background-color: rgb(247 184 164);
} */

.btn {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  border-width: 1px;
  /* border-color: rgb(254 190 130); */
  background-color: #ffbcaa61;
  padding: 0.75rem 1.25rem;
  font-weight: 400;
  line-height: 1rem;
  /* color: rgb(255 120 79); */
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bg-endless-clouds {
  background-image: url(/images/endless-clouds.svg);
}

.dots:before {
  position: absolute;
  left: -0.75rem;
  top: -0.75rem;
  z-index: -1;
  height: 2.25rem;
  width: 2.25rem;
  background-image: var(--dots);
  --tw-content: "";
  content: var(--tw-content);
}

.dots {
  z-index: 2;
}

.hr {
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
  border-color: var(--stroke-color);
}

.badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: var(--stroke-color);
  background-color: var(--container-color);
  padding: 0.5rem 0.75rem;
}

.card {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--stroke-color);
  background-color: var(--container-color);
  padding: 0.75rem 1rem;
}

.wmde-markdown {
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  color: var(--color-fg-default);
  position: relative;
}

.wmde-markdown {
  padding: 1.5rem !important;
  border: 1px solid var(--stroke-color);
}

.tree ul {
  padding-top: 20px;
  position: relative;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child {
  padding-top: 0;
}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}

.tree ul.items {
  @apply grid grid-cols-3;
}

.tree li .child {
  @apply bg-white h-40 flex justify-center items-center;
  border: 1px solid #ccc;
  padding: 5px 10px;

  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

@media (width >= 48rem) {
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a:hover + ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
  border-color: #94a0b4;
}

.reflection {
  img {
    margin: 0 auto 0 auto;
    -webkit-box-reflect: below -1px -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(transparent),
        color-stop(80%, transparent),
        to(rgba(250, 250, 250, 0.5))
      );
  }
}