// =============================================================================
// DocsPanel — shared documentation panel styles (blocks, actions, templates)
// =============================================================================

@use '../variables' as *;
@use '../mixins' as *;

.docs-panel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.docs-panel__count-badge {
  font-size: $font-size-xs;
  font-weight: $font-weight-normal;
  color: $neutral-400;
}

// Code blocks
.docs-panel__code-block {
  position: relative;
  border-radius: $radius;
  overflow: hidden;
}

.docs-panel__code-pre {
  background-color: $neutral-900;
  color: $neutral-100;
  padding: 0.75rem;
  font-size: 11px;
  line-height: 1.625;
  overflow-x: auto;
  margin: 0;
}

.docs-panel__code-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem;
  border-radius: $radius;
  background-color: $neutral-700;
  color: $neutral-300;
  opacity: 0;
  @include transition-fast(opacity, background-color);
  border: none;
  cursor: pointer;

  &:hover {
    background-color: $neutral-600;
  }

  .docs-panel__code-block:hover & {
    opacity: 1;
  }
}

// Tables
.docs-panel__table {
  width: 100%;
  font-size: 11px;
}

.docs-panel__table-header-row {
  text-align: left;
  color: $neutral-500;

  .dark & {
    color: $neutral-400;
  }
}

.docs-panel__table-th {
  padding-bottom: 0.375rem;
  padding-right: 0.5rem;
  font-weight: $font-weight-medium;
}

.docs-panel__table-tbody {
  & > tr + tr {
    border-top: 1px solid $neutral-100;

    .dark & {
      border-top-color: rgba($neutral-700, 0.5);
    }
  }
}

.docs-panel__table-td {
  padding: 0.25rem 0.5rem 0.25rem 0;

  &:last-child {
    padding-right: 0;
  }
}

.docs-panel__table-td--nowrap {
  white-space: nowrap;
}

.docs-panel__table-td--muted {
  color: $neutral-500;

  .dark & {
    color: $neutral-400;
  }
}

// Inline code
.docs-panel__inline-code {
  padding: 0.125rem 0.25rem;
  background-color: $neutral-100;
  border-radius: $radius;

  .dark & {
    background-color: $neutral-700;
  }
}

.docs-panel__inline-code--danger {
  background-color: $error-50;
  color: $error-600;

  .dark & {
    background-color: rgba($error-900, 0.2);
    color: $error-400;
  }
}

// Source badge
.docs-panel__source-badge {
  font-size: 10px;
  padding: 0.125rem 0.375rem;
  border-radius: $radius;
  background-color: #dbeafe;
  color: #2563eb;

  .dark & {
    background-color: rgba(#1e3a8a, 0.2);
    color: #60a5fa;
  }
}

// Sub-section labels
.docs-panel__sub-label {
  font-weight: $font-weight-medium;
  color: $neutral-700;

  .dark & {
    color: $neutral-200;
  }
}

// Lists
.docs-panel__list {
  list-style: disc inside;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.docs-panel__ordered-list {
  list-style: decimal inside;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.docs-panel__italic {
  font-style: italic;
}

// Component description
.docs-panel__comp-desc {
  font-size: 11px;
  color: $neutral-500;

  .dark & {
    color: $neutral-400;
  }
}
