/* Particle class colors */
.quarksp { 
  --particle-color: var(--quark-color);
  --particle-highlight: var(--quark-color-highlight);
  --particle-contrast: #fff;
}
.leptonsp { 
  --particle-color: var(--lepton-color);
  --particle-highlight: var(--lepton-color-highlight);
  --particle-contrast: #fff;
}
.gaugep { 
  --particle-color: var(--gauge-color);
  --particle-color-dark: var(--gauge-color-dark);
  --particle-highlight: var(--gauge-color-highlight);
  --particle-contrast: var(--gauge-color-highlight);
}
.scalarp { 
  --particle-color: var(--scalar-color);
  --particle-highlight: var(--scalar-color-highlight);
  --particle-contrast: #fff;
}

.generic {
  --particle-color: var(--btn-color);
  --particle-contrast: #fff;
}

.particle-table {
  grid-area: model-start / model-start / info-end / info-end;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1rem;
}

.particle-cont {
  padding: 1rem;
  border: solid 3px var(--particle-color);
  border-radius: calc(var(--border-radius) * 2);
}

.particle-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
}

.section-header {
  margin-bottom: 1rem;
}

#higgs-cell {
  grid-column: 1 / 2;
  max-width: 12rem;
}

.particle-icon {
  width: 5rem;
  margin-inline: auto;
}

.white {
  fill: #fff;
}

.particle-icon-bg {
  fill: #757679;
  mix-blend-mode: multiply;
  opacity: .6;
}

.particle-icon-fg {
  fill: var(--particle-color);
}

.particle-icon-fg-dark {
  fill: var(--particle-color-dark);
}

.particle-cell {
  border-radius: var(--border-radius);
  padding: 1rem;
  background: var(--particle-color);
}

.particle-cell.deselected {
  opacity: 0.3;
}

.bdr-cont:hover {
  transform: scale(1.05);
}

.particle-title {
  min-height: 4rem;
  margin-top: 1rem;
}

.particle-title h3 {
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 1;
  color: var(--particle-contrast, #fff);
  text-transform: uppercase;
}

.properties {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.5rem;
  align-items: center;
}

.property-icon-cont {
  justify-self: center;
  padding-top: 0.25rem;
}

.property-icon {
  fill: var(--particle-highlight);
}

.prop-head .property-icon {
  fill: #fff;
}

#info-mass-icon {
  padding-top: 0.25rem;
}

.particle-property {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  color: var(--particle-highlight);
}

@media screen and (min-width: 30em) { /* 480px in normal conditions */

}

@media screen and (min-width: 42em) { /* 672px in normal conditions */

}

@media screen and (min-width: 62.5em) { /* 1000px in normal conditions */

  .particle-table {
    grid-area: model;
  }

}

@media screen and (min-width: 85em) { /* 1360px in normal conditions */

}