/* Squadra Brasil — reusable decorative loaders */

.decor-loader {
  position: relative;
  display: block;
  overflow: visible;
  line-height: 0;
  pointer-events: none;
  user-select: none;
}

.decor-loader i {
  display: block;
}

/* Seven overlapping chevrons. The empty half preserves the Figma asset box. */
.decor-loader--chevrons {
  aspect-ratio: 162 / 16;
}

.decor-loader--chevrons .decor-loader__track {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: 50%;
  height: 100%;
}

.decor-loader--chevrons i {
  flex: 0 0 18.52%;
  height: 100%;
  margin-left: -4.94%;
  background: var(--pink);
  clip-path: polygon(0 0, 43% 0, 100% 50%, 43% 100%, 0 100%, 57% 50%);
}

.decor-loader--chevrons i:first-child {
  margin-left: 0;
}

/* Four 210px circles composed inside the original 353 × 207 proportion. */
.decor-loader--rings {
  aspect-ratio: 353 / 207;
}

.decor-loader--rings > i {
  position: absolute;
  top: 0;
  width: 58.64%;
  aspect-ratio: 1;
  border: 1px solid var(--pink);
  border-radius: 50%;
  transform-origin: center;
}

.decor-loader--rings > i:nth-child(1) { left: 0; }
.decor-loader--rings > i:nth-child(2) { left: 13.6%; }
.decor-loader--rings > i:nth-child(3) { left: 27.2%; }
.decor-loader--rings > i:nth-child(4) { left: 41.36%; }

/* Alternating 4 × 4 dot rows reproduce the supplied color-dot artwork. */
.decor-loader--dot-grid {
  aspect-ratio: 1;
}

.decor-loader__dot-row {
  --dot-color: var(--white);
  position: absolute;
  left: 0;
  display: flex;
  gap: 12.68%;
  width: 100%;
  height: 9.86%;
}

.decor-loader__dot-row:nth-child(1) { top: 0; }
.decor-loader__dot-row:nth-child(2) { top: 30.99%; }
.decor-loader__dot-row:nth-child(3) { top: 60.56%; }
.decor-loader__dot-row:nth-child(4) { top: 90.14%; }

.decor-loader__dot-row--offset {
  left: 22.54%;
}

.decor-loader__dot-row i {
  flex: 0 0 9.86%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dot-color);
}

.decor-loader__dot-row--pink { --dot-color: var(--pink); }
.decor-loader__dot-row--yellow { --dot-color: #f5de0b; }
.decor-loader__dot-row--cyan { --dot-color: var(--cyan); }
.decor-loader__dot-row--white { --dot-color: var(--paper); }