.cui-barcode {
  display: flex;
  flex-direction: column;
  gap: calc(var(--toolbar-padding, 10px) * 2);

  // regular barcode
  .cui-barcode-ratio { 
    line-height: 1;

    // default responsive image (NG)
    img {
      max-width: 100%;
      height: auto;
    }

    .cui-label {
      background: var(--gray-200, hsl(210,5%,96%));
      padding: var(--toolbar-padding, 10px);
      min-height: 100px;

      .cui-label-content {
        max-width: 75%;
      }
    }
  }

  // is QR code = make it square
  &.cui-barcode--square {
    .cui-barcode-ratio {
      height: auto;
      max-width: 200px;
      max-height: 200px;
      aspect-ratio: 1 / 1;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

