// Color preview styles for inline code
.color-code {
  position: relative;
  @include set-fixit-var(color-code-size, 0.64em);

  .color-preview {
    display: inline-block;
    width: fixit-var(color-code-size);
    height: fixit-var(color-code-size);
    @include border-radius(full);
    margin-right: 0.25em;
    vertical-align: middle;
    border: 1px solid;
    border-color: fixit-var(color-preview-border-color, #d1d9e0b3);
    pointer-events: none;
    transform: translateY(-1px);

    [data-theme=dark] & {
      @include set-fixit-var(color-preview-border-color, #3d444db3);
    }
  }
}
