/* Independent gift slots beneath the Christmas tree. Each slot can become a tool entry later. */
.workbench-gifts {
  position: absolute;
  left: -2%;
  bottom: 135px;
  z-index: 4;
  width: 380px;
  height: 88px;
  pointer-events: none;
}

.workbench-gift-slot {
  --gift-box-top: #d94a50;
  --gift-box-bottom: #aa2938;
  --gift-lid-top: #ef6265;
  --gift-lid-bottom: #c83846;
  --gift-ribbon: #ffd15a;
  --gift-ribbon-dark: #e3a92d;
  position: absolute;
  bottom: 0;
  width: 64px;
  height: 54px;
  padding: 0;
  appearance: none;
  border: 1px solid rgba(102, 49, 40, .32);
  border-radius: 5px;
  background: linear-gradient(145deg, var(--gift-box-top), var(--gift-box-bottom));
  box-shadow:
    inset 5px 4px 8px rgba(255, 255, 255, .18),
    inset -5px -5px 8px rgba(83, 31, 29, .14),
    0 10px 12px rgba(73, 48, 37, .2);
  pointer-events: auto;
  transform-origin: 50% 100%;
}

.workbench-gift-slot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  bottom: 0;
  width: 12px;
  background: linear-gradient(90deg, var(--gift-ribbon-dark), var(--gift-ribbon) 45%, var(--gift-ribbon-dark));
  transform: translateX(-50%);
}

.workbench-gift-slot::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: -7px;
  height: 14px;
  border: 1px solid rgba(102, 49, 40, .26);
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent calc(50% - 6px), var(--gift-ribbon) calc(50% - 6px) calc(50% + 6px), transparent calc(50% + 6px)),
    linear-gradient(145deg, var(--gift-lid-top), var(--gift-lid-bottom));
  box-shadow: 0 3px 4px rgba(80, 41, 34, .14);
}

.workbench-gift-bow {
  position: absolute;
  left: 50%;
  top: -25px;
  z-index: 2;
  width: 46px;
  height: 24px;
  transform: translateX(-50%);
}

.workbench-gift-bow::before,
.workbench-gift-bow::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 20px;
  height: 14px;
  border: 2px solid var(--gift-ribbon-dark);
  background: linear-gradient(145deg, #ffe47e, var(--gift-ribbon));
}

.workbench-gift-bow::before {
  left: 1px;
  border-radius: 12px 4px 10px 4px;
  transform: rotate(18deg);
}

.workbench-gift-bow::after {
  right: 1px;
  border-radius: 4px 12px 4px 10px;
  transform: rotate(-18deg);
}

.workbench-gift-bow > span {
  position: absolute;
  left: 50%;
  top: 7px;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid var(--gift-ribbon-dark);
  border-radius: 50%;
  background: var(--gift-ribbon);
  transform: translateX(-50%);
}

.workbench-gift-slot.gift-one {
  left: 96px;
  bottom: 1px;
  width: 68px;
  height: 55px;
  transform: rotate(-3deg) scale(.72, .9);
}

.workbench-gift-slot.gift-two {
  --gift-box-top: #3d8c78;
  --gift-box-bottom: #246657;
  --gift-lid-top: #5ca58e;
  --gift-lid-bottom: #347663;
  --gift-ribbon: #f06a67;
  --gift-ribbon-dark: #bc4148;
  left: 163px;
  bottom: 5px;
  width: 56px;
  height: 46px;
  transform: rotate(2deg) scale(.72, .9);
}

.workbench-gift-slot.gift-three {
  --gift-box-top: #f1bf48;
  --gift-box-bottom: #d28e2f;
  --gift-lid-top: #ffd76f;
  --gift-lid-bottom: #e7aa3b;
  --gift-ribbon: #dc4a55;
  --gift-ribbon-dark: #aa2d3b;
  left: 219px;
  bottom: 0;
  width: 74px;
  height: 59px;
  transform: rotate(3deg) scale(.72, .9);
}

.workbench-gift-slot:not(:disabled) {
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), filter .22s ease;
}

.workbench-gift-slot:not(:disabled):hover,
.workbench-gift-slot:not(:disabled):focus-visible {
  filter: brightness(1.05);
  outline: 2px solid rgba(255, 209, 90, .92);
  outline-offset: 4px;
}

.workbench-gift-slot:disabled {
  cursor: default;
  opacity: 1;
}

html.theme-dark .workbench-gift-slot {
  box-shadow:
    inset 5px 4px 8px rgba(255, 255, 255, .16),
    inset -5px -5px 8px rgba(20, 22, 25, .18),
    0 10px 14px rgba(8, 12, 16, .32);
}