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

// Inline code component styles with design token integration
.inline-code {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: $semantic-spacing-component-xs;
  background: var(--code-surface, #{$semantic-color-surface-secondary});
  border: $semantic-border-input-width $semantic-border-input-style var(--code-border, #{$semantic-color-border-secondary});
  border-radius: $semantic-border-input-radius;
  font-family: 'Roboto Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  
  // Size variants
  &--xs {
    padding: $semantic-spacing-component-xs;
    font-size: $base-typography-font-size-xs;
  }
  
  &--sm {
    padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
    font-size: $base-typography-font-size-sm;
  }
  
  &--md {
    padding: $semantic-spacing-component-sm;
    font-size: $base-typography-font-size-sm;
  }
  
  &--lg {
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    font-size: $base-typography-font-size-md;
  }
  
  // Copyable variant
  &--copyable {
    padding-right: calc(#{$semantic-spacing-component-sm} + 1.5rem + #{$semantic-spacing-component-xs});
  }
}

.inline-code__code {
  display: inline;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  color: var(--code-text, #{$semantic-color-text-primary});
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
  white-space: nowrap;
  
  // Syntax highlighting styles (simplified for inline use)
  .token.comment {
    color: var(--code-comment, #{$semantic-color-text-tertiary});
    font-style: italic;
  }
  
  .token.keyword {
    color: var(--code-keyword, #{$semantic-color-brand-primary});
    font-weight: $base-typography-font-weight-medium;
  }
  
  .token.string {
    color: var(--code-string, #{$semantic-color-success});
  }
  
  .token.number {
    color: var(--code-number, #{$semantic-color-warning});
  }
  
  .token.function {
    color: var(--code-function, #{$semantic-color-interactive-primary});
  }
  
  .token.operator {
    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});
  }
}

.inline-code__copy-btn {
  position: absolute;
  right: $semantic-spacing-component-xs;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--code-comment, #{$semantic-color-text-tertiary});
  border-radius: calc(#{$semantic-border-button-radius} * 0.5);
  cursor: pointer;
  transition: all $semantic-duration-fast $semantic-easing-standard;
  opacity: 0;
  
  .inline-code:hover & {
    opacity: 1;
  }
  
  &:hover {
    background: var(--code-bg, #{$semantic-color-surface-primary});
    color: var(--code-text, #{$semantic-color-text-primary});
  }
  
  &:active {
    transform: translateY(-50%) scale(0.9);
  }
  
  &:focus-visible {
    opacity: 1;
    outline: 1px solid var(--code-keyword, #{$semantic-color-focus});
    outline-offset: 1px;
  }
  
  svg {
    width: 10px;
    height: 10px;
  }
}

// Theme inheritance from parent
.inline-code {
  // Themes are handled by parent code-theme- classes
  // or can be applied directly to inline-code elements
}