@import './variables.css';

.crafting-table {
  display: flex;
  flex-direction: column;
  background-color: var(--crafting-table-background-color);
  border: 4px outset var(--crafting-table-border-color);
  box-shadow: 0 0 0 4px #000000;
  border-radius: 6px;
  padding: var(--crafting-table-padding);
  margin: var(--crafting-table-margin);
  user-select: none;
}

.crafting-text {
  font-size: var(--crafting-text-size);
  color: var(--crafting-text-color);
  line-height: var(--crafting-text-line-height);
  letter-spacing: -.1rem;
  font-weight: 400;
}

.crafting-table__crafting {
  display: flex;
  align-items: center;
  width: 100%;
  gap: .5rem;
}

.crafting-recipe-button {
  width: var(--slot-size);
  height: var(--slot-size);
  background-color: var(--crafting-table-background-color);
  border: 3px outset #000000;
  border-radius: .25rem;
  cursor: pointer;
  aspect-ratio: 1/1;
}

.crafting-recipe-button:hover {
  background-color: #8793C7;
}

.crafting-recipe-button img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: .25rem;
}

.crafting-container {
  display: flex;
  flex-direction: column;
}

#craftingGrid {
  display: grid;
  grid-template-columns: repeat(3, var(--slot-size));
  grid-template-rows: repeat(3, var(--slot-size));
  padding: 0;
}

#craftingArrow {
  background-image: url('./../assets/images/crafting_arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: var(--slot-size);
  width: var(--slot-size);
  margin: 0 .5rem;
}

.crafting-recipe-button,
#craftingArrow,
#craftingResult {
  margin-top: var(--crafting-text-line-height);
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(9, var(--slot-size));
  grid-template-rows: repeat(4, var(--slot-size));
}

.inventory-grid .slot:nth-last-child(-n + 9) {
  margin-top: 1rem;
}

.slot {
  width: var(--slot-size);
  height: var(--slot-size);
  cursor: pointer;
}

.slot:hover {
  opacity: 60%;
  cursor: pointer;
}

.slot,
#craftingResult {
  aspect-ratio: 1/1;
  background-color: var(--slot-background-color);
  border: 3px inset var(--slot-border-color);
}

.item {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}

.item.active {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.item__img {
  width: calc(var(--slot-size) - .5rem);
  height: calc(var(--slot-size) - .5rem);
  object-fit: contain;
  object-position: center;
}

.item__quantity {
  width: calc(var(--slot-size) - .5rem);
  position: absolute;
  text-align: right;
  font-size: var(--crafting-text-size);
  color: white;
  text-shadow: 2px 2px 0 var(--crafting-text-color);
}

#craftingResult {
  width: var(--result-slot-size);
  height: var(--result-slot-size);
  padding: var(--result-slot-padding);
  display: flex;
  justify-content: center;
  align-items: center;
}