/* Standalone example pages, not in docs */
body.local-examples {
  margin: 0;
  padding: 2rem;
  font-family: sans-serif;
  background: #f9fafb;

  h1 {
    margin: 0 0 2rem;
    font-size: 2rem;
  }
}

.examples {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  * {
    box-sizing: border-box;
  }

  .example {
    padding: 1rem;
    background: #ffffff;
    border-radius: 0.5rem;

    h2 {
      grid-column: 1 / -1;
      margin: 0 0 0.5rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .description {
      grid-column: 1 / -1;
      margin: 0 0 0.75rem;
      font-size: 0.8125rem;
      color: #6b7280;
    }

    details {
      margin: 1rem 0 0 0;

      summary {
        padding: 0.5rem;
        border-radius: 0.25rem;
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 500;
        user-select: none;


        &:hover {
          background: #d1d5db;
        }
      }

      &[open] {
        summary {
          background: #e5e7eb;

        }
      }
    }


    pre {
      margin: 0;
      padding: 1rem;
      border-radius: 0.25rem;
      font-size: 0.75rem;
      overflow-x: auto;
    }

    pre,
    pre code {
      background: #1f2937;
      color: #f9fafb;
      border: 0;
    }

    pre code {
      white-space: pre;
      font-family: 'Courier New', monospace;
    }

    .icon {
      width: 14px;
      height: 14px;
      vertical-align: middle;
      margin-right: 0.5rem;
    }
  }
}