// Circle badge icon with drop shadow for icons and logos

.CircleBadge {

display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-canvas);
border-radius: 50%;
box-shadow: var(--color-shadow-medium);

}

.CircleBadge-icon {

max-width: 60% !important;
height: auto !important;
max-height: 55% !important;

}

// Small badge .CircleBadge–small {

width: 56px;
height: 56px;

}

// Medium badge .CircleBadge–medium {

width: 96px;
height: 96px;

}

// Large badge .CircleBadge–large {

width: 128px;
height: 128px;

}

// Dashed line that connects badges.. // Wrap around 2 or more badges to create a horizonal line:

.DashedConnection {

position: relative;

&::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  content: "";
  // stylelint-disable-next-line primer/borders
  border-bottom: 2px dashed var(--color-border-primary);
}

.CircleBadge {
  position: relative;
}

}