/* This file is for your main application CSS */

.logo,
.logo:hover {
  --logo-color: rgb(200, 110, 0);
  width: max-content;
  display: flex;
  align-items: center;
  font-size: 16px;
  gap: 7.5px;
  padding: 0.05rem 0.75rem;
  color: var(--color-base-content);
  border-radius: 5px;
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-family: cursive;
}

.logo > .kanji {
  font-size: 24px;
  font-weight: 300;

  background: linear-gradient(
    145deg,
    var(--color-base-content),
    var(--color-base-content) 50%,
    var(--color-base-300)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

a:hover,
.button-as-link:hover,
.link-rows tr:hover {
  /* TODO fix daisy theme to be orange? */
  /* color: var(--color-secondary); */
  color: rgb(208, 135, 0);
  cursor: pointer;
}

/* hack to make links span the full parent-width */
.link-rows td {
  padding: 0;

  > * {
    display: block;
    padding-inline: 1rem;
    padding-block: 0.75rem;
  }
}

.search-advice {
  padding-inline: 2.5rem;
  padding-block: 0.5rem;
}

.word-list {
  display: flex;
  flex-direction: column;
  font-size: 0.9em;

  > li > a {
    display: block;
    padding-inline: 1.5rem;
    padding-block: 0.5rem;

    > h4 {
      padding-left: 0.5rem;

      > .highlighted {
        font-size: 1.05em;
        padding-right: 0.3rem;
      }
    }

    > * {
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.meaning-list {
  display: flex;
  flex-direction: column;
  counter-reset: meaning;

  > li {
    padding-inline: 1.5rem;
    padding-block: 0.75rem;

    h2 {
      /* aligning tags */
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .meaning-en::before {
      content: counter(meaning) ". ";
      counter-increment: meaning;
    }
  }
}

.meaning-category {
  font-size: 0.75em;
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  padding-left: 0.25rem;
}

.meaning-en {
  font-size: 0.95em;
  padding-block: 0.5rem;
  padding-right: 0.75rem;
}

.zebra-list > li {
  border-bottom: var(--border) solid
    color-mix(in oklch, var(--color-base-content) 15%, transparent);

  &:nth-child(2n) {
    background-color: var(--color-base-200);
  }
}

.examples {
  padding-inline-start: 0.25rem;
}

.example-en,
.example-ja {
  font-size: 0.85em;
  color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
  padding-inline: 1rem;

  &::before,
  &::after {
    font-family: "Times New Roman", Times, serif;
    font-size: larger;
    font-weight: bolder;
    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  }
}

.example-en {
  text-indent: -0.75rem;
  &::before {
    content: "“";
    padding-right: 0.25rem;
  }
  &::after {
    content: "”";
    padding-left: 0.25rem;
  }
}

.example-ja {
  text-indent: -1.25rem;
  &::before {
    content: "『";
    padding-right: 0.25rem;
  }
  &::after {
    content: "』";
    padding-right: -0.25rem;
  }
}

.text-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.link-rows a {
  height: 100%;
  width: 100%;
}

.search-bar {
  margin-left: 2em;
  width: 85%;

  svg {
    height: 1em;
  }

  input {
    /* IMPORTANT, iOS zooms in for smaller fonts in input! */
    font-size: 16px;
    padding: 0.5rem;
  }
}

.empty-result {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  padding-inline: 3rem;
  padding-block: 1.5rem;
  gap: 1.5rem;

  h2 {
    font-size: large;
    font-weight: bold;
  }

  .nai-kanji {
    opacity: 20%;
    font-size: 3em;
    font-weight: 100;
    font-family: "Times New Roman", Times, serif;
  }
}

/* https://htmx.org/attributes/hx-indicator/ */
.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.word-header {
  /* "flex items-center justify-between gap-6" */
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-left: 2rem;

  > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  h1 {
    font-size: xx-large;
    font-family: "Times New Roman", Times, serif;
    font-weight: lighter;
  }
}

.word-tags {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  gap: 0.25rem;
}

.word-uncommon {
  color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
  font-weight: lighter;
}

.word-rare {
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  font-weight: lighter;
}

/*
==============================
Default CSS overrides
==============================
 */
.menu > li > a {
  padding-inline: 0.75rem;

  @media (width<=640px) {
    padding-inline: 0.5rem;
  }
}

/*
==============================
Cherry-picked tailwind classes
==============================
 */

.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}

.flex-col {
  flex-direction: column;
}

.list-disc {
  list-style-type: disc;
}

.p-4 {
  padding: calc(var(--spacing) * 4);
}

.p-8 {
  padding: calc(var(--spacing) * 8);
}