styles.css

/*! purgecss start ignore */
@import './syntax-highlight.css';
/*! purgecss end ignore */

@import 'tailwindcss';

@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms' {
  strategy: class;
}

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

@source '../src';
@source '../../ui-code-block/src';
@source '../../ui-common/src';
@source '../../ui-icons/src';
@source '../../ui-project-details/src';
@source '../../ui-render-config/src';
@source '../../shared/src';
@source '../../../node_modules/@nx/graph';

@source not '../../**/*.{spec,test,stories}.*';
@source not '../../**/eslint.config.*';

/* v3 compat: default border color was gray-200, v4 is currentColor. */
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

/* Strip default quote characters around inline code and blockquote. */
.prose :where(code):not(:where([class~='not-prose'] *))::before,
.prose :where(code):not(:where([class~='not-prose'] *))::after,
.prose
  :where(blockquote p:first-of-type):not(
    :where([class~='not-prose'] *)
  )::before,
.prose
  :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
  content: '';
}

/** Scrollbars **/
.dark {
  color-scheme: dark;
}

/**
 * Tooltips
 */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:before {
  background-color: hsla(214, 61%, 11%, 1);
  border-radius: 0.375rem;
  color: hsla(0, 0%, 95%, 1);
  content: attr(data-tooltip);
  left: 0;
  opacity: 0;
  padding: 0.25rem 0.5rem;
  position: absolute;
  text-align: center;
  text-transform: capitalize;
  top: 120%;
  transition: opacity 150ms ease-out;
  visibility: hidden;
  z-index: 1;
  width: max-content;
}
[data-tooltip][data-tooltip-align-right]:before {
  left: auto;
  right: 0;
}

[data-tooltip]:hover:before {
  opacity: 1;
  visibility: visible;
}

/* Dark mode */
html.dark .adaptive-icon {
  /* fill: white; */
  filter: invert(1);
}

.adaptive-icon {
  fill: black;
}