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

// Code block component styles with design token integration
.code-block {
  position: relative;
  width: 100%;
  font-family: 'Roboto Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  font-size: $base-typography-font-size-sm;
  background: var(--code-bg, #{$semantic-color-surface-primary});
  
  // Variant styles
  &--default {
    border: $semantic-border-card-width $semantic-border-card-style var(--code-border, #{$semantic-color-border-secondary});
    border-radius: $semantic-border-card-radius;
    overflow: hidden;
  }
  
  &--minimal {
    border: none;
    border-radius: 0;
  }
  
  &--bordered {
    border-left: 4px solid var(--code-keyword, #{$semantic-color-brand-primary});
    padding-left: $semantic-spacing-component-md;
  }
  
  // Wrapping variant
  &--wrap {
    .code-block__code {
      white-space: pre-wrap;
      word-break: break-word;
    }
  }
  
  // Copyable variant
  &--copyable {
    &:hover .code-block__copy-btn {
      opacity: 1;
    }
  }
}

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

.code-block__pre {
  margin: 0;
  padding: $semantic-spacing-component-md;
  background: transparent;
  overflow-x: auto;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  display: flex;
  
  &--with-line-numbers {
    .code-block__code {
      padding-left: $semantic-spacing-component-md;
    }
  }
  
  .code-block--minimal & {
    padding: 0;
  }
  
  .code-block--bordered & {
    padding-left: 0;
  }
}

// Line numbers
.code-block__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;
  flex-shrink: 0;
}

.code-block__line-number {
  color: var(--code-line-number, #{$semantic-color-text-tertiary});
  font-size: inherit;
  line-height: 1.5;
  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-block__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: 1.5;
  white-space: pre;
  overflow: visible;
  flex: 1;
  min-width: 0;
  
  // 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});
  }
  
  .token.important {
    font-weight: $base-typography-font-weight-bold;
  }
  
  .token.bold {
    font-weight: $base-typography-font-weight-bold;
  }
  
  .token.italic {
    font-style: italic;
  }
}

// Responsive adjustments
@media (max-width: 768px) {
  .code-block__pre {
    padding: $semantic-spacing-component-sm;
  }
  
  .code-block__copy-btn {
    top: $semantic-spacing-component-xs;
    right: $semantic-spacing-component-xs;
  }
}