@import "tailwindcss" source("../../..");
@import "@bitrix24/b24ui-nuxt";

@layer base {
  /* region vars */
  /**
   * Colors: Solid
   * -------------------------------------------------------------------------- */

  :root {
    --vp-c-white: #ffffff;
    --vp-c-black: #000000;

    --vp-c-neutral: var(--vp-c-black);
    --vp-c-neutral-inverse: var(--vp-c-white);
  }

  .dark {
    --vp-c-neutral: var(--vp-c-white);
    --vp-c-neutral-inverse: var(--vp-c-black);
  }

  /**
   * Colors: Palette
   *
   * The primitive colors used for accent colors. These colors are referenced
   * by functional colors such as "Text", "Background", or "Brand".
   *
   * Each colors have exact same color scale system with 3 levels of solid
   * colors with different brightness, and 1 soft color.
   *
   * - `XXX-1`: The most solid color used mainly for colored text. It must
   *   satisfy the contrast ratio against when used on top of `XXX-soft`.
   *
   * - `XXX-2`: The color used mainly for hover state of the button.
   *
   * - `XXX-3`: The color for solid background, such as bg color of the button.
   *    It must satisfy the contrast ratio with pure white (#ffffff) text on
   *    top of it.
   *
   * - `XXX-soft`: The color used for subtle background such as custom container
   *    or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
   *    on top of it.
   *
   *    The soft color must be semi transparent alpha channel. This is crucial
   *    because it allows adding multiple "soft" colors on top of each other
   *    to create a accent, such as when having inline code block inside
   *    custom containers.
   * -------------------------------------------------------------------------- */

  :root {
    --vp-c-gray-1: #dddde3;
    --vp-c-gray-2: #e4e4e9;
    --vp-c-gray-3: #ebebef;
    --vp-c-gray-soft: rgba(142, 150, 170, 0.14);

    --vp-c-indigo-1: #3451b2;
    --vp-c-indigo-2: #3a5ccc;
    --vp-c-indigo-3: #5672cd;
    --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);

    --vp-c-purple-1: #6f42c1;
    --vp-c-purple-2: #7e4cc9;
    --vp-c-purple-3: #8e5cd9;
    --vp-c-purple-soft: rgba(159, 122, 234, 0.14);

    --vp-c-green-1: #18794e;
    --vp-c-green-2: #299764;
    --vp-c-green-3: #30a46c;
    --vp-c-green-soft: rgba(16, 185, 129, 0.14);

    --vp-c-yellow-1: #915930;
    --vp-c-yellow-2: #946300;
    --vp-c-yellow-3: #9f6a00;
    --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);

    --vp-c-red-1: #b8272c;
    --vp-c-red-2: #d5393e;
    --vp-c-red-3: #e0575b;
    --vp-c-red-soft: rgba(244, 63, 94, 0.14);

    --vp-c-sponsor: #db2777;
  }

  .dark {
    --vp-c-gray-1: #515c67;
    --vp-c-gray-2: #414853;
    --vp-c-gray-3: #32363f;
    --vp-c-gray-soft: rgba(101, 117, 133, 0.16);

    --vp-c-indigo-1: #a8b1ff;
    --vp-c-indigo-2: #5c73e7;
    --vp-c-indigo-3: #3e63dd;
    --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);

    --vp-c-purple-1: #c8abfa;
    --vp-c-purple-2: #a879e6;
    --vp-c-purple-3: #8e5cd9;
    --vp-c-purple-soft: rgba(159, 122, 234, 0.16);

    --vp-c-green-1: #3dd68c;
    --vp-c-green-2: #30a46c;
    --vp-c-green-3: #298459;
    --vp-c-green-soft: rgba(16, 185, 129, 0.16);

    --vp-c-yellow-1: #f9b44e;
    --vp-c-yellow-2: #da8b17;
    --vp-c-yellow-3: #a46a0a;
    --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);

    --vp-c-red-1: #f66f81;
    --vp-c-red-2: #f14158;
    --vp-c-red-3: #b62a3c;
    --vp-c-red-soft: rgba(244, 63, 94, 0.16);
  }

  /**
   * Colors: Background
   *
   * - `bg`: The bg color used for main screen.
   *
   * - `bg-alt`: The alternative bg color used in places such as "sidebar",
   *   or "code block".
   *
   * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
   *   such as "dialog".
   *
   * - `bg-soft`: The bg color to slightly distinguish some components from
   *   the page. Used for things like "carbon ads" or "table".
   * -------------------------------------------------------------------------- */

  :root {
    --vp-c-bg: #ffffff;
    --vp-c-bg-alt: #f6f6f7;
    --vp-c-bg-elv: #ffffff;
    --vp-c-bg-soft: #f6f6f7;
  }

  .dark {
    --vp-c-bg: #1b1b1f;
    --vp-c-bg-alt: #161618;
    --vp-c-bg-elv: #202127;
    --vp-c-bg-soft: #202127;
  }

  /**
   * Colors: Borders
   *
   * - `divider`: This is used for separators. This is used to divide sections
   *   within the same components, such as having separator on "h2" heading.
   *
   * - `border`: This is designed for borders on interactive components.
   *   For example this should be used for a button outline.
   *
   * - `gutter`: This is used to divide components in the page. For example
   *   the header and the lest of the page.
   * -------------------------------------------------------------------------- */

  :root {
    --vp-c-border: #c2c2c4;
    --vp-c-divider: #e2e2e3;
    --vp-c-gutter: #e2e2e3;
  }

  .dark {
    --vp-c-border: #3c3f44;
    --vp-c-divider: #2e2e32;
    --vp-c-gutter: #000000;
  }

  /**
   * Colors: Text
   *
   * - `text-1`: Used for primary text.
   *
   * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
   *
   * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
   * -------------------------------------------------------------------------- */

  :root {
    --vp-c-text-1: rgba(60, 60, 67);
    --vp-c-text-2: rgba(60, 60, 67, 0.78);
    --vp-c-text-3: rgba(60, 60, 67, 0.56);
  }

  .dark {
    --vp-c-text-1: rgba(255, 255, 245, 0.86);
    --vp-c-text-2: rgba(235, 235, 245, 0.6);
    --vp-c-text-3: rgba(235, 235, 245, 0.38);
  }

  /**
   * Colors: Function
   *
   * - `default`: The color used purely for subtle indication without any
   *   special meanings attached to it such as bg color for menu hover state.
   *
   * - `brand`: Used for primary brand colors, such as link text, button with
   *   brand theme, etc.
   *
   * - `tip`: Used to indicate useful information. The default theme uses the
   *   brand color for this by default.
   *
   * - `warning`: Used to indicate warning to the users. Used in custom
   *   container, badges, etc.
   *
   * - `danger`: Used to show error, or dangerous message to the users. Used
   *   in custom container, badges, etc.
   *
   * To understand the scaling system, refer to "Colors: Palette" section.
   * -------------------------------------------------------------------------- */

  :root {
    --vp-c-default-1: var(--vp-c-gray-1);
    --vp-c-default-2: var(--vp-c-gray-2);
    --vp-c-default-3: var(--vp-c-gray-3);
    --vp-c-default-soft: var(--vp-c-gray-soft);

    --vp-c-brand-1: var(--vp-c-indigo-1);
    --vp-c-brand-2: var(--vp-c-indigo-2);
    --vp-c-brand-3: var(--vp-c-indigo-3);
    --vp-c-brand-soft: var(--vp-c-indigo-soft);

    /* DEPRECATED: Use `--vp-c-brand-1` instead. */
    --vp-c-brand: var(--vp-c-brand-1);

    --vp-c-tip-1: var(--vp-c-brand-1);
    --vp-c-tip-2: var(--vp-c-brand-2);
    --vp-c-tip-3: var(--vp-c-brand-3);
    --vp-c-tip-soft: var(--vp-c-brand-soft);

    --vp-c-note-1: var(--vp-c-brand-1);
    --vp-c-note-2: var(--vp-c-brand-2);
    --vp-c-note-3: var(--vp-c-brand-3);
    --vp-c-note-soft: var(--vp-c-brand-soft);

    --vp-c-success-1: var(--vp-c-green-1);
    --vp-c-success-2: var(--vp-c-green-2);
    --vp-c-success-3: var(--vp-c-green-3);
    --vp-c-success-soft: var(--vp-c-green-soft);

    --vp-c-important-1: var(--vp-c-purple-1);
    --vp-c-important-2: var(--vp-c-purple-2);
    --vp-c-important-3: var(--vp-c-purple-3);
    --vp-c-important-soft: var(--vp-c-purple-soft);

    --vp-c-warning-1: var(--vp-c-yellow-1);
    --vp-c-warning-2: var(--vp-c-yellow-2);
    --vp-c-warning-3: var(--vp-c-yellow-3);
    --vp-c-warning-soft: var(--vp-c-yellow-soft);

    --vp-c-danger-1: var(--vp-c-red-1);
    --vp-c-danger-2: var(--vp-c-red-2);
    --vp-c-danger-3: var(--vp-c-red-3);
    --vp-c-danger-soft: var(--vp-c-red-soft);

    --vp-c-caution-1: var(--vp-c-red-1);
    --vp-c-caution-2: var(--vp-c-red-2);
    --vp-c-caution-3: var(--vp-c-red-3);
    --vp-c-caution-soft: var(--vp-c-red-soft);
  }

  /**
   * Typography
   * -------------------------------------------------------------------------- */

  :root {
    --vp-font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --vp-font-family-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
    'Liberation Mono', 'Courier New', monospace;
    font-optical-sizing: auto;
  }

  :root:where(:lang(zh)) {
    --vp-font-family-base: 'Punctuation SC', 'Inter', ui-sans-serif, system-ui,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  }

  /**
   * Shadows
   * -------------------------------------------------------------------------- */

  :root {
    --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
    --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
    --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
    --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
  }

  /**
   * Z-indexes
   * -------------------------------------------------------------------------- */

  :root {
    --vp-z-index-footer: 10;
    --vp-z-index-local-nav: 20;
    --vp-z-index-nav: 30;
    --vp-z-index-layout-top: 40;
    --vp-z-index-backdrop: 50;
    --vp-z-index-sidebar: 60;
  }

  @media (min-width: 960px) {
    :root {
      --vp-z-index-sidebar: 25;
    }
  }

  /**
   * Layouts
   * -------------------------------------------------------------------------- */

  :root {
    --vp-layout-max-width: 1440px;
  }

  /**
   * Component: Header Anchor
   * -------------------------------------------------------------------------- */

  :root {
    --vp-header-anchor-symbol: '#';
  }

  /**
   * Component: Code
   * -------------------------------------------------------------------------- */

  :root {
    --vp-code-line-height: 1.7;
    --vp-code-font-size: 0.875em;
    --vp-code-color: var(--vp-c-brand-1);
    --vp-code-link-color: var(--vp-c-brand-1);
    --vp-code-link-hover-color: var(--vp-c-brand-2);
    --vp-code-bg: var(--vp-c-default-soft);

    --vp-code-block-color: var(--vp-c-text-2);
    --vp-code-block-bg: var(--vp-c-bg-alt);
    --vp-code-block-divider-color: var(--vp-c-gutter);

    --vp-code-lang-color: var(--vp-c-text-3);

    --vp-code-line-highlight-color: var(--vp-c-default-soft);
    --vp-code-line-number-color: var(--vp-c-text-3);

    --vp-code-line-diff-add-color: var(--vp-c-success-soft);
    --vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);

    --vp-code-line-diff-remove-color: var(--vp-c-danger-soft);
    --vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);

    --vp-code-line-warning-color: var(--vp-c-warning-soft);
    --vp-code-line-error-color: var(--vp-c-danger-soft);

    --vp-code-copy-code-border-color: var(--vp-c-divider);
    --vp-code-copy-code-bg: var(--vp-c-bg-soft);
    --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
    --vp-code-copy-code-hover-bg: var(--vp-c-bg);
    --vp-code-copy-code-active-text: var(--vp-c-text-2);
    --vp-code-copy-copied-text-content: 'Copied';

    --vp-code-tab-divider: var(--vp-code-block-divider-color);
    --vp-code-tab-text-color: var(--vp-c-text-2);
    --vp-code-tab-bg: var(--vp-code-block-bg);
    --vp-code-tab-hover-text-color: var(--vp-c-text-1);
    --vp-code-tab-active-text-color: var(--vp-c-text-1);
    --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
  }

  /**
   * Component: Button
   * -------------------------------------------------------------------------- */

  :root {
    --vp-button-brand-border: transparent;
    --vp-button-brand-text: var(--vp-c-white);
    --vp-button-brand-bg: var(--vp-c-brand-3);
    --vp-button-brand-hover-border: transparent;
    --vp-button-brand-hover-text: var(--vp-c-white);
    --vp-button-brand-hover-bg: var(--vp-c-brand-2);
    --vp-button-brand-active-border: transparent;
    --vp-button-brand-active-text: var(--vp-c-white);
    --vp-button-brand-active-bg: var(--vp-c-brand-1);

    --vp-button-alt-border: transparent;
    --vp-button-alt-text: var(--vp-c-text-1);
    --vp-button-alt-bg: var(--vp-c-default-3);
    --vp-button-alt-hover-border: transparent;
    --vp-button-alt-hover-text: var(--vp-c-text-1);
    --vp-button-alt-hover-bg: var(--vp-c-default-2);
    --vp-button-alt-active-border: transparent;
    --vp-button-alt-active-text: var(--vp-c-text-1);
    --vp-button-alt-active-bg: var(--vp-c-default-1);

    --vp-button-sponsor-border: var(--vp-c-text-2);
    --vp-button-sponsor-text: var(--vp-c-text-2);
    --vp-button-sponsor-bg: transparent;
    --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
    --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
    --vp-button-sponsor-hover-bg: transparent;
    --vp-button-sponsor-active-border: var(--vp-c-sponsor);
    --vp-button-sponsor-active-text: var(--vp-c-sponsor);
    --vp-button-sponsor-active-bg: transparent;
  }

  /**
   * Component: Custom Block
   * -------------------------------------------------------------------------- */

  :root {
    --vp-custom-block-font-size: 14px;
    --vp-custom-block-code-font-size: 13px;

    --vp-custom-block-info-border: transparent;
    --vp-custom-block-info-text: var(--vp-c-text-1);
    --vp-custom-block-info-bg: var(--vp-c-default-soft);
    --vp-custom-block-info-code-bg: var(--vp-c-default-soft);

    --vp-custom-block-note-border: transparent;
    --vp-custom-block-note-text: var(--vp-c-text-1);
    --vp-custom-block-note-bg: var(--vp-c-default-soft);
    --vp-custom-block-note-code-bg: var(--vp-c-default-soft);

    --vp-custom-block-tip-border: transparent;
    --vp-custom-block-tip-text: var(--vp-c-text-1);
    --vp-custom-block-tip-bg: var(--vp-c-tip-soft);
    --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);

    --vp-custom-block-important-border: transparent;
    --vp-custom-block-important-text: var(--vp-c-text-1);
    --vp-custom-block-important-bg: var(--vp-c-important-soft);
    --vp-custom-block-important-code-bg: var(--vp-c-important-soft);

    --vp-custom-block-warning-border: transparent;
    --vp-custom-block-warning-text: var(--vp-c-text-1);
    --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
    --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);

    --vp-custom-block-danger-border: transparent;
    --vp-custom-block-danger-text: var(--vp-c-text-1);
    --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
    --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);

    --vp-custom-block-caution-border: transparent;
    --vp-custom-block-caution-text: var(--vp-c-text-1);
    --vp-custom-block-caution-bg: var(--vp-c-caution-soft);
    --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);

    --vp-custom-block-details-border: var(--vp-custom-block-info-border);
    --vp-custom-block-details-text: var(--vp-custom-block-info-text);
    --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
    --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
  }

  /**
   * Component: Input
   * -------------------------------------------------------------------------- */

  :root {
    --vp-input-border-color: var(--vp-c-border);
    --vp-input-bg-color: var(--vp-c-bg-alt);

    --vp-input-switch-bg-color: var(--vp-c-default-soft);
  }

  /**
   * Component: Nav
   * -------------------------------------------------------------------------- */

  :root {
    --vp-nav-height: 64px;
    --vp-nav-bg-color: var(--vp-c-bg);
    --vp-nav-screen-bg-color: var(--vp-c-bg);
    --vp-nav-logo-height: 24px;
  }

  .hide-nav {
    --vp-nav-height: 0px;
  }

  .hide-nav .VPSidebar {
    --vp-nav-height: 22px;
  }

  /**
   * Component: Local Nav
   * -------------------------------------------------------------------------- */

  :root {
    --vp-local-nav-bg-color: var(--vp-c-bg);
  }

  /**
   * Component: Sidebar
   * -------------------------------------------------------------------------- */

  :root {
    --vp-sidebar-width: 272px;
    --vp-sidebar-bg-color: var(--vp-c-bg-alt);
  }

  /**
   * Colors Backdrop
   * -------------------------------------------------------------------------- */

  :root {
    --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
  }

  /**
   * Component: Home
   * -------------------------------------------------------------------------- */

  :root {
    --vp-home-hero-name-color: var(--vp-c-brand-1);
    --vp-home-hero-name-background: transparent;

    --vp-home-hero-image-background-image: none;
    --vp-home-hero-image-filter: none;
  }

  /**
   * Component: Badge
   * -------------------------------------------------------------------------- */

  :root {
    --vp-badge-info-border: transparent;
    --vp-badge-info-text: var(--vp-c-text-2);
    --vp-badge-info-bg: var(--vp-c-default-soft);

    --vp-badge-tip-border: transparent;
    --vp-badge-tip-text: var(--vp-c-tip-1);
    --vp-badge-tip-bg: var(--vp-c-tip-soft);

    --vp-badge-warning-border: transparent;
    --vp-badge-warning-text: var(--vp-c-warning-1);
    --vp-badge-warning-bg: var(--vp-c-warning-soft);

    --vp-badge-danger-border: transparent;
    --vp-badge-danger-text: var(--vp-c-danger-1);
    --vp-badge-danger-bg: var(--vp-c-danger-soft);
  }

  /**
   * Component: Carbon Ads
   * -------------------------------------------------------------------------- */

  :root {
    --vp-carbon-ads-text-color: var(--vp-c-text-1);
    --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
    --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
    --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
    --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
  }

  /**
    * Component: Local Search
    * -------------------------------------------------------------------------- */

  :root {
    --vp-local-search-bg: var(--vp-c-bg);
    --vp-local-search-result-bg: var(--vp-c-bg);
    --vp-local-search-result-border: var(--vp-c-divider);
    --vp-local-search-result-selected-bg: var(--vp-c-bg);
    --vp-local-search-result-selected-border: var(--vp-c-brand-1);
    --vp-local-search-highlight-bg: var(--vp-c-brand-1);
    --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
  }
  /* endregion */

  /* region base */
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  html {
    line-height: 1.4;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }

  html.dark {
    color-scheme: dark;
  }

  body {
    margin: 0;
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    line-height: 24px;
    font-family: var(--vp-font-family-base);
    font-size: 16px;
    font-weight: 400;
    color: var(--vp-c-text-1);
    background-color: var(--vp-c-bg);
    font-synthesis: style;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .Layout main {
    display: block;
  }

  .Layout h1,
  .Layout h2,
  .Layout h3,
  .Layout h4,
  .Layout h5,
  .Layout h6 {
    margin: 0;
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;
  }

  .Layout p {
    margin: 0;
  }

  .Layout strong,
  .Layout b {
    font-weight: 600;
  }

  /**
   * Avoid 300ms click delay on touch devices that support the `touch-action`
   * CSS property.
   *
   * In particular, unlike most other browsers, IE11+Edge on Windows 10 on
   * touch devices and IE Mobile 10-11 DON'T remove the click delay when
   * `<meta name="viewport" content="width=device-width">` is present.
   * However, they DO support removing the click delay via
   * `touch-action: manipulation`.
   *
   * See:
   * - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
   * - http://caniuse.com/#feat=css-touch-action
   * - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
   */
  .Layout a,
  .Layout area,
  .Layout button,
  .Layout [role='button'],
  .Layout input,
  .Layout label,
  .Layout select,
  .Layout summary,
  .Layout textarea {
    touch-action: manipulation;
  }

  .Layout a {
    color: inherit;
    text-decoration: inherit;
  }

  .Layout ol,
  .Layout ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .Layout blockquote {
    margin: 0;
  }

  .Layout pre,
  .Layout code,
  .Layout kbd,
  .Layout samp {
    font-family: var(--vp-font-family-mono);
  }

  .Layout img,
  .Layout svg,
  .Layout video,
  .Layout canvas,
  .Layout audio,
  .Layout iframe,
  .Layout embed,
  .Layout object {
    display: block;
  }

  .Layout figure {
    margin: 0;
  }

  .Layout img,
  .Layout video {
    max-width: 100%;
    height: auto;
  }

  .Layout button,
  .Layout input,
  .Layout optgroup,
  .Layout select,
  .Layout textarea {
    border: 0;
    padding: 0;
    line-height: inherit;
    color: inherit;
  }

  .Layout button {
    padding: 0;
    font-family: inherit;
    background-color: transparent;
    background-image: none;
  }

  .Layout button:enabled,
  .Layout [role='button']:enabled {
    cursor: pointer;
  }

  .Layout button:focus,
  .Layout button:focus-visible {
    outline: 1px dotted;
    outline: 4px auto -webkit-focus-ring-color;
  }

  .Layout button:focus:not(:focus-visible) {
    outline: none !important;
  }

  .Layout input:focus,
  .Layout textarea:focus,
  .Layout select:focus {
    outline: none;
  }

  .Layout table:not(div[data-example] table) {
    border-collapse: collapse;
  }

  .Layout input {
    background-color: transparent;
  }

  .Layout input:-ms-input-placeholder,
  .Layout textarea:-ms-input-placeholder {
    color: var(--vp-c-text-3);
  }

  .Layout input::-ms-input-placeholder,
  .Layout textarea::-ms-input-placeholder {
    color: var(--vp-c-text-3);
  }

  .Layout input::placeholder,
  .Layout textarea::placeholder {
    color: var(--vp-c-text-3);
  }

  .Layout input::-webkit-outer-spin-button,
  .Layout input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .Layout input[type='number'] {
    -moz-appearance: textfield;
  }

  .Layout textarea {
    resize: vertical;
  }

  .Layout select {
    -webkit-appearance: none;
  }

  .Layout fieldset {
    margin: 0;
    padding: 0;
  }

  .Layout h1:not(div[data-example] h1),
  .Layout h2:not(div[data-example] h2),
  .Layout h3:not(div[data-example] h3),
  .Layout h4:not(div[data-example] h4),
  .Layout h5:not(div[data-example] h5),
  .Layout h6:not(div[data-example] h6),
  .Layout li:not(div[data-example] li),
  .Layout p:not(div[data-example] p) {
    overflow-wrap: break-word;
  }

  vite-error-overlay {
    z-index: 9999;
  }

  mjx-container {
    overflow-x: auto;
  }

  mjx-container > svg {
    display: inline-block;
    margin: auto;
  }
  /* endregion */
}

