<script>
    import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw"
</script>

<div class="container">
    <div>LinkedIn</div>
    <div class="qrcode corner-border-container p-4">{@html QRCode}</div>
</div>

<style lang="scss">
  .corner-border-container {
    --length: 20px;
    --width: 4px;
    background-color: var(--left-grid-bg-color);
    background-image:
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
    background-size:
      var(--length) var(--width),
      var(--width) var(--length),
      var(--length) var(--width),
      var(--width) var(--length),
      var(--length) var(--width),
      var(--width) var(--length),
      var(--length) var(--width),
      var(--width) var(--length);
    background-position:
      top left,
      top left,
      top right,
      top right,
      bottom right,
      bottom right,
      bottom left,
      bottom left;
    background-repeat: no-repeat;
  }


    .qrcode {
        transform: scale(0.9);
    }

    .container {
        display: grid;
        place-items: center;

        & * {
            font-size: 7.5mm;
        }
    }
</style>
