ui-essentials/projects/ui-code-display/src/lib/components/code-snippet/code-snippet.component.scss

@use 'ui-design-system/src/styles/semantic/index' as *;

// Code snippet component styles with design token integration
.code-snippet {
  position: relative;
  width: 100%;
  border-radius: $semantic-border-card-radius;
  border: $semantic-border-card-width $semantic-border-card-style var(--code-border, #{$semantic-color-border-secondary});
  background: var(--code-bg, #{$semantic-color-surface-primary});
  overflow: hidden;
  font-family: 'Roboto Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  
  // Size variants
  &--sm {
    font-size: $base-typography-font-size-xs;
    
    .code-snippet__header {
      padding: $semantic-spacing-component-padding-xs $semantic-spacing-component-padding-sm;
      gap: $semantic-spacing-component-xs;
    }
    
    .code-snippet__content {
      padding: $semantic-spacing-component-padding-xs $semantic-spacing-component-padding-sm;
    }
  }
  
  &--md {
    font-size: $base-typography-font-size-sm;
    
    .code-snippet__header {
      padding: $semantic-spacing-component-padding-sm $semantic-spacing-component-padding-md;
      gap: $semantic-spacing-component-sm;
    }
    
    .code-snippet__content {
      padding: $semantic-spacing-component-padding-sm $semantic-spacing-component-padding-md;
    }
  }
  
  &--lg {
    font-size: $base-typography-font-size-md;
    
    .code-snippet__header {
      padding: $semantic-spacing-component-padding-md $semantic-spacing-component-padding-lg;
      gap: $semantic-spacing-component-md;
    }
    
    .code-snippet__content {
      padding: $semantic-spacing-component-padding-md $semantic-spacing-component-padding-lg;
    }
  }
  
  // Wrapping variant
  &--wrap {
    .code-snippet__code {
      white-space: pre-wrap;
      word-break: break-word;
    }
  }
  
  // Constrained height variant
  &--constrained {
    .code-snippet__content {
      max-height: var(--max-height);
      overflow: hidden;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: $semantic-spacing-component-xl;
        background: linear-gradient(to bottom, transparent, var(--code-bg, #{$semantic-color-surface-primary}));
        pointer-events: none;
      }
    }
  }
}

// Header section
.code-snippet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--code-surface, #{$semantic-color-surface-secondary});
  border-bottom: $semantic-border-divider-width $semantic-border-divider-style var(--code-border, #{$semantic-color-border-secondary});
  color: var(--code-text, #{$semantic-color-text-primary});
}

.code-snippet__title {
  font-weight: $base-typography-font-weight-medium;
  color: var(--code-text, #{$semantic-color-text-primary});
}

.code-snippet__actions {
  display: flex;
  align-items: center;
  gap: $semantic-spacing-component-sm;
}

.code-snippet__language-badge {
  padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
  background: var(--code-keyword, #{$semantic-color-interactive-primary});
  color: white;
  border-radius: $semantic-border-input-radius;
  font-size: $base-typography-font-size-xs;
  font-weight: $base-typography-font-weight-medium;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.code-snippet__copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--code-text, #{$semantic-color-text-secondary});
  border-radius: $semantic-border-button-radius;
  cursor: pointer;
  transition: all $semantic-duration-fast $semantic-easing-standard;
  
  &:hover {
    background: var(--code-surface, #{$semantic-color-surface-elevated});
    color: var(--code-text, #{$semantic-color-text-primary});
  }
  
  &:active {
    transform: scale(0.95);
  }
  
  &:focus-visible {
    outline: $semantic-border-focus-width solid var(--code-keyword, #{$semantic-color-focus});
    outline-offset: 2px;
  }
}

// Content area
.code-snippet__content {
  position: relative;
  overflow-x: auto;
  background: var(--code-bg, #{$semantic-color-surface-primary});
}

.code-snippet__pre {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  display: flex;
  
  &--with-line-numbers {
    .code-snippet__code {
      padding-left: $semantic-spacing-component-md;
    }
  }
}

// Line numbers
.code-snippet__line-numbers {
  display: flex;
  flex-direction: column;
  padding-right: $semantic-spacing-component-md;
  border-right: $semantic-border-separator-width $semantic-border-separator-style var(--code-border, #{$semantic-color-border-subtle});
  user-select: none;
  min-width: 3ch;
  text-align: right;
}

.code-snippet__line-number {
  color: var(--code-line-number, #{$semantic-color-text-tertiary});
  font-size: inherit;
  line-height: inherit;
  padding: 0 $semantic-spacing-component-xs;
  
  &--highlighted {
    background: var(--code-line-highlight, #{$semantic-color-container-primary});
    color: var(--code-text, #{$semantic-color-text-primary});
  }
}

// Code content
.code-snippet__code {
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--code-text, #{$semantic-color-text-primary});
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
  overflow: visible;
  flex: 1;
  
  // Syntax highlighting styles
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: var(--code-comment, #{$semantic-color-text-tertiary});
    font-style: italic;
  }
  
  .token.keyword,
  .token.control,
  .token.directive,
  .token.unit {
    color: var(--code-keyword, #{$semantic-color-brand-primary});
    font-weight: $base-typography-font-weight-medium;
  }
  
  .token.string,
  .token.attr-value {
    color: var(--code-string, #{$semantic-color-success});
  }
  
  .token.number {
    color: var(--code-number, #{$semantic-color-warning});
  }
  
  .token.function,
  .token.class-name {
    color: var(--code-function, #{$semantic-color-interactive-primary});
  }
  
  .token.operator,
  .token.entity,
  .token.url {
    color: var(--code-operator, #{$semantic-color-text-primary});
  }
  
  .token.punctuation {
    color: var(--code-punctuation, #{$semantic-color-text-secondary});
  }
  
  .token.variable {
    color: var(--code-variable, #{$semantic-color-text-primary});
  }
  
  .token.boolean,
  .token.constant {
    color: var(--code-keyword, #{$semantic-color-brand-primary});
  }
  
  .token.property,
  .token.attr-name {
    color: var(--code-function, #{$semantic-color-interactive-primary});
  }
  
  .token.selector,
  .token.tag {
    color: var(--code-keyword, #{$semantic-color-brand-primary});
  }
}

// Expand section
.code-snippet__expand {
  display: flex;
  justify-content: center;
  padding: $semantic-spacing-component-sm;
  background: var(--code-surface, #{$semantic-color-surface-secondary});
  border-top: $semantic-border-separator-width $semantic-border-separator-style var(--code-border, #{$semantic-color-border-secondary});
}

.code-snippet__expand-btn {
  padding: $semantic-spacing-component-xs $semantic-spacing-component-md;
  border: $semantic-border-button-width $semantic-border-button-style var(--code-border, #{$semantic-color-border-primary});
  border-radius: $semantic-border-button-radius;
  background: var(--code-bg, #{$semantic-color-surface-primary});
  color: var(--code-text, #{$semantic-color-text-primary});
  font-size: $base-typography-font-size-sm;
  cursor: pointer;
  transition: all $semantic-duration-fast $semantic-easing-standard;
  
  &:hover {
    background: var(--code-surface, #{$semantic-color-surface-elevated});
  }
  
  &:focus-visible {
    outline: $semantic-border-focus-width solid var(--code-keyword, #{$semantic-color-focus});
    outline-offset: 2px;
  }
}

// Theme-specific overrides
.code-theme-github-light {
  --code-bg: #{$semantic-color-surface-primary};
  --code-surface: #{$semantic-color-surface-secondary};
  --code-text: #{$semantic-color-text-primary};
  --code-comment: #{$semantic-color-text-tertiary};
  --code-keyword: #{$semantic-color-brand-primary};
  --code-string: #{$semantic-color-success};
  --code-number: #{$semantic-color-warning};
  --code-function: #{$semantic-color-interactive-primary};
  --code-operator: #{$semantic-color-text-primary};
  --code-punctuation: #{$semantic-color-text-secondary};
  --code-variable: #{$semantic-color-text-primary};
  --code-line-number: #{$semantic-color-text-tertiary};
  --code-line-highlight: #{$semantic-color-container-primary};
  --code-border: #{$semantic-color-border-secondary};
}

.code-theme-github-dark {
  --code-bg: #0d1117;
  --code-surface: #161b22;
  --code-text: #f0f6fc;
  --code-comment: #8b949e;
  --code-keyword: #ff7b72;
  --code-string: #a5d6ff;
  --code-number: #79c0ff;
  --code-function: #d2a8ff;
  --code-operator: #f0f6fc;
  --code-punctuation: #c9d1d9;
  --code-variable: #f0f6fc;
  --code-line-number: #8b949e;
  --code-line-highlight: rgba(255, 211, 61, 0.08);
  --code-border: #30363d;
}

.code-theme-one-dark {
  --code-bg: #282c34;
  --code-surface: #3e4451;
  --code-text: #abb2bf;
  --code-comment: #5c6370;
  --code-keyword: #c678dd;
  --code-string: #98c379;
  --code-number: #d19a66;
  --code-function: #61afef;
  --code-operator: #abb2bf;
  --code-punctuation: #abb2bf;
  --code-variable: #e06c75;
  --code-line-number: #5c6370;
  --code-line-highlight: #3e4451;
  --code-border: #3e4451;
}

.code-theme-material {
  --code-bg: #263238;
  --code-surface: #37474f;
  --code-text: #eeffff;
  --code-comment: #546e7a;
  --code-keyword: #c792ea;
  --code-string: #c3e88d;
  --code-number: #f78c6c;
  --code-function: #82aaff;
  --code-operator: #89ddff;
  --code-punctuation: #89ddff;
  --code-variable: #eeffff;
  --code-line-number: #546e7a;
  --code-line-highlight: #37474f;
  --code-border: #37474f;
}

.code-theme-dracula {
  --code-bg: #282a36;
  --code-surface: #44475a;
  --code-text: #f8f8f2;
  --code-comment: #6272a4;
  --code-keyword: #ff79c6;
  --code-string: #f1fa8c;
  --code-number: #bd93f9;
  --code-function: #8be9fd;
  --code-operator: #ff79c6;
  --code-punctuation: #f8f8f2;
  --code-variable: #f8f8f2;
  --code-line-number: #6272a4;
  --code-line-highlight: #44475a;
  --code-border: #44475a;
}