@layer utilities {
  /* region icons */
  [class^='vpi-'],
  [class*=' vpi-'],
  .vp-icon {
    width: 1em;
    height: 1em;
  }
  [class^='vpi-'].bg,
  [class*=' vpi-'].bg,
  .vp-icon.bg {
    background-size: 100% 100%;
    background-color: transparent;
  }
  [class^='vpi-']:not(.bg),
  [class*=' vpi-']:not(.bg),
  .vp-icon:not(.bg) {
    -webkit-mask: var(--icon) no-repeat;
    mask: var(--icon) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-color: currentColor;
    color: inherit;
  }

  /* internal icons - used under ISC from https://lucide.dev/ */
  .vpi-align-left {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E");
  }
  .vpi-arrow-right,
  .vpi-arrow-down,
  .vpi-arrow-left,
  .vpi-arrow-up {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  }
  .vpi-chevron-right,
  .vpi-chevron-down,
  .vpi-chevron-left,
  .vpi-chevron-up {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  }
  .vpi-chevron-down,
  .vpi-arrow-down {
    transform: rotate(90deg);
  }
  .vpi-chevron-left,
  .vpi-arrow-left {
    transform: rotate(180deg);
  }
  .vpi-chevron-up,
  .vpi-arrow-up {
    transform: rotate(-90deg);
  }
  .vpi-square-pen {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E");
  }
  .vpi-plus {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
  }
  .vpi-sun {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
  }
  .vpi-moon {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
  }
  .vpi-more-horizontal {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
  }
  .vpi-languages {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E");
  }
  .vpi-heart {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  }
  .vpi-search {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  }
  .vpi-layout-list {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7M14 9h7M14 15h7M14 20h7'/%3E%3C/svg%3E");
  }
  .vpi-delete {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2ZM18 9l-6 6M12 9l6 6'/%3E%3C/svg%3E");
  }
  .vpi-corner-down-left {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 10-5 5 5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E");
  }
  :root {
    /* clipboard */
    --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
    /* clipboard-copy */
    --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
  }
  /* endregion */

  /* region utils */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
  }
  /* endregion */
}
