@use 'functions/color' as *;
@use 'functions/get-var' as *;
@use 'mixins/label' as *;
@use 'variables' as *;

// Codes
code {
  @include label-base();
  // @include label-variant($code-color, lighten($code-color, 42.5%)); // old spectre.css
  @include label--variant(color('code-color'), color('code-color', $lightness: +42.5%));
  font-size: 85%;
}

.code {
  // border-radius: $border-radius; // old spectre.css
  border-radius: get-var('border-radius');
  // color: $body-font-color; // old spectre.css
  color: color('body-font-color');
  position: relative;

  &::before {
    // color: $gray-color; // old spectre.css
    color: color('gray-color');
    content: attr(data-lang);
    // font-size: $font-size-sm; // old spectre.css
    font-size: get-var('font-size', $suffix: 'sm');
    position: absolute;
    // right: $layout-spacing; // old spectre.css
    right: get-var('layout-spacing', $unit: 1);
    // top: $unit-h; // old spectre.css
    top: get-var('unit-h');
  }

  code {
    // background: $bg-color; // old spectre.css
    background: color('bg-color');
    color: inherit;
    display: block;
    line-height: 1.5;
    overflow-x: auto;
    padding: 1rem;
    width: 100%;
  }
}