/*
 * Copyright DB InfraGO AG and contributors
 * SPDX-License-Identifier: Apache-2.0
 */

@import "tailwindcss";

@plugin '@tailwindcss/typography';

@theme inline {
  --color-primary-50: hsl(var(--primary-color-hue) 46.2% 94.9%);
  --color-primary-100: hsl(var(--primary-color-hue) 49% 90%);
  --color-primary-200: hsl(var(--primary-color-hue) 47.7% 79%);
  --color-primary-300: hsl(var(--primary-color-hue) 48.1% 69%);
  --color-primary-400: hsl(var(--primary-color-hue) 48.6% 58%);
  --color-primary-500: hsl(var(--primary-color-hue) 50% 47.8%);
  --color-primary-600: hsl(var(--primary-color-hue) 48.5% 38%);
  --color-primary-700: hsl(var(--primary-color-hue) 48.6% 29%);
  --color-primary-800: hsl(var(--primary-color-hue) 48.5% 19%);
  --color-primary-900: hsl(var(--primary-color-hue) 49% 10%);
  --color-primary-950: hsl(var(--primary-color-hue) 46.2% 5.1%);
}

@custom-variant dark (&:where(.dark, .dark *));

.template-container ul > li > a > img,
.template-container a > img {
  margin: 0 !important;
}

@variant dark {
  .layer-above,
  .svg-display img:not(.icon),
  .bp-inner img {
    filter: hue-rotate(180deg) invert(80%) saturate(200%);
  }
}

.html-content {
  text-align: left;

  svg {
    display: block;
    @apply h-auto max-w-full;
    text-align: center;
  }

  a {
    @apply no-underline;
    @apply font-normal;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-break: break-word;
  }

  h1 {
    @apply mb-4 mt-5 text-4xl;
  }
  h2 {
    @apply mb-3 mt-5 text-3xl;
  }
  h3 {
    @apply mb-3 mt-5 text-2xl;
  }
  h4 {
    @apply mb-3 mt-5 text-xl;
  }

  table {
    @apply min-w-full divide-y divide-gray-400;

    tr {
      border-bottom: 1px solid #ddd;

      &:last-of-type {
        border-bottom: none;
      }
    }

    td,
    th {
      vertical-align: top;
      padding: 0 0.4em;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: normal;
    }

    td {
      p {
        padding-top: 0;
        margin-top: 0;

        &:last-of-type {
          margin-bottom: 0.2em;
        }
      }

      ul {
        padding-bottom: 0.6em;
      }
    }
  }

  p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    line-height: 1.5em;
  }

  p a,
  li a {
    @apply italic text-gray-500 hover:underline;
  }
}

.toc-link {
  position: relative;
  padding-left: 0.75rem;

  &::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 0;
    background: var(--color-primary-600);
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    @variant dark {
      background: var(--color-primary-400);
    }
  }

  &.active {
    color: var(--color-primary-600);

    @variant dark {
      color: var(--color-primary-400);
    }

    &::before {
      height: 70%;
    }
  }
}
