/*
 * Namapura Biop dialogue character v1.2.0
 * Default: curious/questioning. Optional expression classes can be added to
 * the .np-dialogue element without changing the shared dialogue structure.
 */

.np-dialogue--biop {
  grid-template-columns: minmax(0, 1fr) 74px;
  padding-left: 4%;
}

.np-dialogue--biop .np-dialogue__speaker {
  background-color: #fff;
  background-image: url('biop-question.png');
  background-position: center;
  background-size: contain;
  grid-column: 2;
  grid-row: 1;
}

/* Existing articles using the former student class also show Biop. */
.np-dialogue--student .np-dialogue__speaker {
  background-color: #fff;
  background-image: url('biop-question.png');
  background-position: center;
  background-size: contain;
}

.np-dialogue--biop .np-dialogue__bubble {
  background: var(--np-student-bg);
  border-color: var(--np-student-line);
  grid-column: 1;
  grid-row: 1;
}

.np-dialogue--biop .np-dialogue__bubble::before {
  border-left-color: var(--np-student-line);
  border-width: 9px 0 9px 12px;
  right: -12px;
}

.np-dialogue--biop .np-dialogue__bubble::after {
  border-left-color: var(--np-student-bg);
  border-width: 8px 0 8px 11px;
  right: -10px;
  top: 23px;
}

.np-dialogue--biop .np-dialogue__name {
  color: var(--np-student);
}

.np-dialogue--biop.np-biop--bright .np-dialogue__speaker {
  background-image: url('biop-bright.png');
}

.np-dialogue--biop.np-biop--side .np-dialogue__speaker {
  background-image: url('biop-side.png');
}

.np-dialogue--biop.np-biop--surprised .np-dialogue__speaker {
  background-image: url('biop-surprised.png');
}

.np-dialogue--biop.np-biop--back .np-dialogue__speaker {
  background-image: url('biop-back.png');
}

.np-dialogue--biop.np-biop--confused .np-dialogue__speaker {
  background-image: url('biop-confused.png');
}

@media (max-width: 640px) {
  .np-dialogue--biop {
    grid-template-columns: minmax(0, 1fr) 54px;
    padding-left: 0;
  }

  .np-dialogue--biop .np-dialogue__bubble::before,
  .np-dialogue--biop .np-dialogue__bubble::after {
    top: 16px;
  }

  .np-dialogue--biop .np-dialogue__bubble::after {
    top: 17px;
  }
}