/* Cash desk faces: the player's photo on every line that names a player, a kind tile where no face stands for the line. */

.cashier-search-icon {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 1;
  color: var(--color-silver-500);
  transform: translateY(-50%);
  pointer-events: none;
}

.cashier-search > .field {
  padding-left: 38px;
}

.cashier-line {
  grid-template-columns: 52px 38px minmax(0, 1fr) auto auto;
  grid-template-areas: "time mark main amount actions";
}

.cashier-line-time {
  grid-area: time;
}

.cashier-line > .cashier-mark {
  grid-area: mark;
}

.cashier-line-main {
  grid-area: main;
  min-width: 0;
}

.cashier-line-amount {
  grid-area: amount;
}

.cashier-line-actions {
  grid-area: actions;
}

.cashier-mark {
  position: relative;
  display: block;
  width: 38px;
  height: 42px;
  flex-shrink: 0;
}

.reception-avatar.cashier-avatar-line {
  width: 38px;
  height: 42px;
  border-radius: 8px;
  font-size: .8rem;
}

.cashier-mark-tile {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-well);
  color: var(--color-silver-400);
}

.cashier-line.is-voided .cashier-mark,
.cashier-journal tr.is-voided .cashier-mark {
  opacity: .45;
}

.cashier-who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cashier-booked-player {
  position: relative;
  flex-shrink: 0;
}

.cashier-booked-player .reception-avatar.cashier-avatar-line {
  width: 56px;
  height: 64px;
  border-radius: 10px;
  font-size: 1.1rem;
}

.cashier-booked-check {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--color-surface);
  border-radius: 999px;
  background: var(--color-felt);
  color: var(--color-ink);
}

@media (max-width: 640px) {
  .cashier-line {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas:
      "mark main amount"
      "time actions actions";
    row-gap: 6px;
  }

  .cashier-line-time {
    font-size: .75rem;
    text-align: center;
  }
}