@use './detail';

:host {
  display: block;
}

.technology-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}

// The same light tile the radar uses, for the same reason: a brand's mark is
// not ours to recolour, and a black one would disappear in dark mode.
.technology-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.125rem;
  background: #fff;
  box-shadow:
    0 0 0 1px
      color-mix(in srgb, var(--brand, var(--pi-color-primary)) 22%, transparent),
    0 8px 20px -10px
      color-mix(in srgb, var(--brand, var(--pi-color-primary)) 55%, transparent);
}

.technology-logo ::ng-deep img {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.technology-logo__initial {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--brand, var(--pi-color-primary));
}

.technology-text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.technology-note {
  margin-top: 0.75rem;
  color: var(--pi-color-grey);
}